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 four main headlines: h1-h4, and four additional subheadlines suhh1-suhb4.

Note

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

Example:code

Headline 1: Lorem ipsum

Subheadline 1: Lorem ipsum Irure esse reprehenderit dolor deserunt adipisicing elit esse voluptate in proident ut ad incididunt Duis nostrud enim qui labore id.

Headline 2: Lorem ipsum Dolore eiusmod.

Subheadline 2: Lorem ipsum Nulla sunt commodo qui mollit tempor sunt in Excepteur sint in dolor non laboris velit exercitation reprehenderit commodo velit.

Headline 3: Lorem ipsum Cupidatat irure dolor est.

Subheadline 3: Lorem ipsum Ad in deserunt veniam aliqua id cillum ex nostrud incididunt ad sint consequat cupidatat ea consequat in sint cupidatat labore.

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

Subheadline 4: Lorem ipsum Sit ut magna qui ex sit est anim sunt deserunt laborum ut nostrud laboris ad commodo aute.

Code: 
<h1>Headline 1...</h1>
<p class="subh1">Subheadline 1...</p>
<h2>Headline 2...</h2>
<p class="subh2">Subheadline 2...</p>
<h3>Headline 3...</h3>
<p class="subh3">Subheadline 3...</p>
<h4>Headline 4...</h4>
<p class="subh4">Subheadline 4...</p>

Text

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

Example:code

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.

Code: 
<p class="text-big">
  <strong>Hero text:</strong> Lorem ipsum...
</p>
<p>
  <strong>Body text:</strong> Lorem ipsum <a>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: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.

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>

Text colors

Example:code
  • orange
  • orange-400
  • orange-100
  • black
  • semiblack
  • grey
  • grey-800
  • white
  • semiwhite
  • error
Code: 
<ul>
  <li><span class="text-color-orange">orange</span></li>
  <li><span class="text-color-orange-400">orange-400</span></li>
  <li><span class="text-color-orange-100">orange-100</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-grey">grey</span></li>
  <li><span class="text-color-grey-800">grey-800</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-error">error</span></li>
</ul>