Implementation
Headings and paragraph style breakdown
Below is a breakdown of all our properties for the core heading and paragraph styles.
Desktop sizes (screen sizes larger then 992px)
| Element | Weight | Size | Line height | Margin top |
|---|---|---|---|---|
Heading 1
| 600 | 2.5rem (40px) | 130% (52px) | 4rem (64px) |
Heading 2
| 600 | 2rem (32px) | 125% (40px) | 3rem (48px) |
Heading 3
| 600 | 1.5rem (24px) | 133% (32px) | 2.25rem (36px) |
Heading 4
| 600 | 1.25rem (20px) | 120% (24px) | 2 rem (32px) |
Heading 5
| 600 | 1rem (16px) | 125%(20px) | 1.5rem (24px) |
Heading 6
| 600 | 0.87rem (14px) | 114% (16px) | 1.5rem (24px) |
Abstract text
| 400 | 1.5 (24px) | 133% (32px) | 1.5rem (24px) |
Body text
| 400 | 1rem (16px) | 150% (24px) | 1.5rem (24px) |
Caption text
| 400 | 0.87rem (14px) | 140% (20px) | 1rem (16px) |
| 400 | 1rem (16px) | 150% (24px) | 1.5rem (24px) |
Site title
| 600 | 1.25rem (20px) | 120% (25px) | 0 |
Mobile sizes (screen sizes below 992px)
Changes are primarily to heading 1, 2, abstract text and site title sizes. Other than that, it's only margin top values that change at the mobile breakpoint.
| Element | Weight | Size | Line height | Margin top |
|---|---|---|---|---|
Heading 1
| 600 | 2rem (32px) | 125% (40px) | 2rem (32px) |
Heading 2
| 600 | 1.75rem (28px) | 128% (36px) | 2rem (32px) |
Heading 3
| 600 | 1.5rem (24px) | 133% (32px) | 2rem (32px) |
Heading 4
| 600 | 1.25rem (20px) | 120% (24px) | 2rem (32px) |
Heading 5
| 600 | 1rem (16px) | 125%(20px) | 1.25rem (20px) |
Heading 6
| 600 | 0.87rem (14px) | 114% (16px) | 1.25rem (20px) |
Abstract text
| 400 | 1.25rem (20px) | 140% (28px) | 1.25rem (20px) |
Body text
| 400 | 1rem (16px) | 150% (24px) | 1.25rem (20px) |
Caption text
| 400 | 0.87rem (14px) | 140% (20px) | 1rem (16px) |
| 400 | 1rem (16px) | 150% (24px) | 1.25rem (20px) |
Site title
| 600 | 1rem (16px) | 150% (24px) | 0 |
Classes and variables
| Name | Description |
|---|---|
qld__display-xs | Class that sets element to extra-small font size and heading weight. |
qld__display-sm | Class that sets element to small font size and heading weight. |
qld__display-md | Class that sets element to medium font size and heading weight. |
qld__display-lg | Class that sets element to large font size and heading weight. |
qld__display-xl | Class that sets element to extra large font size and heading weight. |
qld__display-xxl | Class that sets element to XX large font size and heading weight. |
qld__display-xxxl | Class that sets element to XXX large font size and heading weight. |
qld__default-xs | Class that sets element to extra-small font size and default text weight. |
qld__default-sm | Class that sets element to small font size and default text weight. |
qld__default-md | Class that sets element to medium font size and default text weight. |
qld__default-lg | Class that sets elements to large font size and default text weight. |
qld__default-xl | Class that sets element to extra large font size and default text weight. |
qld__default-xxl | Class that sets element to XX large font size and default text weight. |
qld__default-xxxl | Class that sets element to XX large font size and default text weight. |
qld__link-text | Class that sets element to use link text style. |
qld__heading-space | Class that sets element line height to heading style. |
qld__no-space | Class that set elements line height to equal text size. |
qld_abstract | Class that sets elements to use abstract style font size and weight. |
qld__caption | Class that sets elements to use caption style font size and weight. |
qld__max-width | Class that removes max-width from text elements. |
--QLD-color-light-heading | Variable that defines light heading colours. |
--QLD-color-light-text__muted | Variable that defines light muted text colours. |
--QLD-color-light-text | Variable that defines light text colours. |
--QLD-color-dark-heading | Variable that defines dark heading colours. |
--QLD-color-dark-text__muted | Variable that defines dark muted text colours. |
--QLD-color-light-text | Variable that defines text colours. |