Typography

Text Styles Get Code

Fonts: Lato

          
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<p>text</p>

45px

Heading 1
30px

Heading 2
25px

Heading 3
23px

Heading 4
24px

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.

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>About Us</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.Vestibulum sodales ante a purus volutpat euismod. Proin sodales quam nec ante sollicitudin lacinia. Ut egestas bibendum tempor. Morbi non nibh sit amet ligula blandit ullamcorper in nec risus. Pellentesque fringilla diam faucibus tortor bibendum vulputate. Etiam turpis urna, rhoncus et mattis ut, dapibus eu nunc. Nunc sed aliquet nisi. Nullam ut magna non lacus adipiscing volutpat. Aenean odio mauris, consectetur quis consequat quis, blandit a nunc. Sed orci erat, placerat ac interdum ut, suscipit eu augue. Nunc vitae mi tortor. Ut vel justo quis lectus elementum ullam. Morbi non nibh sit amet ligula blandit ullamcorper in nec risus. Pellentesque fringilla diam faucibus tortor bibendum vulputate.</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. Nunc malesuada ante sit amet purus ornare pulvinar.</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.

About Us

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.Vestibulum sodales ante a purus volutpat euismod. Proin sodales quam nec ante sollicitudin lacinia. Ut egestas bibendum tempor. Morbi non nibh sit amet ligula blandit ullamcorper in nec risus. Pellentesque fringilla diam faucibus tortor bibendum vulputate. Etiam turpis urna, rhoncus et mattis ut, dapibus eu nunc. Nunc sed aliquet nisi. Nullam ut magna non lacus adipiscing volutpat. Aenean odio mauris, consectetur quis consequat quis, blandit a nunc. Sed orci erat, placerat ac interdum ut, suscipit eu augue. Nunc vitae mi tortor. Ut vel justo quis lectus elementum ullam. Morbi non nibh sit amet ligula blandit ullamcorper in nec risus. Pellentesque fringilla diam faucibus tortor bibendum vulputate.

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 i psum dolor sit amet, consectetur adipiscing elit. Nunc malesuada ante sit amet purus ornare pulvinar.

Text Elements

List Get Code


<ul>
  <li>Clear vision and structured plan</li>
  <li>Inspiring and action-oriented leader</li>
  <li>Flexible and professional team</li>
  <li>Constructive and timely communication</li>
</ul>

Clear vision and structured plan
Inspiring and action-oriented leader
Flexible and professional team
Constructive and timely communication

Accordion Get Code


<ul class="accordion">
  <li>
    <a class="opener" href="#"><i class="icon"></i>How much does it cost?</a>
    <div class="slide">
      <p>Harum qui dem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda.</p>
    </div>
  </li>
  <li>
    <a class="opener" href="#">Where can I get support?</a>
    <div class="slide">
      <p>At our restaurant, you can find representatives of the most popular cuisines on a worldwide scale. Whether you want an usual or exotic dish, don’t hesitate to leaf through our diverse menu and order what you like.</p>
    </div>
  </li>
  <li>
    <a class="opener" href="#">What is User Interface?</a>
    <div class="slide">
      <p>At our restaurant, you can find representatives of the most popular cuisines on a worldwide scale. Whether you want an usual or exotic dish, don’t hesitate to leaf through our diverse menu and order what you like.</p>
    </div>
  </li>
</ul>

How much does it cost?

Harum qui dem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda.
Where can I get support?

At our restaurant, you can find representatives of the most popular cuisines on a worldwide scale. Whether you want an usual or exotic dish, don’t hesitate to leaf through our diverse menu and order what you like.
What is User Interface?

At our restaurant, you can find representatives of the most popular cuisines on a worldwide scale. Whether you want an usual or exotic dish, don’t hesitate to leaf through our diverse menu and order what you like.

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

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>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
    </div>
    <div id="tab2" class="tab">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</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

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

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 light">Button 2</a>
<a href="#" class="button dark">Button 3</a>

Button 1

Button 2

Button 3

Inputs Get Code

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

Filtered Search Get Code


<form action="#" class="search-form">
  <div class="row">
    <input type="search" placeholder="Search..." />
    <button class="search-button" type="submit"><i class="icon-search"></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"  disabled 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" disabled  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-holder">
  <form action="#" class="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="portfolio-nav">
  <li class="active"><a href="#">All</a></li>
  <li><a href="#">Branding</a></li>
  <li><a href="#">Design</a></li>
  <li><a href="#">Web Site</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="side-nav">
  <ul>
    <li><a href="#">Life Events</a></li>
    <li><a href="#">Tax Planning</a></li>
    <li class="selected" ><a href="#">Design</a></li>
    <li><a href="#">Branding</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="page-nav">
  <span id="previouspage"><a href="#">Prev</a></span>
  <span class="pagination" id="pagination">
    <a href="#">1</a>
    <a href="#">2</a>
    <span class="current">3</span>
    <a href="#">4</a>
    <span>...</span>
    <a href="#">25</a>
  </span>
  <span id="nextpage"><a href="#">Next</a></span>
</div>

Prev 1 2 3 4 ... 25 Next

Local Navigation Get Code


<div class="webapp-paging">
  <a href="#" class="prev"><i class="fa fa-angle-left" aria-hidden="true"></i> Prev</a>
  <a href="#" class="next">Next <i class="fa fa-angle-right" aria-hidden="true"></i> </a>
</div>

Prev Next

Dot Navigation Styles Get Code



<div class="text-slider">
  <div class="mask">
    <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>

Clients Say

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris. John Doel

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores rerum dicta autem, voluptatem nemo, enim culpa inventore eum laborum debitis, nulla blanditiis nam vero odit iste quidem ipsam! Blanditiis, facilis! Mark Doel

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


<ul class="progress-bar">
  <li class="progressBarAnimate">
    <strong class="title">Branding</strong>
    <div class="line-holder">
      <div class="progress-line" style="width:95%">
        <span class="value" >95%</span>
      </div>
    </div>
  </li>
  <li class="progressBarAnimate">
    <strong class="title">User Experience</strong>
    <div class="line-holder">
      <div class="progress-line" style="width:95%">
        <span class="value">95%</span>
      </div>
    </div>
  </li>
</ul>

Branding

95%
User Experience

95%

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