Cards - Bleed

See every variation of this pattern full size as it currently looks in AEM Cloud. Resize your browser to view breakpoint behavior.

In the “3 cards, 2 rows” variation, the initial row accommodates one card, while the subsequent row(s) provide space for two cards each. The cards in the second row are half the width or size of the card in the first row.

1. Headline: Characters:~60
2. Card Group: No minimum or maximum number of cards.
3. Full Width Card
4. Half Width Card: Single half-width cards align left (not shown).
5. Image
6. Eyebrow: Characters:~30
7. Stat Info
8. Title: Characters:~60
9. Description: Characters:~180
10. CTA: CTAs can be Primary Buttons, Secondary Buttons, TRT Buttons or Text CTAs.
    • Characters for buttons:~20
    • Characters for text CTAs:~40

The "3 cards, 1 row" variation displays three cards per row, each taking up a third of the space, There is no maximum number of rows. If there are fewer than 3 cards in the last row, each card takes up a third of the space, aligning left.

The “4 cards, 2 rows” variation, each row has space for up to two cards.
By default in AEM, 2 rows are displayed, but there technically is no maximum number of rows which can be set up (there can also be Two cards in a single row). An uneven number of cards in the last row aligns left.

Below is a table of image requirements for each variation of the Mosaic card pattern.

This information relates to Design v3.1 of this pattern.