Typography

Text Styles Get Code

Fonts: Open Sans, Raleway

                  
<h1 class="sub-h1">Heading 1</h1>
<h2 class="sub-h2">Heading 2</h2>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<p>text</p>
<p><i>text</i></p>

72px

Heading 1
55px

Heading 2
45px

Heading 1
30px

Heading 2
24px

Heading 3
16px

Ut mollis consectetur magna et egestas. Mauris consectetur dui vitae efficitur ullamcorper. Integer imperdiet luctus lorem venenatis fermentum. Curabitur mauris ante, auctor vitae hendrerit ac, egestas in nisi. Ut id aliquam metus, et dapibus augue. Sed ac ultrices eros. Nulla eu magna mi. Quisque maximus, elit eget posuere cursus, massa leo varius neque, ut sagittis quam leo egestas metus. Suspendisse potenti.

Ut mollis consectetur magna et egestas. Mauris consectetur dui vitae efficitur ullamcorper. Integer imperdiet luctus lorem venenatis fermentum. Curabitur mauris ante, auctor vitae hendrerit ac, egestas in nisi. Ut id aliquam metus, et dapibus augue. Sed ac ultrices eros. Nulla eu magna mi. Quisque maximus, elit eget posuere cursus, massa leo varius neque, ut sagittis quam leo egestas metus. Suspendisse potenti. Proin vestibulum porttitor augue, id molestie ante semper et.

Paragraphs Get Code


<h3>Sit Amet</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate dictum laoreet. Morbi scelerisque ex tellus, id rutrum mi feugiat in. Ut mollis consectetur magna et egestas. Mauris consectetur dui vitae efficitur ullamcorper. Integer imperdiet luctus lorem venenatis fermentum. Curabitur mauris ante, auctor vitae hendrerit ac, egestas in nisi. Ut id aliquam metus, et dapibus augue. Sed ac ultrices eros. Nulla eu magna mi. Quisque maximus, elit eget posuere cursus, massa leo varius neque, ut sagittis quam leo egestas metus. Suspendisse potenti. Proin vestibulum porttitor augue, id molestie ante semper et.</p>
<h2>Lorem ipsum is dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate dictum laoreet. Morbi scelerisque ex tellus, id rutrum mi feugiat in. Ut mollis consectetur magna et egestas. Mauris consectetur dui vitae efficitur ullamcorper. Integer imperdiet luctus lorem venenatis fermentum. Curabitur mauris ante, auctor vitae hendrerit ac, egestas in nisi. Ut id aliquam metus, et dapibus augue. Sed ac ultrices eros. Nulla eu magna mi. Quisque maximus, elit eget posuere cursus, massa leo varius neque, ut sagittis quam leo egestas metus. Suspendisse potenti. Proin vestibulum porttitor augue, id molestie ante semper et.</p>
<blockquote>
  <q>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate dictum laoreet. Morbi scelerisque ex tellus, id rutrum mi feugiat in. Ut mollis consectetur magna et egestas. Mauris consectetur dui vitae efficitur ullamcorper. Integer imperdiet luctus lorem venenatis fermentum. Curabitur mauris ante, auctor vitae hendrerit ac, egestas in nisi.</q>
</blockquote>

Sit Amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate dictum laoreet. Morbi scelerisque ex tellus, id rutrum mi feugiat in. Ut mollis consectetur magna et egestas. Mauris consectetur dui vitae efficitur ullamcorper. Integer imperdiet luctus lorem venenatis fermentum. Curabitur mauris ante, auctor vitae hendrerit ac, egestas in nisi. Ut id aliquam metus, et dapibus augue. Sed ac ultrices eros. Nulla eu magna mi. Quisque maximus, elit eget posuere cursus, massa leo varius neque, ut sagittis quam leo egestas metus. Suspendisse potenti. Proin vestibulum porttitor augue, id molestie ante semper et.

Lorem ipsum is dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate dictum laoreet. Morbi scelerisque ex tellus, id rutrum mi feugiat in. Ut mollis consectetur magna et egestas. Mauris consectetur dui vitae efficitur ullamcorper. Integer imperdiet luctus lorem venenatis fermentum. Curabitur mauris ante, auctor vitae hendrerit ac, egestas in nisi.

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.

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
Second Section
Third 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

Third Section

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>

Tab #1
Tab #2
Tab #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 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</a>

Button

Inputs Get Code

  
<input type="text" placeholder="Default *" />
<input type="text" class="error" placeholder="Error*" />

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>

Item 1
Item 2
Item 3

Disabled Item

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>

Item 1
Item 2
Item 3

Disabled Item

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-section">
 <form action="#" class="filter-form">
  <div class="row-holder">
  <div class="col-4">
      <input type="text" placeholder="Keywords">
    </div>
    <div class="col-4">
      <select>
        <option class="hideme">Sort by</option>
        <option>Default</option>
        <option>Popularity</option>
        <option>Newest Products</option>
        <option>Price</option>
        <option>Alphabetical</option>
      </select>
    </div>
    <button type="submit">Search</button>
  </div>
</form>
</div>

Sort by buttons Get Code


<ul class="nav-webapp">
  <li>
      <a class="button" href="#">starters</a>
  </li>
  <li>
      <a class="button" href="#">meat</a>
  </li>
  <li>
      <a class="button" href="#">fish</a>
  </li>
  <li>
      <a class="button" href="#">vegetarian</a>
  </li>
  <li>
      <a class="button" href="#">dessert</a>
  </li>
</ul>

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>

Category 1
Category 2
Category 3

Slider navigation Get Code


<nav>
  <ul class="slider-navigation">
    <li>
      <a href="#" class="opener">Category 1</a>
      <ul class="slide">
        <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="#" class="opener">Category</a>
      <ul class="slide">
        <li><a href="#">Subcategory</a></li>
        <li><a href="#">Subcategory</a></li>
        <li><a href="#">Subcategory</a></li>
      </ul>
    </li>
    <li>
      <a href="#" class="opener">Category</a>
      <ul class="slide">
        <li><a href="#">Subcategory</a></li>
        <li><a href="#">Subcategory</a></li>
        <li><a href="#">Subcategory</a></li>
      </ul>
    </li>
  </ul>
</nav>

Sidebar menu Get Code


<nav class="add-nav">
  <ul>
    <li class="selected"><a href="#">1 Column</a></li>
    <li><a href="#">2 Column</a></li>
  </ul>
</nav>

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="pagination">
  <a href="#">Prev</a>
  <a href="#">1</a>
  <a href="#">2</a>
  <span class="current">3</span>
  <a href="#">4</a>
  <span>...</span>
  <a href="#">25</a>
  <a href="#">Next</a>
</div>

Prev 1 2 3 4 ... 25 Next

Local Navigation Get Code


<div class="webapp-paging">
  <a href="#" class="prev">
    <i class="icon icon-angle-double-left"></i>
    <div class="text">
      <strong class="title">Prev</strong>
      <span class="position"></span>
    </div>
  </a>
  <a href="#" class="next">
    <i class="icon icon-angle-double-right"></i>
    <div class="text">
      <strong class="title">Next</strong>
      <span class="position"></span>
    </div>
  </a>
</div>

Prev

Next

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	Orem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.	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 secondary">Label 1</span>
<span class="label ">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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate dictum laoreet. Morbi scelerisque ex tellus, id rutrum mi feugiat in. Ut mollis consectetur magna et egestas. Mauris consectetur dui vitae efficitur ullamcorper. </p>
  <a href="#">If it`s hard, take this</a>
</div>
<div class="callout secondary">
  <h3>Notification 2</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate dictum laoreet. Morbi scelerisque ex tellus, id rutrum mi feugiat in. Ut mollis consectetur magna et egestas. Mauris consectetur dui vitae efficitur ullamcorper. </p>
  <a href="#">If it`s hard, take this</a>
</div>
<div class="callout success">
  <h3>Success</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate dictum laoreet. Morbi scelerisque ex tellus, id rutrum mi feugiat in. Ut mollis consectetur magna et egestas. Mauris consectetur dui vitae efficitur ullamcorper. </p>
  <a href="#">If it`s hard, take this</a>
</div>
<div class="callout warning">
  <h3>Warning</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate dictum laoreet. Morbi scelerisque ex tellus, id rutrum mi feugiat in. Ut mollis consectetur magna et egestas. Mauris consectetur dui vitae efficitur ullamcorper. </p>
  <a href="#">If it`s hard, take this</a>
</div>
<div class="callout alert">
  <h3>Alert</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate dictum laoreet. Morbi scelerisque ex tellus, id rutrum mi feugiat in. Ut mollis consectetur magna et egestas. Mauris consectetur dui vitae efficitur ullamcorper. </p>
  <a href="#">If it`s hard, take this</a>
</div>

Notifications with close button Get Code


<div class="callout success calloutCloseHoler">
  <h3>Everything is ok</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate dictum laoreet. Morbi scelerisque ex tellus, id rutrum mi feugiat in. Ut mollis consectetur magna et egestas. Mauris consectetur dui vitae efficitur ullamcorper. </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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate dictum laoreet. Morbi scelerisque ex tellus, id rutrum mi feugiat in. Ut mollis consectetur magna et egestas. Mauris consectetur dui vitae efficitur ullamcorper. </p>
  <a href="#" class="close"><i class="fa fa-times" aria-hidden="true"></i></a>
</div>

Everything is ok

Warning Message

Media objects

Video Get Code


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

Image Get Code


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

Images Get Code


<div class="row-holder">
  <div class="col-4">
    <figure>
      <img src="/images/style-guide-02.jpg" alt="image description">
      <figcaption>
        <span class="category">Breakfast</span>
        <h2 class="h3">Chicken pot pie</h2>
        <span class="price">$19.99</span>
      </figcaption>
    </figure>
  </div>
  <div class="col-4">
    <figure>
      <img src="/images/style-guide-03.jpg" alt="image description">
      <figcaption>
        <span class="category">Desserts</span>
        <h2 class="h3">Fritto misto </h2>
        <span class="price">$25.99</span>
      </figcaption>
    </figure>
  </div>
  <div class="col-4">
    <figure>
      <img src="/images/style-guide-04.jpg" alt="image description">
      <figcaption>
        <span class="category">Breakfast</span>
        <h2 class="h3">Chicken with mushrooms</h2>
        <span class="price">$3.99</span>
      </figcaption>
    </figure>
  </div>
</div>

Login to your account

Typography

Text Styles Get Code

Heading 1

Heading 2

Heading 1

Heading 2

Heading 3

Paragraphs Get Code

Sit Amet

Lorem ipsum is dolor

Text Elements

List Get Code

Accordion Get Code

Magellan Get Code

First Section

Second Section

Third Section

Tabs Get Code

Form Elements

Button Styles Get Code

Inputs Get Code

Filtered Search Get Code

Checkboxes Get Code

Radiobuttons Get Code

Switch Get Code

Sort by Get Code

Sort by buttons Get Code

Navigation

Breadcrumbs Get Code

Slider navigation Get Code

Sidebar menu Get Code

Slider Get Code

Pagination Get Code

Local Navigation Get Code

Dot Navigation Styles Get Code

People Say

John Doe

Slide 2

John Doe

Slide 3

John Doe

Slide 4

John Doe

Tables/Data

Table Get Code

Progress bar Get Code

Labels Get Code

Notifications

Notification notes Get Code

Notification 1

Notification 2

Success

Warning

Alert

Notifications with close button Get Code

Everything is ok

Warning Message

Media objects

Video Get Code

Image Get Code

Images Get Code

Chicken pot pie

Fritto misto

Chicken with mushrooms