Elements

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

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

  

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.

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.

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>
  
  

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>

  

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>

  

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>

         

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>

         

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>

         

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

Notification notes Get Code


<div class="callout calloutCloseHoler">
  <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 calloutCloseHoler">
  <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 calloutCloseHoler">
  <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 calloutCloseHoler">
  <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/YgmIibSnZs0" frameborder="0" allowfullscreen></iframe>

         

Image Get Code


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

         
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>
            <p>minim veniam</p>
          </figcaption>
        </figure>
      </div>
      <div class="col-4">
        <figure>
          <img src="images/style-guide-03.jpg" alt="image description">
          <figcaption>
             <p>ullamco laboris</p>
          </figcaption>
        </figure>
      </div>
      <div class="col-4">
        <figure>
          <img src="images/style-guide-04.jpg" alt="image description">
          <figcaption>
           <p>adipisci velit</p>
          </figcaption>
        </figure>
      </div>
    </div>

         
image description

minim veniam

image description

ullamco laboris

image description

adipisci velit