choose your way

Orem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Typography

Text Styles Get Code

Fonts: Open Sans, Lora

                  
<h1>Heading 1</h1>
<h1 class="page-title">Heading 1 (alt)</h1>
<h2>Heading 2</h2>
<h2 class="page-title">Heading 2 (alt)</h2>
<h3>Heading 3</h3>
<p>text</p>
<p><i>text</i></p>
  • 30px

    Heading 1

  • 50px

    Heading 1 (alt)

  • 25px

    Heading 2

  • 50px

    Heading 2 (alt)

  • 20px

    Heading 3

  • 16px

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui

Paragraphs Get Code


<h3>lorem ipsum</h3>
<p>Sed ut <a href="#">perspiciatis</a> unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. </p>
<h1>Lorem ipsum is dolor</h1>
<p>Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla nunc dui, tristique in semper vel, congue sed ligula. Nam dolor ligula, faucibus id sodales in, auctor fringilla libero. Pellentesque pellentesque tempor tellus eget hendrerit. Morbi id aliquam ligula. Aliquam id dui sem. Proin rhoncus consequat nisl, eu ornare mauris tincidunt vitae. Nulla nunc dui, tristique in semper vel, congue sed ligula. Nam dolor ligula, faucibus id sodales in, auctor fringilla libero. Pellentesque pellentesque tempor tellus eget hendrerit. Vestibulum sodales ante a purus volutpat euismod. Proin sodales quam nec ante sollicitudin lacinia.</p>
<blockquote>
 <q>Proin dictum lobortis justo at pretium. Nunc malesuada ante sit amet purus ornare pulvinar. Donec suscipit dignissim ipsum at euismod. Curabitur malesuada lorem sed metus adipiscing in vehicula quam commodo. Sed porttitor elementum elementum. Proin eu ligula eget leo consectetur sodales et non mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</q>
 </blockquote>

lorem ipsum

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Lorem ipsum is dolor

Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla nunc dui, tristique in semper vel, congue sed ligula. Nam dolor ligula, faucibus id sodales in, auctor fringilla libero. Pellentesque pellentesque tempor tellus eget hendrerit. Morbi id aliquam ligula. Aliquam id dui sem. Proin rhoncus consequat nisl, eu ornare mauris tincidunt vitae. Nulla nunc dui, tristique in semper vel, congue sed ligula. Nam dolor ligula, faucibus id sodales in, auctor fringilla libero. Pellentesque pellentesque tempor tellus eget hendrerit. Vestibulum sodales ante a purus volutpat euismod. Proin sodales quam nec ante sollicitudin lacinia.

Proin dictum lobortis justo at pretium. Nunc malesuada ante sit amet purus ornare pulvinar. Donec suscipit dignissim ipsum at euismod. Curabitur malesuada lorem sed metus adipiscing in vehicula quam commodo. Sed porttitor elementum elementum. Proin eu ligula eget leo consectetur sodales et non mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Autor

Text Elements

List Get Code


<ul>
  <li>Vestibulum sodales ante a purus volutpat euismod. Proin sodales quam nec ante sollicitudin </li>
  <li>Sodales ante a purus volutpat euismod. Proin sodales quam nec ante sollicitudin</li>
  <li>Nunc tincidunt, elit non cursus euismod, lacus augue ornare metus, egestas imperdiet.</li>
</ul>
  • Vestibulum sodales ante a purus volutpat euismod. Proin sodales quam nec ante sollicitudin
  • Sodales ante a purus volutpat euismod. Proin sodales quam nec ante sollicitudin
  • Nunc tincidunt, elit non cursus euismod, lacus augue ornare metus, egestas imperdiet.

Check List Get Code


<ul class="custom-list" >
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In finibus rhoncus tempus. Vivamus venenatis arcu vel sem placerat facilisis. </li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In finibus rhoncus tempus. Vivamus venenatis arcu vel sem placerat facilisis.</li>
</ul>
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. In finibus rhoncus tempus. Vivamus venenatis arcu vel sem placerat facilisis.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. In finibus rhoncus tempus. Vivamus venenatis arcu vel sem placerat facilisis.

Accordion Get Code


<ul class="accordion">
  <li>
    <a href="#" class="opener">Quisque ligulas #1</a>
    <div class="slide">
      <div class="frame">
        <p>Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra. Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra. Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra.</p>
      </div>
    </div>
  </li>
  <li class="active">
    <a class="opener" href="#">Quisque ligulas #2</a>
    <div class="slide">
      <div class="frame">
        <p>Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra. Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra. Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra.</p>
      </div>
    </div>
  </li>
  <li>
    <a class="opener" href="#">Quisque ligulas #3</a>
    <div class="slide">
      <div class="frame">
        <p>Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra. Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra. Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra.</p>
      </div>
    </div>
  </li>
  <li>
    <a class="opener" href="#">Quisque ligulas #4</a>
    <div class="slide">
      <div class="frame">
        <p>Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra. Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra. Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra.</p>
      </div>
    </div>
  </li>
</ul>
  • Quisque ligulas #1

    Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra. Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra. Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra.

  • Quisque ligulas #2

    Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra. Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra. Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra.

  • Quisque ligulas #3

    Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra. Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra. Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra.

  • Quisque ligulas #4

    Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra. Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra. Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra.

Magellan Get Code


 <ul class="anchor-nav">
  <li><a href="#section-1">First Section</a></li>
  <li><a href="#section-2">Second Section</a></li>
  <li><a href="#section-3">Third Section</a></li>
</ul>
<section id="section-1">
  <h3>First Section</h3>
  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. </p>
</section>
<section id="section-2">
  <h3>Second Section</h3>
  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. </p>
</section>
<section id="section-3">
  <h3>Third Section</h3>
  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. </p>
</section>

First Section

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Second Section

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Third Section

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Tabs Get Code


<div class="tab-holder">
  <ul class="tabset">
    <li class="active"><a href="#tab1">Tab #1</a></li>
    <li><a href="#tab2">Tab #2</a></li>
    <li><a href="#tab3">Tab #3</a></li>
  </ul>
  <div class="tab-content">
    <div id="tab1" class="tab">
      <p>Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra. Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra. Quisque ligulas ipsum,</p>
    </div>
    <div id="tab2" class="tab">
      <p>Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra. Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra. Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra.</p>
      <p>Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra. Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra. Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra.</p>
    </div>
    <div id="tab3" class="tab">
      <p>Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra. Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra. Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit.</p>
    </div>
  </div>
</div>

Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra. Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra. Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra. Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit.

Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra. Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra. Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra.

Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra. Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra. Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra.

Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra. Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra. Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit.

Form Elements

Button Styles Get Code

(Buttons may vary in size using same styles)

                  
<a href="#" class="button">Button 1</a>
<a href="#" class="button btn-large btn-long">Button 1</a>
<a href="#" class="button btn-long">Button 1</a>
<a href="#" class="button btn-xsmall">Button 3</a>
<a href="#" class="button light">Light button</a>
Button 1 Button 1 Button 1
Button 2 Button 3

Inputs Get Code

                  
<div class="subscribe-form">
    <input type="email" placeholder="Single Field" />
</div>
<input type="text" placeholder="Default *" />
<input type="text" class="error" placeholder="Default *" />

Filtered Search Get Code


<form class="search-form" >
 <div class="row">
  <input type="search"  placeholder="Search">
  <button type="submit" class="search-btn"><i class="fa fa-search block-search" aria-hidden="true"></i></button>
 </div>
</form>

Checkboxes Get Code


<ul class="check-list inline">
 <li>
  <input type="checkbox" checked id="checkbox-01" />
  <label for="checkbox-01">Item 1</label>
 </li>
 <li>
  <input type="checkbox" id="checkbox-02" />
  <label for="checkbox-02">Item 2</label>
 </li>
 <li>
  <input type="checkbox" id="checkbox-03" />
  <label for="checkbox-03">Item 3</label>
 </li>
</ul>
<ul class="check-list inline">
 <li>
  <input type="checkbox" checked disabled checked id="checkbox-04" />
  <label for="checkbox-04">Disabled Item</label>
 </li>
</ul>

Radiobuttons Get Code


<ul class="radio-list inline">
 <li>
  <input type="radio" checked id="radio-01"  name="radio-group"/>
  <label for="radio-01">Item 1</label>
 </li>
 <li>
  <input type="radio" id="radio-02"  name="radio-group"/>
  <label for="radio-02">Item 2</label>
 </li>
 <li>
  <input type="radio" id="radio-03" name="radio-group" />
  <label for="radio-03">Item 3</label>
 </li>
</ul>
<ul class="radio-list inline">
 <li>
  <input type="radio" checked disabled checked id="radio-04" />
  <label for="radio-04">Disabled Item</label>
 </li>
</ul>

Switch Get Code


<div class="switcher">
 <input type="checkbox">
</div>
<div class="switcher large">
 <input type="checkbox">
</div>

Sort by Get Code


<div class="filter-holder">
  <div class="form">
    <form action="#">
      <div class="select-holder">
        <input type="text" placeholder="Keywords">
      </div>
      <div class="select-holder">
        <select class="filter">
          <option class="hideme">Sort by</option>
          <option>Default</option>
          <option>Popularity</option>
          <option>Newest Products</option>
          <option>Price</option>
          <option>Alphabetical</option>
        </select>
      </div>
      <a href="#" class="button btn-small">Search</a>
    </form>
  </div>
</div>
Search

Sort by buttons Get Code


  <div class="nav-webapp">
    <ul class="nav">
      <li>
        <a class="button btn-small" href="#">all</a>
      </li>
      <li>
        <a class="button btn-small" href="#">california</a>
      </li>
      <li>
        <a class="button btn-small" href="#">creative</a>
      </li>
      <li>
        <a class="button btn-small" href="#">florida</a>
      </li>
      <li>
        <a class="button btn-small" href="#">italy</a>
      </li>
    </ul>
  </div>

Navigation

Breadcrumbs Get Code


<ul class="breadcrumbs">
  <li><a href="#">Category 1</a></li>
  <li><a href="#">Category 2</a></li>
  <li class="selected">Category 3</li>
</ul>

Slider navigation Get Code


<div class="side-nav">
  <ul>
    <li class="selected"><a href="#">Category 1</a>
      <ul>
        <li><a href="#">Subcategory</a></li>
        <li><a href="#">Subcategory</a></li>
        <li class="selected" ><a href="#">Subcategory</a></li>
      </ul>
    </li>
    <li><a href="#">Category 2</a></li>
    <li><a href="#">Category 3</a></li>
  </ul>
</div>

Sidebar menu Get Code


<ul class="side-navigation">
  <li class="selected">
    <a href="#">1 Column</a>
  </li>
  <li>
    <a href="#">2 Column Right Sidebar</a>
  </li>
  <li>
    <a href="#">2 Column Left Sidebar</a>
  </li>
</ul>

Slider Get Code


<input type="range" value="30" min="0" max="100" data-jcf='{ "range": "min"}'>
<input type="range" value="30" min="0" max="100" list="testdata1" data-jcf='{"orientation": "vertical", "range": "min"}'>

Pagination Get Code


<div class="paginationHolder">
  <span id="previous-page">
    <a href="#">Previous</a>
  </span>
  <a href="#">1</a>
  <i>..</i>
  <span class="pagination" id="pagination">
    <a href="#">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
    <span>5</span>
    <a href="#">6</a>
    <i>..</i>
    <a href="#">64</a>
  </span>
  <span id="next-page">
    <a href="#">Next</a>
  </span>
</div>
Previous 1 .. 2 3 4 5 6 .. 64 Next

Local Navigation Get Code


<ul class="nav-web">
  <li>
    <a class="btn-prev" href="#" style="">
      <i class="fa fa-angle-left" aria-hidden="true"></i>
      prev
    </a>
  </li>
  <li>
    <a class="btn-next" href="#">
      next
      <i class="fa fa-angle-right" aria-hidden="true"></i>
    </a>
  </li>
</ul>

Dot Navigation Styles Get Code


<ul class="nav-web">
<div class="text-slider">
  <div class="slideset">
    <div class="slide">
      <h2>People Say</h2>
      <p>Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
      <h3>John Doe</h3>
    </div>
    <div class="slide">
      <h2>Slide 2</h2>
      <p>Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
      <h3>John Doe</h3>
    </div>
    <div class="slide">
      <h2>Slide 3</h2>
      <p>Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
      <h3>John Doe</h3>
    </div>
    <div class="slide">
      <h2>Slide 4</h2>
      <p>Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
      <h3>John Doe</h3>
    </div>
  </div>
</div>

People Say

Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

John Doe

Slide 2

Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

John Doe

Slide 3

Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

John Doe

Slide 4

Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

John Doe

Tables/Data

Table Get Code


<div class="table-holder">
<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Field 1</td>
      <td>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.</td>
      <td>12</td>
    </tr>
    <tr>
      <td>Field 2</td>
      <td>Nemo enim ipsam voluptatem quia voluptas</td>
      <td>24</td>
    </tr>
    <tr>
      <td>Field 3</td>
      <td>Nemo enim ipsam voluptatem quia voluptas</td>
      <td>36</td>
    </tr>
    <tr>
      <td>Field 4</td>
      <td>Nemo enim ipsam voluptatem quia voluptas</td>
      <td>48</td>
    </tr>
  </tbody>
</table>
</table>
Header 1 Header 2 Header 3
Field 1 Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit. 12
Field 2 Nemo enim ipsam voluptatem quia voluptas 24
Field 3 Nemo enim ipsam voluptatem quia voluptas 36
Field 4 Nemo enim ipsam voluptatem quia voluptas 48

Progress bar Get Code


<div class="progress">
  <div class="info">
    <p>Information 1</p>
    <span class="percentages">45%</span>
  </div>
  <div class="progress-bar progressBarAnimate">
    <span class="progress-line" style="width:45%"></span>
  </div>
</div>
<div class="progress color">
  <div class="info">
    <p>Information 2</p>
    <span class="percentages">82%</span>
  </div>
  <div class="progress-bar progressBarAnimate">
    <span class="progress-line" style="width:82%"></span>
  </div>
</div>

Information 1

45%

Information 2

82%

Labels Get Code


<span class="label">Label 1</span>
<span class="label secondary">Label 2</span>
<span class="label success">Success Label</span>
<span class="label alert">Alert Label</span>
<span class="label warning">Warning Label</span>
Label 1 Label 2 Success Label Alert Label Warning Label

Notifications

Notification notes Get Code


<div class="callout">
  <h3>Notification 1</h3>
  <p>Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra.</p>
  <a href="#">If it`s hard, take this</a>
</div>
<div class="callout secondary">
  <h3>Notification 2</h3>
  <p>Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra.</p>
  <a href="#">If it`s hard, take this</a>
</div>
<div class="callout success">
  <h3>Success</h3>
  <p>Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra.</p>
  <a href="#">If it`s hard, take this</a>
</div>
<div class="callout warning">
  <h3>Warning</h3>
  <p>Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra.</p>
  <a href="#">If it`s hard, take this</a>
</div>
<div class="callout alert">
  <h3>Alert</h3>
  <p>Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra.</p>
  <a href="#">If it`s hard, take this</a>
</div>

Notification 1

Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra.

If it`s hard, take this

Notification 2

Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra.

If it`s hard, take this

Success

Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra.

If it`s hard, take this

Warning

Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra.

If it`s hard, take this

Alert

Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra.

If it`s hard, take this

Notifications with close button Get Code


<div class="callout success calloutCloseHoler">
  <h3>Everything is ok</h3>
  <p>Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra.</p>
  <a href="#" class="close"><i class="fa fa-times" aria-hidden="true"></i></a>
</div>
<div class="callout warning calloutCloseHoler">
  <h3>Warning Message</h3>
  <p>Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra.</p>
  <a href="#" class="close"><i class="fa fa-times" aria-hidden="true"></i></a>
</div>

Everything is ok

Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra.

Warning Message

Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra.

Media objects

Video Get Code


<iframe  src="https://www.youtube.com/embed/hZGor6WnIsc" frameborder="0" allowfullscreen></iframe>

Image Get Code


<img src="images/style-guide-01.jpg" alt="image description">
image description

Images Get Code


<figure>
  <img src="images/style-guide-02.jpg" alt="image description">
  <figcaption>Lorem ipsum is dolor</figcaption>
</figure>
<figure>
  <img src="images/style-guide-03.jpg" alt="image description">
  <figcaption>Lorem ipsum is dolor</figcaption>
</figure>
<figure>
  <img src="images/style-guide-04.jpg" alt="image description">
  <figcaption>Lorem ipsum is dolor</figcaption>
</figure>
image description
Lorem ipsum is dolor
image description
Lorem ipsum is dolor
image description
Lorem ipsum is dolor