Component

Typography and text components

TITLES


Examples


THE COMPANY PRESENTATION TEXT

Lorem Ipsum is simply dummy text of the printing.


THE COMPANY PRESENTATION TEXT

Lorem Ipsum is simply dummy text of the printing.

THE COMPANY PRESENTATION TEXT


Lorem Ipsum is simply dummy text of the printing.

THE COMPANY PRESENTATION TEXT

Lorem Ipsum is simply dummy text of the printing.

THE COMPANY PRESENTATION TEXT

Lorem Ipsum is simply dummy text of the printing.

THE COMPANY PRESENTATION TEXT


Great from any side

THE COMPANY PRESENTATION TEXT


Great from any side


Usage

<div class="title-base" data-anima="show-scale" data-trigger="hover">
    <hr class="anima" />
    <h1>THE COMPANY PRESENTATION 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>THE COMPANY PRESENTATION 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>THE COMPANY PRESENTATION 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>THE COMPANY PRESENTATION 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>THE COMPANY PRESENTATION 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>THE COMPANY PRESENTATION 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>THE COMPANY PRESENTATION TEXT</h3>
    <hr>
    <p>Great from any side</p>
</div>

DROP CAPS


Examples

Wallamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis eaqueipsa quae ab illo inventore iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaqueipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Wallamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaqueipsa quae ab illo inventore veritatis et quasi architecto.
Wallamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaqueipsa quae ab illo inventore veritatis et quasi architecto.

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. JASON SANTA MARIA


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">JASON SANTA MARIA</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" />