Typography
Typography components provide a consistent and accessible text hierarchy throughout the platform. All typography components use the Outfit typeface and should be preferred over raw HTML elements.
Quick Start
Typography components provide a consistent visual language and should be preferred over raw HTML elements.
1<TypographyH2>Getting Started</TypographyH2> 2 3<TypographyP> 4 This paragraph uses the TypographyP component. 5</TypographyP>
Font
The design system uses Outfit as its primary typeface.
The quick brown fox jumps over the lazy dog
Outfit is used throughout the design system and is automatically applied to all typography components.
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
0 1 2 3 4 5 6 7 8 9
Headings
Heading components provide a clear and consistent content hierarchy.
Heading Level 1
Heading Level 2
Heading Level 3
Heading Level 4
Heading Level 5
Heading Level 6
1<TypographyH1>Heading Level 1</TypographyH1> 2<TypographyH2>Heading Level 2</TypographyH2> 3<TypographyH3>Heading Level 3</TypographyH3> 4<TypographyH4>Heading Level 4</TypographyH4> 5<TypographyH5>Heading Level 5</TypographyH5> 6<TypographyH6>Heading Level 6</TypographyH6>
Body Text
Typography components for general content, supporting text, and metadata.
Paragraph
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer facilisis, nibh sed rhoncus tincidunt, massa magna tincidunt lectus, sit amet luctus elit lacus vel erat.
Small Text
Small text is intended for supporting information and secondary content.
Overline
Featured Content
1<TypographyP>Standard body text.</TypographyP> 2 3<TypographySmall>Supporting text.</TypographySmall> 4 5<TypographyOverline>Featured Content</TypographyOverline>
Links
TypographyA provides consistent link styling across all applications.
Visit the documentation portal to learn more.
1Visit the <TypographyA href="#">documentation portal</TypographyA> to learn more.
Text Emphasis
Use emphasis components to draw attention to important information.
This text contains bold text.
This text contains strong text.
This text contains italic text.
This text contains emphasised text.
This text contains underlined text.
1<TypographyBold>Bold text</TypographyBold> 2<TypographyStrong>Strong text</TypographyStrong> 3<TypographyItalic>Italic text</TypographyItalic> 4<TypographyEmphasis>Emphasised text</TypographyEmphasis> 5<TypographyUnderline>Underlined text</TypographyUnderline>
Lists
Ordered and unordered list components provide consistent spacing and formatting.
Unordered List
- First item
- Second item
- Third item
Ordered List
- First step
- Second step
- Third step
1<TypographyUnorderedList> 2 <TypographyListItem>First item</TypographyListItem> 3 <TypographyListItem>Second item</TypographyListItem> 4 <TypographyListItem>Third item</TypographyListItem> 5</TypographyUnorderedList> 6 7<TypographyOrderedList> 8 <TypographyListItem>First step</TypographyListItem> 9 <TypographyListItem>Second step</TypographyListItem> 10 <TypographyListItem>Third step</TypographyListItem> 11</TypographyOrderedList>
API Reference
Headings
Property | Type | Default | Description |
|---|---|---|---|
| TypographyH1 | h1 | - | 45px / 68px page heading. |
| TypographyH2 | h2 | - | 38px / 56px section heading. |
| TypographyH3 | h3 | - | 28px / 42px subsection heading. |
| TypographyH4 | h4 | - | 24px / 38px heading. |
| TypographyH5 | h5 | - | 18px / 25px heading. |
| TypographyH6 | h6 | - | 16px / 22px heading. |
Body Text
Property | Type | Default | Description |
|---|---|---|---|
| TypographyP | p | - | 15px / 22px body text. |
| TypographySmall | small | - | 13px / 20px supporting text. |
| TypographyCaption | p | - | 13px / 18px caption text. |
| TypographyOverline | p | - | 12px / 14px uppercase overline text. |
Links
Property | Type | Default | Description |
|---|---|---|---|
| TypographyA | a | - | Styled hyperlink component. |
Text Formatting
Property | Type | Default | Description |
|---|---|---|---|
| TypographyBold | b | - | Applies bold styling. |
| TypographyStrong | strong | - | Applies semantic strong emphasis. |
| TypographyItalic | i | - | Applies italic styling. |
| TypographyEmphasis | em | - | Applies semantic emphasis. |
| TypographyUnderline | u | - | Applies underline styling. |
Lists
Property | Type | Default | Description |
|---|---|---|---|
| TypographyOrderedList | ol | - | Styled ordered list container. |
| TypographyUnorderedList | ul | - | Styled unordered list container. |
| TypographyListItem | li | - | List item used with ordered and unordered lists. |
Visual Reference
Overline
Heading Level 1
Heading Level 2
Heading Level 3
Heading Level 4
Heading Level 5
Heading Level 6
Standard body text used throughout the application.
Small text used for metadata and supporting information.
Example caption text
Bold, Italic, Underline, and Links can be combined within content.