Typography

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

Files

app/styles/base/_typography.scss

Headings

There are basic h1-h4 headlines.

Note

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

Example:code

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.

Code: 
<h1>Headline 1...</h1>
<h2>Headline 2...</h2>
<h3>Headline 3...</h3>
<h4>Headline 4...</h4>

Text

There are styles for default text, and small text and big text.

Example:code

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.

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.

Medium 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.

Big 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.

Text note: fugiat deserunt culpa Duis aliqua.

Code: 
<p>
  <strong>Body text:</strong> Lorem ipsum <a>Ullamco voluptate</a> ...
</p>

<p class="text-small">
  <strong>Small text:</strong> Lorem ipsum ...
</p>

<p class="text-medium">
  <strong>Medium text:</strong> Lorem ipsum ...
</p>

<p class="text-big">
  <strong>Big text:</strong> Lorem ipsum ...
</p>

<p class="text-note">
  Text note: ...
</p>

Lists

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

Unordered list

Example:code
  • 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:code
  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>

Inline list

Example:code
  • List inline
  • Ad dolor
  • Aliqua anim
  • Est sit
  • Labore deserunt
  • List inline expanded
  • 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>

Description list

Example:code
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 utility classes provides basic functionality such as alignment or text transform. There are also utility classes for text colors.

Example:code

text left

text center

text right

text upper
text bold
text normal

Text ellipsis ea dolor ea exercitation et esse incididunt ut Excepteur officia Ut sint cupidatat cupidatat nostrud veniam id nisi ut proident proident culpa consectetur occaecat velit ullamco in sunt sint deserunt adipisicing.

Text will not wrap ea dolor ea exercitation et esse incididunt ut Excepteur officia Ut sint cupidatat cupidatat nostrud veniam id nisi ut proident proident culpa consectetur occaecat velit ullamco in sunt sint deserunt adipisicing.

I'm clickable

text on the left is hidden!

Code: 
<p class="text-left">text left </p>
<p class="text-center">text center</p>
<p class="text-right">text right</p>

<p>
  <span class="text-upper">text upper</span><br>
  <span class="text-bold">text bold</span><br>
  <span class="text-normal">text normal</span>
</p>

<p class="text-ellipsis">...</p>

<p class="text-nowrap">...</p>

<span class="clickable">...</span>

<span class="visually-hidden">...</span>

Text colors

Example:code
  • theme
  • gray-400
  • black
  • semiblack
  • white
  • semiwhite
  • green
  • red
  • orange
Code: 
<ul>
  <li><span class="text-color-theme">theme</span></li>
  <li><span class="text-color-gray-400">gray-400</span></li>
  <li><span class="text-color-black">black</span></li>
  <li><span class="text-color-semiblack">semiblack</span></li>
  <li><span class="text-color-white">white</span></li>
  <li><span class="text-color-semiwhite">semiwhite</span></li>
  <li><span class="text-color-green">green</span></li>
  <li><span class="text-color-red">red</span></li>
  <li><span class="text-color-orange">orange</span></li>
</ul>