Typography Components
In this page you can find the Components to create typography elements. All components have two sizes, one for mobile and one for desktop. The definitions of the sizes can be found in the Emotion theme configuration theme.js.
If you haven't imported the global styles (globalStyles), please make sure to do so in order to apply the typography styles for the HTML tags like paragraphs, lists, blockquotes and others global typography definitions.
<H1 size="hero1">Hero1</H1>Hero1
<H1 size="hero2">Hero2</H1>Hero2
<H1 size="hero3">Hero3</H1>Hero3
<H1>Heading1</H1>Heading1
<H2>Heading2</H2>Heading2
<H3>Heading3</H3>Heading3
<H4>Heading4</H4>Heading4
<H5>Heading5</H5>Heading5
<H6>Heading6</H6>Heading6
Headings Props
| Property | Description | Type |
|---|---|---|
| children | Children elements | ReactNode |
| id | Defines element id | String |
| className | Defines element class name | String |
| size | Change font styles | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "hero1" | "hero2" | "hero3" |
| theme | Emotion theme configuration | Object |
<FontStyle variant="eyebrow">Eyebrow</FontStyle><FontStyle variant="subtitle">Subtitle</FontStyle><FontStyle variant="button">Button</FontStyle><FontStyle variant="buttonBig">Button Big</FontStyle><FontStyle variant="lead">Lead</FontStyle><FontStyle variant="input">Input</FontStyle><FontStyle variant="input">Input Big</FontStyle>FontStyle Props
| Property | Description | Type |
|---|---|---|
| children | Children elements | ReactNode |
| id | Defines element id | String |
| className | Defines element class name | String |
| variant | Change font styles | "eyebrow" | "subtitle" | "button" | "buttonBig" | "lead" | "input" | "inputBig" |
| theme | Emotion theme configuration | Object |
<strong>
Strong - Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus.
</strong><p>
Text - Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus.
</p>Text - Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus.
<small>
Small - Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus.
</small>Small - Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus.
<blockquote>
Blockquote - Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
</blockquote>Blockquote - Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
<code>
Code - Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
</code>Code - Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.