Typography

Documentation of headings, texts, list and all elements related to typography, including utility classes for text.

Files

app/styles/base/_typography.scss
app/styles/tools/_utilities.scss

Headings

There are four main headlines: h1-h5.

Note

In case that html tag mismatch style of headline, you can use classes .h1 - .h5.

Example:

Headline 1: Lorem ipsum

Headline 2: Lorem ipsum Dolore eiusmod.

Headline 3: Lorem ipsum Cupidatat irure dolor est.

Headline 4: Lorem ipsum In laborum consequat amet aute dolor.

Headline 5: Lorem ipsum Dolor quis adipisicing in in minim.
Code:
<h1>Headline 1...</h1>
<h2>Headline 2...</h2>
<h3>Headline 3...</h3>
<h4>Headline 4...</h4>
<h5>Headline 5...</h5>

Text

There are styles for default text, hero-text, description text and small text.

Example:

Hero text: Lorem ipsum Dolor quis adipisicing in in minim laborum adipisicing eu irure voluptate quis dolore sit cillum minim in adipisicing adipisicing occaecat laborum.

Body text: Lorem ipsum Ullamco voluptate veniam consectetur mollit adipisicing labore cupidatat ad in dolore consectetur culpa sit Duis cupidatat Duis laboris voluptate est nulla enim laboris sit sint deserunt ullamco in fugiat dolor ullamco esse id ut aliqua labore pariatur lcommodo consectetur reprehenderit minim consectetur incididunt adipisicing deserunt pariatur non eiusmod velit ut quis aliquip qui occaecat in ex in adipisicing sunt.

Description text: Lorem ipsum Sed dolor magna cillum aliquip adipisicing occaecat nisi veniam deserunt est magna qui consequat Ut enim commodo laboris reprehenderit eu nostrud et tempor velit.

Small text: Lorem ipsum Dolore veniam in ex ut culpa sunt incididunt aliquip et eu consectetur culpa quis elit anim magna enim dolor dolor officia occaecat sed tempor irure fugiat ullamco et laboris reprehenderit amet tempor sit nulla ut proident ex exercitation veniam.

Oh, nothing, Tommy. It's tip-top. It's just I'm not sure about the colour. Turkish
Code:
<p class="text-big">
  <strong>Hero text:</strong> Lorem ipsum...
</p>
<p>
  <strong>Body text:</strong> Lorem ipsum <a class="link">Ullamco voluptate</a> ...
  <em>aliqua labore</em> pariatur ...
</p>
<p class="text-desc">
  <strong>Description text:</strong> Lorem ipsum ...
</p>
<p class="text-small">
  <strong>Small text:</strong> Lorem ipsum ...
</p>

Lists

There styles for unordered, ordered and description lists and their inline variations.

Unordered list

Example:
  • Est dolor incididunt eiusmod.
  • Ad dolor ea aliquip officia.
    • Est dolor incididunt eiusmod.
    • Ad dolor ea aliquip officia.
  • Aliqua anim esse eu ex.
  • Est sit enim est.
  • Labore deserunt elit dolor commodo mollit.
Code:
<ul>
  <li>Est dolor incididunt eiusmod.</li>
  <li>Ad dolor ea aliquip officia.
    <ul>
      <li>...</li>
    </ul>
  </li>
  <li>...</li>
</ul>

Ordered list

Example:
  1. Est dolor incididunt eiusmod.
  2. Ad dolor ea aliquip officia.
    1. Est dolor incididunt eiusmod.
    2. Ad dolor ea aliquip officia.
  3. Aliqua anim esse eu ex.
  4. Est sit enim est.
  5. Labore deserunt elit dolor commodo mollit.
Code:
<ol>
  <li>Est dolor incididunt eiusmod.</li>
  <li>Ad dolor ea aliquip officia.
    <ol>
      <li>...</li>
    </ol>
  </li>
  <li>...</li>
</ol>

Custom lists

Example:
  • List no offset
  • Ad dolor
  • Aliqua anim
  • Est sit
  • List expanded
  • Ad dolor
  • Aliqua anim
  • Est sit
  • List unstyled
  • Ad dolor
  • Aliqua anim
  • Est sit
Code:
<!-- list no offset -->
<ul class="list--no-offset">
  <li><strong>List no offset</strong></li>
  <li>Ad dolor</li>
  <li>Aliqua anim</li>
  <li>Est sit</li>
</ul>

<!-- list expanded -->
<ul class="list--expanded">
  <li><strong>List expanded</strong></li>
  <li>Ad dolor</li>
  <li>Aliqua anim</li>
  <li>Est sit</li>
</ul>

<!-- list unstyled -->
<ul class="list--unstyled">
  <li><strong>List unstyled</strong></li>
  <li>Ad dolor</li>
  <li>Aliqua anim</li>
  <li>Est sit</li>
</ul>

Inline list

Example:
  • List inline
  • Ad dolor
  • Aliqua anim
  • Est sit
  • Labore deserunt
  • List inline expanded
  • Ad dolor
  • Aliqua anim
  • Est sit
  • Labore deserunt
  • List inline line
  • Ad dolor
  • Aliqua anim
  • Est sit
  • Labore deserunt
Code:
<ul class="list-inline">
  <li><strong>List inline</strong></li>
  <li>...</li>
</ul>

<ul class="list-inline list-inline--expanded">
  <li><strong>List inline expanded</strong></li>
  <li>...</li>
</ul>

<ul class="list-inline list-inline--line">
  <li><strong>List inline line</strong></li>
  <li>...r</li>
</ul>

Description list

Example:
Description list
Do dolor anim sit dolore ex.
Veniam ut amet
Non dolore in sed.
Eiusmod aute
Eu sed sint irure.
Description list inline
Do dolor anim sit dolore ex.
Veniam ut amet
Non dolore in sed.
Eiusmod aute
Eu sed sint irure.
Code:
<dl>
  <dt>Description list</dt>
  <dd>...</dd>
</dl>
<dl class="dl-inline">
  <dt>Description list inline</dt>
  <dd>...</dd>
</dl>

Utilities

Text utilities are covered in Utilites section.