Group Container
The Group Container serves the purpose of grouping up to six Teasers, providing the end user with a visual indication that this information is interconnected. Ideal for all types of pages to inform and guide users to subpages.
Personförsäkringar
Best practice
Layout: 1-1-1 columns
Background color: Thistle
Personförsäkringar
Layout: 1-1-1 columns with two rows
Background color: Apricot
Våra sparkonton
Layout: 1-1 columns
Background color: Mist
Upptäck mer
Do
- The headline (H2) should be placed inside the Group Container for visual consistency and organization, ensuring clear association with grouped content to enhance user understanding and navigation.
Personförsäkringar
Don't
- Do not place the headline above the Group Container. This can disrupt the visual hierarchy and confuse users about the relationship between the heading and the grouped content.
Personförsäkringar
- Group Container is exclusive for Teasers. Do not place any components other than Teasers in the container. It is not designed to accommodate other components and may disrupt the design, especially on mobile devices.
Do
- Always use Teasers without background color in the Group Container.
- Background color should be set in the Group Container, not in Teasers.
- When the Teasers in the Group Container have no background color, the margins are correct, and the links in the Teasers align as intended.
Personförsäkringar
Don't
- Teasers should never have a background color when used in the Group Container. The background color breaks the margins and link alignment. This also the case when Teaser background color is the same as Group container background color.
- Do not mix background colors or headline colors in the Teasers.
Personförsäkringar
Configuration in AEM
Background colour
The Group Container can have three background colors.
- Apricot
- Thistle
- Mist
Container layout
The Group Container can have two (1-1) or three (1-1-1) columns.
Second row
The Group Container can have two rows. Check the check box to add the second row. Uncheck the checkbox to delete the second row.
Heading text
The Group Container heading is H2 and optional.
![Group container settings](/adobe/dynamicmedia/deliver/dm-aid--a857659d-c67f-45cb-90b2-d6d5ef897de2/group-container-settings.png?preferwebp=true&quality=82)