Overview
Content Group - Cards pairs a section heading, optional body copy and CTA with a card group.
Formatting
Anatomy
- Headline
- Body copy
- CTA
- Card Group
Variations
Card Types
Content Group - Cards can display either icon cards or media cards. Please note that only one type of card can be used within a single content group.
Use the same card type for all cards within a single card group.
Don't mix card types within the same card group.
Cards Per Row
Cards per row dictates the number of cards in a row. Sometimes this can be adjusted based on total card number or breakpoint to avoid orphaning single card in the last row.
Note: Card Groups should always contain a minimum of two cards. Consider using another component if you only need to highlight a single item.
Large and Medium Breakpoints
On Large and Medium breakpoints, cards can be displayed in columns of two, three, or four.
Small and X-Small Breakpoints
On Small breakpoints, cards are presented in a two-column layout. On X-Small breakpoints, all cards stack within a single column.
Example of how a card group containing three cards responds to various breakpoints.
Guidelines
Card Height
The height of the largest card in a group will determine the height for all cards.
All cards within a card group should be the same height, as determined by the largest card in the group.