Card Group
A card group is a collection of modular cards. Cards can be contextualized with an optional overarching heading and description in a section intro.
Use card groups to display similar, related content. Don't use card groups to display standalone content or sequential, continuous text. Each card should be made of self-contained content that stands on its own without the other cards in the group, but that also is on equal footing as the other cards.
Default Standard Card Group
Section Style
This example card group uses the default section style.
Background Option
This example card group has no background.
Layout Option
This example card group uses the standard card layout, where cards are vertically oriented.
Media Option
The cards in this example card group don’t have media. All cards in a card group must have the same media option.
CTA Option
This example card group doesn’t have a CTA. All cards in a card group must have the same CTA option.
Default Inline Card Group
This example card group uses the inline card layout, where cards are horizontally oriented.
The cards in this example card group don’t have media. All cards in a card group must have the same media option.
The cards in this example card group uses linked headings as their CTA option. All cards in a card group must have the same CTA option.
Default Linked Card Group
Bold Standard Card Group
With IconsAll card groups have the option to have a section description to contextualize the cards in the group.
This example card group uses the bold section style.
This example card group uses the maroon background option.
This example card group uses the standard card layout, where cards are vertically oriented.
The cards in this example card group use icons as their media option. All cards in a card group must have the same media option.
The cards in this example card group uses linked headings as their CTA option. All cards in a card group must have the same CTA option.
Elegant Inline Card Group
With IconsAll card groups have the option to have a section description to contextualize the cards in the group.
Layout Option
This example card group uses the inline card layout, where cards are horizontally oriented.
Media Option
The cards in this example card group use icons as their media option. All cards in a card group must have the same media option.
Default Standard Card Group
With IconsAll card groups have the option to have a section description to contextualize the cards in the group.
Layout Option
This example card group uses the standard card layout, where cards are vertically oriented.
Without SidebarMedia Option
The cards in this example card group use icons as their media option. All cards in a card group must have the same media option.
Without SidebarCTA Option
The cards in this example card group uses buttons as their CTA option. All cards in a card group must have the same CTA option.
Without SidebarBold Inline Card Group
With ImagesAll card groups have the option to have a section description to contextualize the cards in the group.
Layout Option
This example card group uses the inline card layout, where cards are horizontally oriented.
ButtonMedia Option
The cards in this example card group use images as their media option. All cards in a card group must have the same media option.
ButtonCTA Option
The cards in this example card group uses buttons as their CTA option. All cards in a card group must have the same CTA option.
ButtonElegant Standard Card Group
With ImagesAll card groups have the option to have a section description to contextualize the cards in the group.
Layout Option
This example card group uses the standard card layout, where cards are vertically oriented.
ButtonMedia Option
The cards in this example card group use images as their media option. All cards in a card group must have the same media option.
ButtonCTA Option
The cards in this example card group uses buttons as their CTA option. All cards in a card group must have the same CTA option.
ButtonElegant Linked Card Group
With ImagesAll card groups have the option to have a section description to contextualize the cards in the group.
Bold Linked Card Group
With IconsAll card groups have the option to have a section description to contextualize the cards in the group.