• Default Theme

  • Night Mode Theme

  • RTL Version

  • Horizontal Version

Epic HR
avatar
Sara Hopkins

Webdeveloper

Statistics

$545

27%

Friends

Epic HR

Documentation

Mark all as read

  • 7 New Feedback Today

    It will give a smart finishing to your site

  • New User 10:45

    I feel great! Thanks team

  • Server Warning 10:50

    Your connection is not private

  • Issue Fixed 11:05

    WE have fix all Design bug with Responsive

  • 7 New Orders 11:35

    You received a new oder from Tina.
Mark all as read
Profile Settings 6 Inbox Message
Need help? Sign out

Typography

Text alignment

Easily realign text to components with text alignment classes.

Left aligned text on all viewport sizes.

Center aligned text on all viewport sizes.

Right aligned text on all viewport sizes.

Both aligned text on all viewport sizes. Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus.

<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-right">Right aligned text on all viewport sizes.</p>
<p class="text-justify">Both aligned text on all viewport sizes. Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus.</p>

Text transform

Transform text in components with text capitalization classes.

Lowercased text.

Uppercased text.

Capitalized text.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

Letter spacing

Utilities for controlling the tracking (letter spacing) of an element.

Lorem ipsum dolor sit amet. Tight letter spacing.

Lorem ipsum dolor sit amet. Normal letter spacing.

Lorem ipsum dolor sit amet. Wide letter spacing.

<p class="tracking-tight">Lorem ipsum dolor sit amet. Tight letter spacing.</p>
<p class="tracking-normal">Lorem ipsum dolor sit amet. Normal letter spacing.</p>
<p class="tracking-wide">Lorem ipsum dolor sit amet. Wide letter spacing.</p>

Line Height

Utilities for controlling the leading (line height) of an element.

Lorem ipsum dolor sit amet.
Dolor sit amet.

Lorem ipsum dolor sit amet.
Dolor sit amet.

Lorem ipsum dolor sit amet.
Dolor sit amet.

Lorem ipsum dolor sit amet.
Dolor sit amet.

<p class="leading-none">Lorem ipsum dolor sit amet.<br>Dolor sit amet.</p>
<p class="leading-tight">Lorem ipsum dolor sit amet.<br>Dolor sit amet.</p>
<p class="leading-normal">Lorem ipsum dolor sit amet.<br>Dolor sit amet.</p>
<p class="leading-loose">Lorem ipsum dolor sit amet.<br>Dolor sit amet.</p>

Basic elements

When you can’t use the CSS classes you want, or when you just want to directly use HTML tags, use .text-wrap as container. It can handle almost any HTML tag.

Hello World

Lorem ipsum[1] dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Subscript works as well!

Second level

Curabitur accumsan turpis pharetra augue tincidunt blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.

  • In fermentum leo eu lectus mollis, quis dictum mi aliquet.
  • Morbi eu nulla lobortis, lobortis est in, fringilla felis.
  • Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
  • Ut non enim metus.
<div class="text-wrap">
<h1>Hello World</h1>
<p>Lorem ipsum<sup><a>[1]</a></sup> dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Sub<sub>script</sub> works as well!</p>
<h2>Second level</h2>
<p>Curabitur accumsan turpis pharetra <strong>augue tincidunt</strong> blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.</p>
<ul>
    <li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
    <li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
    <li>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</li>
    <li>Ut non enim metus.</li>
</ul>
</div>