Typography

Typography and text components documentation

  1. Home
  2. Components
  3. Typography

TITLES

Examples

Title component text

Lorem ipsum is simply dummy

Title component text

Lorem Ipsum is simply dummy

Title component text

Lorem Ipsum is simply dummy

Title component text

Lorem Ipsum is simply dummy

Title component text

Lorem Ipsum is simply dummy text of the printing

Title component text

Great from any side

Title component text

Great from any side

Usage

<div class="title-base" data-anima="show-scale" data-trigger="hover">
    <hr class="anima" />
    <h1>Title component text</h1>
    <p>Lorem Ipsum is simply dummy text of the printing.</p>
</div>

<div class="title-base text-left" data-anima="show-scale" data-trigger="hover">
    <hr class="anima" />
    <h1>Title component text</h1>
    <p>Lorem Ipsum is simply dummy text of the printing.</p>
    <i class="fa fa-angle-up scroll-top"></i>
</div>

<div class="title-base title-small" data-anima="show-scale" data-trigger="hover">
    <h2>Title component text</h2>
    <hr class="anima" />
    <p>Lorem Ipsum is simply dummy text of the printing.</p>
    <i class="fa fa-angle-up scroll-top"></i>
</div>

<div class="title-icon">
    <h2>Title component text</h2>
    <p>Lorem Ipsum is simply dummy text of the printing.</p>
    <i class="fa fa-trophy"></i>
</div>

<div class="title-icon title-icon-bg">
    <h2>Title component text</h2>
    <p>Lorem Ipsum is simply dummy text of the printing.</p>
    <i class="fa fa-headphones"></i>
</div>

<div class="title-modern st-icon text-left">
    <h3>Title component text</h3>
    <hr>
    <p>Great from any side</p>
    <i class="fa fa-angle-up scroll-top"></i>
</div>

<div class="title-modern title-modern-2 st-icon text-center">
    <h3>Title component text</h3>
    <hr>
    <p>Great from any side</p>
</div>

Drop caps

Examples

Wallamco laboris nisi ut aliquip ex ea cooed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaqueipsa quae ab illo inventore veritatis et quasi architecto pertossio. ea cooed ut perspiciatis unde omnis iste nostalgia parto.
Wallamco laboris nisi ut aliquip ex ea cooed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaqueipsa quae ab illo inventore veritatis et quasi architecto pertossio.
Wallamco laboris nisi ut aliquip ex ea cooed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaqueipsa quae ab illo inventore veritatis et quasi architecto pertossio.

Usage

<!-- EXAMPLE 1 -->
<i class="dropcap">W</i>allamco laboris ...
<!-- EXAMPLE 2 -->
<i class="dropcap text-xl circle">W</i>allamco laboris ...
<!-- EXAMPLE 3 -->
<i class="dropcap circle text-xl onlycover" style="background-image: url(../../images/default-bg-2w.jpg);">W</i>allamco laboris ...

Block quotes

Examples

It is better to lead from behind and to put others in front, especially when you celebrate victory when nice things occur. You take the front line when there is danger. Then people will appreciate your leadership.

It is better to lead from behind and to put others in front, especially when you celebrate victory when nice things occur. You take the front line when there is danger. Then people will appreciate your leadership. Alan Martin

Usage

<!-- EXAMPLE 1 -->
<p class="block-quote quote-1">
    It is better to lead from behind and to put others in front,
    especially when you celebrate victory when nice things occur.
    You take the front line when there is danger. Then people will appreciate your leadership.
</p>
<!-- EXAMPLE 2 -->
<p class="block-quote quote-2">
    It is better to lead from behind and to put others in front,
    especially when you celebrate victory when nice things occur.
    You take the front line when there is danger. Then people will appreciate your leadership.
    <span class="quote-author">Alan Martin</span>
</p>

Separators

Examples

Example 1
Example 2
Example 3
Example 4
Example 5
Example 6
Example 7
Example 8
Example 9
Example 10
Example 11
Example 12
Example 13
Example 14

Usage

<!-- EXAMPLE 1 -->
<hr />
<!-- EXAMPLE 2 -->
<hr class="a" />
<!-- EXAMPLE 3 -->
<hr class="b" />
<!-- EXAMPLE 4 -->
<hr class="c" />
<!-- EXAMPLE 5 -->
<hr class="d" />
<!-- EXAMPLE 6 -->
<hr class="d-dark" />
<!-- EXAMPLE 7 -->
<hr class="e" />
<!-- EXAMPLE 8 -->
<hr class="f-top" />
<!-- EXAMPLE 9 -->
<hr class="f" />
<!-- EXAMPLE 10 -->
<hr class="f-top f-dark" />
<!-- EXAMPLE 11 -->
<hr class="f f-dark" />
<!-- EXAMPLE 12 -->
<hr class="g" />
<!-- EXAMPLE 13 -->
<hr class="h" />
<!-- EXAMPLE 14 -->
<hr class="i" />