TYPOGRAPHY

Grids

Heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique lectus convallis, rhoncus sapien vel, mattis orci. Aliquam et mollis ligula, ac facilisis libero. Phasellus sagittis metus in quam ornare, nec rhoncus nisl scelerisque. Curabitur consectetur in tortor in tempus. Sed at feugiat erat. Praesent imperdiet diam non eros sollicitudin, nec interdum ex tincidunt. Nunc et ligula sit amet mauris suscipit rhoncus viverra et felis.

Heading 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique lectus convallis, rhoncus sapien vel, mattis orci. Aliquam et mollis ligula, ac facilisis libero. Phasellus sagittis metus in quam ornare, nec rhoncus nisl scelerisque. Curabitur consectetur in tortor in tempus. Sed at feugiat erat. Praesent imperdiet diam non eros sollicitudin, nec interdum ex tincidunt. Nunc et ligula sit amet mauris suscipit rhoncus viverra et felis.

Heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique lectus convallis, rhoncus sapien vel, mattis orci. Aliquam et mollis ligula, ac facilisis libero. Phasellus sagittis metus in quam ornare, nec rhoncus nisl scelerisque. Curabitur consectetur in tortor in tempus. Sed at feugiat erat. Praesent imperdiet diam non eros sollicitudin, nec interdum ex tincidunt. Nunc et ligula sit amet mauris suscipit rhoncus viverra et felis.

Heading 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique lectus convallis, rhoncus sapien vel, mattis orci. Aliquam et mollis ligula, ac facilisis libero. Phasellus sagittis metus in quam ornare, nec rhoncus nisl scelerisque. Curabitur consectetur in tortor in tempus. Sed at feugiat erat. Praesent imperdiet diam non eros sollicitudin, nec interdum ex tincidunt. Nunc et ligula sit amet mauris suscipit rhoncus viverra et felis.

Heading 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique lectus convallis, rhoncus sapien vel, mattis orci. Aliquam et mollis ligula, ac facilisis libero. Phasellus sagittis metus in quam ornare, nec rhoncus nisl scelerisque. Curabitur consectetur in tortor in tempus. Sed at feugiat erat. Praesent imperdiet diam non eros sollicitudin, nec interdum ex tincidunt. Nunc et ligula sit amet mauris suscipit rhoncus viverra et felis.

Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique lectus convallis, rhoncus sapien vel, mattis orci. Aliquam et mollis ligula, ac facilisis libero. Phasellus sagittis metus in quam ornare, nec rhoncus nisl scelerisque. Curabitur consectetur in tortor in tempus. Sed at feugiat erat. Praesent imperdiet diam non eros sollicitudin, nec interdum ex tincidunt. Nunc et ligula sit amet mauris suscipit rhoncus viverra et felis.

<h1 class="top-title">TOP TITLE !</h1>

<h1 class="header-big header-title-green">HEADING</h1>

<p class="bottom-title">
	Bottom title
</p>

Heading - Background Dark

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique lectus convallis, rhoncus sapien vel, mattis orci. Aliquam et mollis ligula, ac facilisis libero. Phasellus sagittis metus in quam ornare, nec rhoncus nisl scelerisque. Curabitur consectetur in tortor in tempus. Sed at feugiat erat. Praesent imperdiet diam non eros sollicitudin, nec interdum ex tincidunt. Nunc et ligula sit amet mauris suscipit rhoncus viverra et felis.

Heading - Background Green

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique lectus convallis, rhoncus sapien vel, mattis orci. Aliquam et mollis ligula, ac facilisis libero. Phasellus sagittis metus in quam ornare, nec rhoncus nisl scelerisque. Curabitur consectetur in tortor in tempus. Sed at feugiat erat. Praesent imperdiet diam non eros sollicitudin, nec interdum ex tincidunt. Nunc et ligula sit amet mauris suscipit rhoncus viverra et felis.

Heading - Background Red

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique lectus convallis, rhoncus sapien vel, mattis orci. Aliquam et mollis ligula, ac facilisis libero. Phasellus sagittis metus in quam ornare, nec rhoncus nisl scelerisque. Curabitur consectetur in tortor in tempus. Sed at feugiat erat. Praesent imperdiet diam non eros sollicitudin, nec interdum ex tincidunt. Nunc et ligula sit amet mauris suscipit rhoncus viverra et felis.

Heading - Background Blue

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique lectus convallis, rhoncus sapien vel, mattis orci. Aliquam et mollis ligula, ac facilisis libero. Phasellus sagittis metus in quam ornare, nec rhoncus nisl scelerisque. Curabitur consectetur in tortor in tempus. Sed at feugiat erat. Praesent imperdiet diam non eros sollicitudin, nec interdum ex tincidunt. Nunc et ligula sit amet mauris suscipit rhoncus viverra et felis.

Heading - Background Orange

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique lectus convallis, rhoncus sapien vel, mattis orci. Aliquam et mollis ligula, ac facilisis libero. Phasellus sagittis metus in quam ornare, nec rhoncus nisl scelerisque. Curabitur consectetur in tortor in tempus. Sed at feugiat erat. Praesent imperdiet diam non eros sollicitudin, nec interdum ex tincidunt. Nunc et ligula sit amet mauris suscipit rhoncus viverra et felis.

<h3 class="header-bg-orange">Heading - Background Orange</h3>

Heading - Bottom Line Blue

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique lectus convallis, rhoncus sapien vel, mattis orci. Aliquam et mollis ligula, ac facilisis libero. Phasellus sagittis metus in quam ornare, nec rhoncus nisl scelerisque. Curabitur consectetur in tortor in tempus. Sed at feugiat erat. Praesent imperdiet diam non eros sollicitudin, nec interdum ex tincidunt. Nunc et ligula sit amet mauris suscipit rhoncus viverra et felis.

Heading - Bottom Line - Green

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique lectus convallis, rhoncus sapien vel, mattis orci. Aliquam et mollis ligula, ac facilisis libero. Phasellus sagittis metus in quam ornare, nec rhoncus nisl scelerisque. Curabitur consectetur in tortor in tempus. Sed at feugiat erat. Praesent imperdiet diam non eros sollicitudin, nec interdum ex tincidunt. Nunc et ligula sit amet mauris suscipit rhoncus viverra et felis.

Heading - Bottom Line - Red

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique lectus convallis, rhoncus sapien vel, mattis orci. Aliquam et mollis ligula, ac facilisis libero. Phasellus sagittis metus in quam ornare, nec rhoncus nisl scelerisque. Curabitur consectetur in tortor in tempus. Sed at feugiat erat. Praesent imperdiet diam non eros sollicitudin, nec interdum ex tincidunt. Nunc et ligula sit amet mauris suscipit rhoncus viverra et felis.

Heading - Bottom Line Blue - Center

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique lectus convallis, rhoncus sapien vel, mattis orci. Aliquam et mollis ligula, ac facilisis libero. Phasellus sagittis metus in quam ornare, nec rhoncus nisl scelerisque. Curabitur consectetur in tortor in tempus. Sed at feugiat erat. Praesent imperdiet diam non eros sollicitudin, nec interdum ex tincidunt. Nunc et ligula sit amet mauris suscipit rhoncus viverra et felis.

Heading - Bottom Line Green - Center

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique lectus convallis, rhoncus sapien vel, mattis orci. Aliquam et mollis ligula, ac facilisis libero. Phasellus sagittis metus in quam ornare, nec rhoncus nisl scelerisque. Curabitur consectetur in tortor in tempus. Sed at feugiat erat. Praesent imperdiet diam non eros sollicitudin, nec interdum ex tincidunt. Nunc et ligula sit amet mauris suscipit rhoncus viverra et felis.

Heading - Bottom Line Red - Center

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique lectus convallis, rhoncus sapien vel, mattis orci. Aliquam et mollis ligula, ac facilisis libero. Phasellus sagittis metus in quam ornare, nec rhoncus nisl scelerisque. Curabitur consectetur in tortor in tempus. Sed at feugiat erat. Praesent imperdiet diam non eros sollicitudin, nec interdum ex tincidunt. Nunc et ligula sit amet mauris suscipit rhoncus viverra et felis.

Heading - Bottom Line Blue - Right

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique lectus convallis, rhoncus sapien vel, mattis orci. Aliquam et mollis ligula, ac facilisis libero. Phasellus sagittis metus in quam ornare, nec rhoncus nisl scelerisque. Curabitur consectetur in tortor in tempus. Sed at feugiat erat. Praesent imperdiet diam non eros sollicitudin, nec interdum ex tincidunt. Nunc et ligula sit amet mauris suscipit rhoncus viverra et felis.

Heading - Bottom Line Green - Right

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique lectus convallis, rhoncus sapien vel, mattis orci. Aliquam et mollis ligula, ac facilisis libero. Phasellus sagittis metus in quam ornare, nec rhoncus nisl scelerisque. Curabitur consectetur in tortor in tempus. Sed at feugiat erat. Praesent imperdiet diam non eros sollicitudin, nec interdum ex tincidunt. Nunc et ligula sit amet mauris suscipit rhoncus viverra et felis.

Heading - Bottom Line Red - Right

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique lectus convallis, rhoncus sapien vel, mattis orci. Aliquam et mollis ligula, ac facilisis libero. Phasellus sagittis metus in quam ornare, nec rhoncus nisl scelerisque. Curabitur consectetur in tortor in tempus. Sed at feugiat erat. Praesent imperdiet diam non eros sollicitudin, nec interdum ex tincidunt. Nunc et ligula sit amet mauris suscipit rhoncus viverra et felis.

<h3 class="header-title-center">Heading - Bottom Line Blue - Center</h3>

<h3 class="header-title-green-right">Heading - Bottom Line Green - Right</h3>

<h3 class="header-title-red-center">Heading - Bottom Line Red - Center</h3>

BUTTON STYLES

Button XS

Button SM

Button MD

Button LG

Button XL

Transparent Button XS

Transparent Button SM

Transparent Button MD

Transparent Button LG

Transparent Button XL

<span class="btn1 btn1-md btn1-blue">Blue Button</span>

<span class="btn1 btn1-md btn1-blue-no-bg">Blue Button</span>

BLOCKQUOTE STYLES

<blockquote class="blockquote-blue">
    <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
       Integer posuere erat a ante.
    </p>
</blockquote>

<blockquote class="blockquote-dark bg-gray">
   <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Integer posuere erat a ante.
   </p>
   <footer>
      Someone famous in 
      <cite title="Source Title">Source Title</cite>
   </footer>
</blockquote>

LIST STYLES

<ul class="list list-orange list-caret">
   <li>...</li>
   <li>...</li>
   <li>...</li>
</ul>

TEXT STYLES

Text Dark

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique lectus convallis, rhoncus sapien vel, mattis orci. Aliquam et mollis ligula, ac facilisis libero. Phasellus sagittis metus in quam ornare, nec rhoncus nisl scelerisque.

Text Green

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique lectus convallis, rhoncus sapien vel, mattis orci. Aliquam et mollis ligula, ac facilisis libero. Phasellus sagittis metus in quam ornare, nec rhoncus nisl scelerisque.

Text Blue

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique lectus convallis, rhoncus sapien vel, mattis orci. Aliquam et mollis ligula, ac facilisis libero. Phasellus sagittis metus in quam ornare, nec rhoncus nisl scelerisque.

Text Red

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique lectus convallis, rhoncus sapien vel, mattis orci. Aliquam et mollis ligula, ac facilisis libero. Phasellus sagittis metus in quam ornare, nec rhoncus nisl scelerisque.

Text Orange

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique lectus convallis, rhoncus sapien vel, mattis orci. Aliquam et mollis ligula, ac facilisis libero. Phasellus sagittis metus in quam ornare, nec rhoncus nisl scelerisque.

TEXT SIZES

Text XXS

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique lectus convallis, rhoncus sapien vel, mattis orci. Aliquam et mollis ligula, ac facilisis libero. Phasellus sagittis metus in quam ornare, nec rhoncus nisl scelerisque.

Text XS

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique lectus convallis, rhoncus sapien vel, mattis orci. Aliquam et mollis ligula, ac facilisis libero. Phasellus sagittis metus in quam ornare, nec rhoncus nisl scelerisque.

Text SM

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique lectus convallis, rhoncus sapien vel, mattis orci. Aliquam et mollis ligula, ac facilisis libero. Phasellus sagittis metus in quam ornare, nec rhoncus nisl scelerisque.

Text MD

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique lectus convallis, rhoncus sapien vel, mattis orci. Aliquam et mollis ligula, ac facilisis libero. Phasellus sagittis metus in quam ornare, nec rhoncus nisl scelerisque.

Text LG

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique lectus convallis, rhoncus sapien vel, mattis orci. Aliquam et mollis ligula, ac facilisis libero. Phasellus sagittis metus in quam ornare, nec rhoncus nisl scelerisque.

Text XL

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique lectus convallis, rhoncus sapien vel, mattis orci. Aliquam et mollis ligula, ac facilisis libero. Phasellus sagittis metus in quam ornare, nec rhoncus nisl scelerisque.

Text XXL

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique lectus convallis, rhoncus sapien vel, mattis orci. Aliquam et mollis ligula, ac facilisis libero. Phasellus sagittis metus in quam ornare, nec rhoncus nisl scelerisque.

<p class="text-md text-red">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit.
     Nullam tristique lectus convallis.
</p>

PROGRESS BARS

progress-bar-info

progress-bar-success

progress-bar-warning

progress-bar-danger

Example :

<div class="progress">
      <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 
      style="width: 60%">60%</div>
</div>