Cards are a structure for organizing thematic groups of content or features within a template.
Usage
A card is a thematic grouping of content, typically with a heading. They are sometimes sequential, but never hierarchical. Use cards when you need to show multiple groups of similar content that live at the same level, such as audience conditions or experiences in a campaign. Cards can be re-ordered, but they can't be sorted.
Bordered Cards
Sometimes, to highlight a card that is not full width, you can use a border. This helps visually separate one card from other cards. (When a card is too big or too small, sometimes borders get lost and might not make sense.)
Properties
| property | propType | required | default | description |
|---|---|---|---|---|
| shadow | bool | - | false | Display a subtle shadow around card. |
| children | string | yes | - | Elements that appears within the component |
| onClose | func | - | - | method to invoke when a close element is clicked |
| testSection | string | - | - | For automated testing only. |
| title | string | yes | - | What is the card title |
Best Practices
Do
Use cards to visually organize chunks of content
Use cards for content that's at the same level
Don't
Use side borders on cards that are full width