Typography

Typography and text components documentation

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" />