large-modules-overview
Sub Headline
Note: The purpose of this page is to show the different options with the large content modules (CM) which are not placed inside the layout containers. For information about every single module, please click here (LINK) for the module overview. For more info about layout containers, click here.
PLEASE DO NOT CHANGE ANYTHING ON THIS PAGE. IT IS JUST FOR DOCUMENTATION.
Divider - Quote (1.15)
The Quote Divider Module is used to display a quote from a customer, expert or employee at Alphabet. It can display several quotes as a slider.
Mandatory:
- Quote
Optional:
- Name
- Position
- Company
- Avatar (Image)
- Anchor
1 Quote - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Name
Position
Company
2 - Quote - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Name
Position
Company
With the tailor made solutions from Alphabet we create big flexibility helps us do business better.
Example w/o Avatar
TestCompany
1 Quote - No Avatar - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Divider - Download (1.15)
The Download Divider Module is used to provide downloadable content designed as a divider.
Note: For better linebreaks, the headline is separated here in 2 fields (Body). You can use both or only the 1st.
Mandatory:
- Body (Headline)
- Icon
- CTA Link or Document (Download)
- Document Label
Optional:
- Background image
1st Line of Bodytext (Headline)
2nd Line of Bodytext (Headline)
1st Line of Bodytext (Headline)
2nd Line of Bodytext (Headline)
Divider - Infographic (1.16)
The Infographic Divider is designed as a divider.
Note: For better linebreaks, the text is separated here in 3 fields (2 sublines, 1 headline). You must use the headline.
Mandatory:
- Headline
Optional:
- Subline Top
- Subline Bottom
- Icon
Subline Top
Headline
Subline Bottom
CM Accordion (1.24)
The Accordion Module is used most commonly for FAQs or for listings.
Mandatory:
- Headline for each item
- Copytext for each item
Optional:
- Anchor
- Subheadline for each item
- Link for each item
- Image for each item
Headline
General Copytext - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Subheadline 1
Copytext 1 - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Subheadline
Copytext 2 - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Subheadline
Copytext 3 - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
CM Benefits (1.25)
The Progress Chart Module is used when a lot of small content of a single topic comes together. This module is flexible and can be used with just one row of Benefits Tiles or up to four, with a maximum of 3 Benefits Tiles per row.
Mandatory:
- Headline
- Headline for each item
Optional:
- Anchor
- Subline
- Label Group 1 & 2
- Copytext for each item
- Link for each item
- Icon for each item
- Color
- Columns Limit Option // This determines if it is displayed as 2x2 or 2x3 in Frontend
Headline 2x3
Headline 2x3
Headline 2x3
Headline - 2x2 + Coral
CM ProductCompare (1.26) (Formerly known as CM Table)
The CM ProductCompare is used for comparisons and service overviews. The table can contain icons.
Mandatory:
- Headline
- Labels & Data for at least 2 columns
Optional:
- Subline
- CTA Link for column
Headline
| Title Column 1 | Title Column 2 | Title Column 2 | |
|---|---|---|---|
| Label - Feature 1 | |||
| Label - Feature 2 | |||
| Label - Feature 3 | |||
| Label - Feature 4 | |||
| Label - Feature 5 | |||
Learn more |
CM Process/Steps (1.27)
The CM Process/Step is used to showcase a step-by-step process.
Mandatory:
- General Headline
- Headline for each step
- Icon for each step
Optional:
- Anchor
- General Subline
- General Copytext
- Copytext for each step
General Headline - Module in Dark blue
General Copytext - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
General Headline - Module in Grey
General Copytext - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
General Headline - Module in White
General Copytext - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
CM Text
Mandatory:
Optional:
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.