Text
Alignment
| Position | Class name | Copy code |
|---|---|---|
| Left align text | .text-left | |
| Right align text | .text-right | |
| Center align text | .text-center |
Color
| Figma variables name | Class name | Copy code |
|---|---|---|
| Primary | .text-primary | |
| Secondary | .text-secondary | |
| Tertiary | .text-tertiary | |
| Brand | .text-brand | |
| Brand strong | .text-brand-strong | |
| Inverse | .text-inverse | |
| Success | .text-success | |
| Danger | .text-danger | |
| Error | .text-error | |
| Info | .text-info | |
| Warning | .text-warning |
Line height
| Spacing | Class name | Copy code |
|---|---|---|
100 line height example | .line-height-100 | |
110 line height example | .line-height-110 | |
120 line height example | .line-height-120 | |
130 line height example | .line-height-130 | |
150 line height example | .line-height-150 |
List and list items
Lists display a set of related text-only content.
Lists should:
- Break up chunks of related content to make the information easier for users to scan
- Be phrased consistently (try to start each item with a noun or a verb and be consistent with each item)
- Not be used for lists where the entire item represents an action
Every item in a list should:
- Start with a capital letter
- Not use commas or semicolons at the end of each line
- 50 licenses purchased
- 2 data packages per license
- Data Exchange included
- 50 licenses purchased
- 2 data packages per license
- Data Exchange included
- 50 licenses purchased
- 2 data packages per license
- Data Exchange included
<ul class="list-bullet"> <li>…</li> <li>…</li> <li>…</li></ul>| Name | Class | Copy |
|---|---|---|
| Bulleted | .list-bullet | |
| Numbered | .list-ordered | |
| No style | .list-unstyled |
Size
| Figma variables name | Class | Copy |
|---|---|---|
| Heading 1 | .heading-3xl | |
| Heading 2 | .heading-2xl | |
| Heading 3 | .heading-xl | |
| Heading 4 | .heading-lg | |
| Heading 5 | .heading-md | |
| Heading 6 | .heading-sm | |
| Subheader | .text-uppercase.text-sm | |
| Body large | .text-lg | |
| Base body | .text-base | |
| Caption | .text-sm | |
| Small | .text-xs |
Weight
| Type | Class name | Copy code |
|---|---|---|
| Light text | .weight-300 | |
| Regular text | .weight-400 | |
| Regular strong text | .weight-500 | |
| Semibold text | .weight-600 | |
| Bold text | .weight-700 |
Wrapping
| Type | Class name | Copy code |
|---|---|---|
Text that will truncate instead of wrapping | .text-truncate | |
This text block will wrap, breaking up anything including long URLs http://www.hithereimalongurl.com/dave_will_just_ramble_on_in_a_long_sentence_like_this/?ok=cool and run on strings like this --------------------------------------------------------------------------. | .overflow-wrap-break-word |