Sass Typography
In this page you can find the Sass typography definitions. All variations have two sizes, one for mobile and one for desktop. The definitions of the classes can be found in the file typography.scss.
If you haven't imported the entire Cherry files (cherry.scss), please make sure globals.scss is imported in order to apply the typography styles for the HTML tags like paragraphs, lists, blockquotes and others global typography definitions.
The definitions of the variables can be found in the file theme.scss.
<h1 class="hero1">Hero1</h1>Hero1
<h1 class="hero2">Hero2</h1>Hero2
<h1 class="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
<p class="font-style-eyebrow">Eyebrow</p><p class="font-style-subtitle">Subtitle</p><span class="font-style-button">Button</span><span class="font-style-button-big">Button Big</span><span class="font-style-lead">Lead</span><span class="font-style-input">Input</span><span class="font-style-input-big">Input Big</span><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.