Typography

Text Styles Get Code

Fonts: Julius Sans One, Source Sans Pro


<h1 class="h1 alt">Heading 1</h1>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<p>text</p>

48px

heading 1 (alt)
50px

Heading 1
40px

Heading 2
30px

Heading 3
30px

Heading 4
26px

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>
<span class="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.</span>
</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 ipsum dolor sit amet, consectetur adipiscing elit. Nunc malesuada ante sit amet purus ornare pulvinar.

Text Elements

List Get Code


<ul class="list">
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.</li>
</ul>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.

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>

learn more

Inputs Get Code


<form action="#" class="large-inputs">
<input type="text" placeholder="Default *" />
<input type="text" class="error" placeholder="Error" />
</form>
<form action="#" >
<input type="text" placeholder="Default *" />
<input type="text" class="error" placeholder="Error" />
</form>

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="input-holder">
<input type="text" placeholder="Keywords">
</div>
<div class="select-holder">
<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>
<div class="btn-holder">
<button class="button" type="submit">Search</button>
</div>
</div>
</form>
</div>

Sort by buttons Get Code


<ul class="portfolio-nav">
<li class="active"><a href="#">All</a></li>
<li><a href="#">Pillow</a></li>
<li><a href="#">Illustration</a></li>
<li><a href="#">Cup</a></li>
<li><a href="#">Poster</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>
<h4>View categories</h4>
<ul class="category-list">
<li class="selected">
<a href="#">Category 1</a>
<ul>
<li><a href="#">Subcategory</a></li>
<li class="selected"><a href="#">Subcategory</a></li>
<li><a href="#">Subcategory</a></li>
</ul>
</li>
<li>
<a href="#">Category 2</a>
<ul>
<li><a href="#">Subcategory</a></li>
<li><a href="#">Subcategory</a></li>
<li><a href="#">Subcategory</a></li>
</ul>
</li>
<li>
<a href="#">Category 3</a>
<ul>
<li><a href="#">Subcategory</a></li>
<li><a href="#">Subcategory</a></li>
<li><a href="#">Subcategory</a></li>
</ul>
</li>
<li>
<a href="#">Category 4</a>
<ul>
<li><a href="#">Subcategory</a></li>
<li><a href="#">Subcategory</a></li>
<li><a href="#">Subcategory</a></li>
</ul>
</li>
<li>
<a href="#">Category 5</a>
<ul>
<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="#">1 Column</a></li>
<li><a href="#">2 Column Right Sidebar</a></li>
<li class="selected" ><a href="#">3 Column Left Sidebar</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>

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>

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>Orem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</td>
<td>12</td>
</tr>
<tr>
<td>Field 2</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</td>
<td>24</td>
</tr>
<tr>
<td>Field 3</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</td>
<td>36</td>
</tr>
</tbody>
</table>
</div>

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	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor	24
Field 3	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor	36

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