Theme and Style
The styles in the site are currently default Bootstrap styles. The below displays how these appear visually.
Headings
Note that the headings on the site are two steps down from the headings in the design file. The two largest heading sizes in the design file are reserved for use in landing pages and special occasions.
Section Indicator (16/20)
| Example | Section indicator: Lorem Ipsum |
| Details | font-size: 16px; font-weight: 600; line-height: 20px; |
body-s (14/20)
| Example | |
| Details | |
| Usage |
Example: Body small text. Lorem ipsum.
Details: font-size: 16px; font-weight: 600; line-height: 20px;
body-s-bold (14/20)
| Example | |
| Details | |
| Usage |
Example: Body small bold text. Lorem Ipsum
Details: font-size: 16px; font-weight: 600; line-height: 20px;
body-m (16/24)
| Example | |
| Details | |
| Usage |
Example: Body medium text. This is used for most base copy on the site.
Details: font-size: 16px; font-weight: 600; line-height: 20px;
body-m-bold (16/24)
| Example | |
| Details | |
| Usage |
Example: Section indicator: Lorem Ipsum
Details: font-size: 16px; font-weight: 600; line-height: 20px;
body-l (18/28)
| Example | |
| Details | |
| Usage |
Example: Section indicator: Lorem Ipsum
Details: font-size: 16px; font-weight: 600; line-height: 20px;
body-l (18/28)
| Example | |
| Details | |
| Usage |
Example: Section indicator: Lorem Ipsum
Details: font-size: 16px; font-weight: 600; line-height: 20px;
body-xl (24/32)
| Example | |
| Details | |
| Usage |
Example: Section indicator: Lorem Ipsum
Details: font-size: 16px; font-weight: 600; line-height: 20px;
body-xl-bold (24/32)
| Example | |
| Details | |
| Usage |
Example: Section indicator: Lorem Ipsum
Details: font-size: 16px; font-weight: 600; line-height: 20px;
Heading 01 (64/72)
| Example |
Heading 01 : Lorem Ipsum |
| Notes | This is a special instance of <h1>. This is used primarily in banners. |
| Details | font-size: 64px; line-height: 72px; font-weight: 600; |
| Class name | display-1 |
| Usage |
Heading 02 (56/64)
| Example |
Heading 02: Lorem Ipsum |
| Notes | This is a special instance of <h1>. This is used primarily in banners. |
| Details | font-size: 48px; line-height: 64px; font-weight: 600; |
| Class name | display-2 |
| Usage |
Heading 03 (48/56)
| Example |
Heading 03: Lorem Ipsum |
| Notes | This is the equivalent of an <h1> on the site |
| Details | |
| Usage |
Heading 04 (40/48)
| Example |
Heading 04 : Lorem Ipsum |
| Notes | This is the equivalent of an <h2> on the site |
| Details | |
| Usage |
Heading 05 (32/40)
| Example |
Heading 05: Lorem Ipsum |
| Notes | This is the equivalent of an <h3> on the site |
| Details | |
| Usage |
Heading 06 (28/32)
| Example | Heading 06: Lorem Ipsum |
| Notes | This is the equivalent of an <h4> on the site |
| Details | |
| Usage |
Heading 07 24/28
| Example | Heading 07: Lorem Ipsum |
| Notes | This is the equivalent of an <h5> on the site |
| Details | |
| Usage |
Heading 08 20/24
| Example |
Heading 08: Lorem Ipsum |
| Notes | This is the equivalent of an <h6> on the site |
| Details | font-size: 20px; font-weight: 600; line-height: 24px; |
| Usage |
label-s (12/16)
| Example |
Label small, lorem ipsum |
| Details | font-size: 16px; font-weight: 600; line-height: 20px; |
| Usage |
Buttons
Displayed in regular mode
Primary button Secondary button Primary outline button Secondary outline button
Displayed in dark mode