Typography Style
Heading style
Heading 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer adipiscing erat eget risus sollicitudin pellentesque et non erat. Maecenas nibh dolor, malesuada et bibendum a, sagittis accumsan ipsum.
<div class="col-md-6 margin-60px-bottom xs-margin-30px-bottom">
<h1 class="text-uppercase font-size36 font-weight-600">Heading 1</h1>
<p class="no-margin-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer adipiscing erat eget risus sollicitudin pellentesque et non erat. Maecenas nibh dolor, malesuada et bibendum a, sagittis accumsan ipsum.</p>
</div>
Heading 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer adipiscing erat eget risus sollicitudin pellentesque et non erat. Maecenas nibh dolor, malesuada et bibendum a, sagittis accumsan ipsum.
<div class="col-md-6 margin-60px-bottom xs-margin-30px-bottom">
<h2 class="text-uppercase font-size30 font-weight-600">Heading 2</h2>
<p class="no-margin-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer adipiscing erat eget risus sollicitudin pellentesque et non erat. Maecenas nibh dolor, malesuada et bibendum a, sagittis accumsan ipsum.</p>
</div>
Heading 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer adipiscing erat eget risus sollicitudin pellentesque et non erat. Maecenas nibh dolor, malesuada et bibendum a, sagittis accumsan ipsum.
<div class="col-md-6 margin-60px-bottom xs-margin-30px-bottom">
<h3 class="text-uppercase font-size24 font-weight-600">Heading 3</h3>
<p class="no-margin-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer adipiscing erat eget risus sollicitudin pellentesque et non erat. Maecenas nibh dolor, malesuada et bibendum a, sagittis accumsan ipsum.</p>
</div>
Heading 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer adipiscing erat eget risus sollicitudin pellentesque et non erat. Maecenas nibh dolor, malesuada et bibendum a, sagittis accumsan ipsum.
<div class="col-md-6 margin-60px-bottom xs-margin-30px-bottom">
<h4 class="text-uppercase font-size18 font-weight-600">Heading 4</h4>
<p class="no-margin-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer adipiscing erat eget risus sollicitudin pellentesque et non erat. Maecenas nibh dolor, malesuada et bibendum a, sagittis accumsan ipsum.</p>
</div>
Heading 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer adipiscing erat eget risus sollicitudin pellentesque et non erat. Maecenas nibh dolor, malesuada et bibendum a, sagittis accumsan ipsum.
<div class="col-md-6 margin-60px-bottom xs-margin-30px-bottom">
<h5 class="text-uppercase font-size14 font-weight-600">Heading 5</h5>
<p class="no-margin-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer adipiscing erat eget risus sollicitudin pellentesque et non erat. Maecenas nibh dolor, malesuada et bibendum a, sagittis accumsan ipsum.</p>
</div>
Heading 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer adipiscing erat eget risus sollicitudin pellentesque et non erat. Maecenas nibh dolor, malesuada et bibendum a, sagittis accumsan ipsum.
<div class="col-md-6 margin-60px-bottom xs-margin-30px-bottom">
<h6 class="text-uppercase font-size12 font-weight-600">Heading 6</h6>
<p class="no-margin-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer adipiscing erat eget risus sollicitudin pellentesque et non erat. Maecenas nibh dolor, malesuada et bibendum a, sagittis accumsan ipsum.</p>
</div>
Text alignment style
Left aligned text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer adipiscing erat eget risus sollicitudin pellentesque et non erat. Maecenas nibh dolor, malesuada et bibendum a, sagittis accumsan ipsum.
<div class="col-md-6 margin-60px-bottom xs-margin-30px-bottom">
<h5>Left aligned text</h5>
<p class="text-left no-margin-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer adipiscing erat eget risus sollicitudin pellentesque et non erat. Maecenas nibh dolor, malesuada et bibendum a, sagittis accumsan ipsum.</p>
</div>
Right aligned text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer adipiscing erat eget risus sollicitudin pellentesque et non erat. Maecenas nibh dolor, malesuada et bibendum a, sagittis accumsan ipsum.
<div class="col-md-6 margin-60px-bottom xs-margin-30px-bottom">
<h5>Right aligned text</h5>
<p class="text-right no-margin-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer adipiscing erat eget risus sollicitudin pellentesque et non erat. Maecenas nibh dolor, malesuada et bibendum a, sagittis accumsan ipsum.</p>
</div>
Center aligned text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer adipiscing erat eget risus sollicitudin pellentesque et non erat. Maecenas nibh dolor, malesuada et bibendum a, sagittis accumsan ipsum.
<div class="col-md-6 margin-60px-bottom xs-margin-30px-bottom">
<h5>Center aligned text</h5>
<p class="text-center no-margin-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer adipiscing erat eget risus sollicitudin pellentesque et non erat. Maecenas nibh dolor, malesuada et bibendum a, sagittis accumsan ipsum.</p>
</div>
Justify text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer adipiscing erat eget risus sollicitudin pellentesque et non erat. Maecenas nibh dolor, malesuada et bibendum a, sagittis accumsan ipsum sagittis accumsan ipsum.
<div class="col-md-6 margin-60px-bottom xs-margin-30px-bottom">
<h5>Justify text</h5>
<p class="text-justify no-margin-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer adipiscing erat eget risus sollicitudin pellentesque et non erat. Maecenas nibh dolor, malesuada et bibendum a, sagittis accumsan ipsum sagittis accumsan ipsum.</p>
</div>
Text highlight style
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer adipiscing erat eget risus sollicitudin pellentesque et non erat. Maecenas nibh dolor, malesuada et bibendum a, sagittis accumsan ipsum.
<div class="col-md-6 margin-60px-bottom xs-margin-30px-bottom position-relative box-hover">
<p class="no-margin-bottom"><span class="bg-theme text-white">Lorem ipsum</span> dolor sit amet, consectetur adipiscing elit. Integer adipiscing erat eget risus sollicitudin pellentesque et non erat. Maecenas nibh dolor, malesuada et bibendum a, sagittis accumsan ipsum.</p>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer adipiscing erat eget risus sollicitudin pellentesque et non erat. Maecenas nibh dolor, malesuada et bibendum a, sagittis accumsan ipsum.
<div class="col-md-6 margin-60px-bottom xs-margin-30px-bottom">
<p class="no-margin-bottom"><span class="text-theme-color font-weight-600">Lorem ipsum</span> dolor sit amet, consectetur adipiscing elit. Integer adipiscing erat eget risus sollicitudin pellentesque et non erat. Maecenas nibh dolor, malesuada et bibendum a, sagittis accumsan ipsum.</p>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer adipiscing erat eget risus sollicitudin pellentesque et non erat. Maecenas nibh dolor, malesuada et bibendum a, sagittis accumsan ipsum.
<div class="col-md-6 xs-margin-30px-bottom">
<p class="no-margin-bottom"><span class="bg-black text-white">Lorem ipsum</span> dolor sit amet, consectetur adipiscing elit. Integer adipiscing erat eget risus sollicitudin pellentesque et non erat. Maecenas nibh dolor, malesuada et bibendum a, sagittis accumsan ipsum.</p>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer adipiscing erat eget risus sollicitudin pellentesque et non erat. Maecenas nibh dolor, malesuada et bibendum a, sagittis accumsan ipsum sagittis accumsan ipsum.
<div class="col-md-6">
<p class="no-margin-bottom"><span class="text-uppercase border-bottom border-width-2">Lorem ipsum</span> dolor sit amet, consectetur adipiscing elit. Integer adipiscing erat eget risus sollicitudin pellentesque et non erat. Maecenas nibh dolor, malesuada et bibendum a, sagittis accumsan ipsum sagittis accumsan ipsum.</p>
</div>