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

PropertyDescriptionType
childrenChildren elementsReactNode
idDefines element idString
classNameDefines element class nameString
sizeChange font styles"h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "hero1" | "hero2" | "hero3"
themeEmotion theme configurationObject
<FontStyle variant="eyebrow">Eyebrow</FontStyle>
Eyebrow
<FontStyle variant="subtitle">Subtitle</FontStyle>
Subtitle
<FontStyle variant="button">Button</FontStyle>
Button
<FontStyle variant="buttonBig">Button Big</FontStyle>
Button Big
<FontStyle variant="lead">Lead</FontStyle>
Lead
<FontStyle variant="input">Input</FontStyle>
Input
<FontStyle variant="input">Input Big</FontStyle>
Input Big

FontStyle Props

PropertyDescriptionType
childrenChildren elementsReactNode
idDefines element idString
classNameDefines element class nameString
variantChange font styles"eyebrow" | "subtitle" | "button" | "buttonBig" | "lead" | "input" | "inputBig"
themeEmotion theme configurationObject
<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>
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.
<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. 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>
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.
Emotion ColorsButton Components