Cards provide designers a place to organize text and/or images into sections that can be easily scanned.
Color
| Element | Property | Color token |
|---|
| Container | background-color | $background |
| Text | text color | $text-primary |
| Link | text color | $link-primary |
Typography
| Element | Font-size (px/rem) | Font-weight | Type token |
|---|
| Heading | 28 / 1.75 | Semibold / 600 | $heading-05 |
| Text | 18 / 1.125 | Regular / 400 | $body-01 |
Structure
| Element | Property | px / rem | Spacing token |
|---|
| Text container | padding | 32 / 2 | $spacing-07 |
| Heading | margin-bottom | 8 / 0.5 | $spacing-03 |
| Button/link | margin-top | 24 / 1.5 | $spacing-06 |
