Typography style

Home
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.

Copy

copy


<div class="col-md-6 mb-1-9 mb-lg-6 position-relative box-hover">
    <h1 class="text-uppercase font-weight-600">Heading 1</h1>
    <p class="mb-0">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

Copy

copy


<div class="col-md-6 mb-1-9 mb-lg-6">
    <h2 class="text-uppercase font-size30 font-weight-600">Heading 2</h2>
    <p class="mb-0">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

Copy

copy


<div class="col-md-6 mb-1-9 mb-lg-6">
    <h3 class="text-uppercase font-size24 font-weight-600">Heading 3</h3>
    <p class="mb-0">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

Copy

copy


<div class="col-md-6 mb-1-9 mb-lg-6">
    <h4 class="text-uppercase font-size18 font-weight-600">Heading 4</h4>
    <p class="mb-0">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

Copy

copy


<div class="col-md-6 mb-1-9 mb-lg-6">
    <h5 class="text-uppercase font-size14 font-weight-600">Heading 5</h5>
    <p class="mb-0">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

Copy

copy


<div class="col-md-6 mb-1-9 mb-lg-6">
    <h6 class="text-uppercase font-size12 font-weight-600">Heading 6</h6>
    <p class="mb-0">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

Copy

copy


<div class="col-md-6 mb-1-9 mb-lg-6">
    <h5>Left aligned text</h5>
    <p class="text-start mb-0">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

Copy

copy


<div class="col-md-6 mb-1-9 mb-lg-6">
    <h5>Right aligned text</h5>
    <p class="text-end mb-0">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

Copy

copy


<div class="col-md-6 mb-1-9 mb-lg-6">
    <h5>Center aligned text</h5>
    <p class="text-center mb-0">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

Copy

copy


<div class="col-md-6 mb-1-9 mb-lg-6">
    <h5>Justify text</h5>
    <p class="text-justify mb-0">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

Copy

copy


<div class="col-md-6 mb-1-9 mb-lg-6 position-relative box-hover">
    <p class="mb-0"><span class="bg-primary 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>

Copy

copy


<div class="col-md-6 mb-1-9 mb-lg-6">
    <p class="mb-0"><span class="text-primary 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>

Copy

copy


<div class="col-md-6 xs-margin-30px-bottom">
    <p class="mb-0"><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>

Copy

copy


<div class="col-md-6">
    <p class="mb-0"><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>

Heading Style

h1. heading

h2. heading

h3. heading

h4. heading

h5. heading

h6. heading

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

Copy

copy


<div class="row">
    <div class="col-md-6 mb-1-9 mb-md-0">
        <p class="h1">h1. heading</p>
        <p class="h2">h2. heading</p>
        <p class="h3">h3. heading</p>
        <p class="h4">h4. heading</p>
        <p class="h5">h5. heading</p>
        <p class="h6 mb-0">h6. heading</p>
    </div>
    <div class="col-md-6">
        <h1 class="display-1">Display 1</h1>
        <h1 class="display-2">Display 2</h1>
        <h1 class="display-3">Display 3</h1>
        <h1 class="display-4">Display 4</h1>
        <h1 class="display-5">Display 5</h1>
        <h1 class="display-6 mb-0">Display 6</h1>
    </div>
</div>

Text Elements

You can use the mark tag to highlight text.

~~This line of text is meant to be treated as deleted text.~~

~~This line of text is meant to be treated as no longer accurate.~~

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined.

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

Copy

copy


<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined.</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p class="mb-0"><em>This line rendered as italicized text.</em></p>

Typography style

Heading style

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Text alignment style

Left aligned text

Right aligned text

Center aligned text

Justify text

Text highlight style

Heading Style

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

Text Elements

Trend Design

Documentation

Fast Support