module_overview

Note: The purpose of this page is to show the different options with the smaller modules inside the different layout containters on pagetype "Category Page", "SubCategory Page" and "Product / Service Detail Page".  For more information about the layout containers, please click here (LINK) for the module overview.

PLEASE DO NOT CHANGE ANYTHING ON THIS PAGE. IT IS JUST FOR DOCUMENTATION.

Category Card (1.5 / 1.8)

This module is often used to introduce content of a certain category or area.

Mandatory content:

• Headline

Optional content:

• Copytext
• CTA
• Image
• Category Name
• Subline
• Background Color

Possible Slots:

• 100, 66, 50, 33

Teaser Card Image (1.6)

The Teaser Card Image Module is used to get the users attention for a certain content. As it is a teaser, it allows only little text and can be combined with an image in the background.

Mandatory content:

• Headline
• Image
• Link

Optional content:

• Copytext
• Intro-Text
• Category Name

Possible Slots:

• 100, 66, 50, 33, 25

NOTE: In Slot 25, this module has no copytex displayed in frontend.

Teaser Card Icon (1.7)

The Teaser Card Icon Module is used to get the users attention for a certain content. As it is a teaser, it allows only little text and can be combined with an icon from the iconset.

Mandatory content:

• Headline

Optional content:

• Copytext
• Category Name
• Icon
• Link
• Background Color

Possible Slots:

• 50, 33, 25

Image Card Module (1.9)

The Image Card is used for images, infographics etc only without any text or CTA.

Mandatory content:

• Image (SVG, GIF, JPG, PNG)

Optional

• Gradient

Possible Slots:

• all

Video Card Module (1.10  / 1.17)

The Video Card is used for moving content. Please note: There is an exception in this module. It can be used as a divider as well. Simply place it outside of any layout container (See below).

Mandatory content:

• Video
• Video-Thumbnail (SVG, GIF, JPG, PNG)

Video Options:

Autoplay // Only for Desktop. Not working on mobile.

Loop // Video will start over after it is finished.

Playsinline // If activated, the video will NOT play in the native Video Player of the device.

Possible Slots:

• all

Update March 2023:

It is now possible to add a subline and headline on a video card.



NOTE: Since this card can be used in all slots, it is not possible to define a maximum character length for the text. In this case it is up to the editor to check in the particular case if the text is readable in frontend on mobile AND desktop.

Example: Video as a divider 

Slider Card Icon Module (1.12)

The Slider Card Icon Module is used to showcase features, flows or statements. It is ideal to bundle related content. We recommend not to use more than 5 slides.

Mandatory content:

• Headline
• Copytext
• Icon

Optional

• Background Color
• Anchor Link 
• Custom Icon (SVG) Upload

Possible Slots:

• 100, 66, 50

Slider Card Image Module (1.13)

The Slider Card Icon Module is used to showcase features, flows or statements. It is ideal to bundle related content. We recommend not to use more than 5 slides.

Mandatory content:

• Headline

Possible Slots:

• 100, 66, 50

Benefit Card Module (1.19)

The Benefit Card is used communicate the benefits of a product or service.
 Recommendation of 3 benefits.

Mandatory content:

• Headline
• Benefits

Possible Slots:

• 50, 33 ,25

Quote Card Module (1.20)

The Quote Card is used for quotes and statements of either customers, Alphabets experts or employees.

Mandatory content:

• Copytext (Quote)
• Avatar (Image)
• Name
• Position

Optional:

• Company
• Background Color

Possible Slots:

• 50, 33 ,25

Download Card Module (1.21)

The Download Card is used for downloadable content such as brochures, guides and documents.

Mandatory content:

• Headline
• Document (Download)
• Download Label
• Icon

Optional:

• Category Name
• Background Color

Possible Slots:

• 66, 50, 33 ,25

NOTE: The filesize is attached automatically by drupal.

Linklist Card Module (1.22)

The Linklist Card Module is used to offer deepdives and link to detailed information on Sub-Category pages

Mandatory content:

• Icon
• Link URL
• Link Text

Optional:

• Headline
• Background Color

Possible Slots:

• 66, 50, 33 ,25

4square Cards (1.23)

This Module is used as an alternative to a link list. Keep in mind that this module can only be used with exactly 4 links.

Mandatory content:

• Headline
• Link URL

Optional:

• Background Image
• Background Color

Possible Slots:

• 100, 66, 50

Contact Card Module (1.24)

The Contact Card is used to adress a lead or offer support when needed. Use real people and keep context in mind where to place

Mandatory content:

• Headline
• Image
• Contact Information (Phone or Link to Mail form)

Possible Slots:

• 25, 33, 50

NOTE: Only on mobile the phone number becomes clickable.

Office Teaser Module