Breadcrumbs
Breadcrumbs are navigational links that help users navigate within a website's hierarchy. Breadcrumbs show users their current location and enable them to easily move up to a parent level or previous step.
Color
| Element | Property | Color token |
|---|---|---|
| Link | color | $link-primary |
| Link:hover | color | $link-hover |
| Slash | fill | $icon-tertiary |
| Current page | color | $text-secondary |
Typography
| Element | Font-size (px/rem) | Font-weight | Type token |
|---|---|---|---|
| Link | 18 / 1.125 | Regular / 400 | – |
Structure
Margins and padding
| Element | Property | px / rem | Spacing token |
|---|---|---|---|
| Container | padding-left, padding-right | 80 / 5 | $spacing-11 |
| padding-top-, padding-bottom | 24 / 1.5 | $spacing-06 | |
| Breadcrumb | margin-left | 12 / 0.75 | $spacing-04 |