Components
Typography
Our typographic scale is held across variables within sky-toolkit-core, with classes available for use in sky-toolkit-ui.
Classes are semantic and decoupled from element styling; preventing misuse of HTML and providing greater control on the sizing of text elements.
🔗Typographic Scale
Whilst pixel values are provided for designers, developers should use the classes specified below for an automatic responsive typographic scale.
Heading Alpha
Desktop: 50px, Mobile: 36px
Heading Bravo
Desktop: 40px, Mobile: 29px
Heading Charlie
Desktop: 34px, Mobile: 25px
Heading Delta
Desktop: 28px, Mobile: 20px
Text Lead
Desktop: 22px, Mobile: 18px
Text Body
Desktop: 18px, Mobile: 16px
Text Smallprint
Desktop: 12px, Mobile: 12px
<h1 class="c-heading-alpha">Heading Alpha</h1>
<h2 class="c-heading-bravo">Heading Bravo</h2>
<h3 class="c-heading-charlie">Heading Charlie</h3>
<h4 class="c-heading-delta">Heading Delta</h4>
<p class="c-text-lead">Text Lead</p>
<p class="c-text-body">Text Body</p>
<p class="c-text-smallprint">Text Smallprint</p>