Collapse: style
This page documents visual specifications such as colour, typography and structure.
| Element | Property | Colour reference | Colour token |
|---|---|---|---|
| Trigger | text colour |
Text tertiary
|
$collapse-trigger |
| Title | text colour |
Text primary
|
$collapse-card-title |
| Content | text colour |
Text primary
|
$collapse-card-text |
| Card background | background colour |
UI overlay 02
|
$collapse-card-background |
Typography
Collapse triggers and titles should use sentence case, capitalise only the first word and any proper nouns.
|
Element
|
Size (px/rem)
|
Weight
|
Line height (px/rem)
|
Letter spacing
|
Token
|
|---|---|---|---|---|---|
| Trigger | 14 / 0.875 | Regular – 400 | 20 / 1.25 | 0.25px | $link-02 |
| Title | 16 / 1 | Medium – 500 | 24 / 1.5 | 0.16px | $title-01 |
| Content | 16 / 1 | Light – 300 | 24 / 1.5 | 0.16px | $body-02 |
