Banners show a variety of visual and textual content in a horizontal layout.
Color
| Element | Property | Color token |
|---|
| Container | background-color | $ultramarine-gradient |
| Text | text-color | $text-inverse |
Typography
| Element | Font-size (px/rem) | Font-weight | Type token |
|---|
| Tag | 18 / 1.125 | Regular / 400 | $title-01 |
| Heading | 36 / 2.25 | Black / 800 | $display-03 |
| Body | 18 / 1.125 | Semibold / 600 | $body-01 |
Structure
Margins and padding
| Element | Property | px / rem | Spacing token |
|---|
| Container | padding-left, padding-right | 120 / 7.5 | $spacing-12 |
| | padding-top, padding-bottom | 64 /4 | $spacing-10 |
