css framework
Posted in
18834
5:15 am, October 11, 2021
Punica pure CSS Framework
Punica CSS is a clean, lightweight, responsive, modern and fully customizable (even class names) pure CSS Framework based on SASS/SCSS with multi-theme support.
What is Punica?
Punica also lets you create your custom CSS Framework. You can customize all the class names, apply your color scheme, enable or disable features of element/component, change all variables as your need and create your themes according to your taste then compile the Punica again and ready to engage! You are completely free!
How to Install Punica
Just include the following script on your page.
HTML
Punica pure CSS Framework Demo
View Demo Full Screen View Demo New Tab
Punica pure CSS Framework Code
HTML
<h2>Grid Example</h2>
<div class="row">
<div class="col-4 col-sm-16 col-xs-16">
Lorem ipsum dolor sit amet, ex timeam dissentiet definitionem ius, no vix nihil iriure.
</div>
<div class="col-4 col-sm-16 col-xs-16">col-4</div>
<div class="col-4 col-sm-16 col-xs-16">
Lorem ipsum dolor sit amet, ex timeam dissentiet definitionem ius, no vix nihil iriure. Mel ad quodsi nonumes vulputate, sed cibo incorrupte ad, no nam atqui accusam.
</div>
<div class="col-4 col-sm-16 col-xs-16">col-4</div>
</div>
<h3>Equal Height Columns</h3>
<div class="row equal">
<div class="col-4 col-sm-16 col-xs-16">
Lorem ipsum dolor sit amet, ex timeam dissentiet definitionem ius, no vix nihil iriure.
</div>
<div class="col-4 col-sm-16 col-xs-16">col-4</div>
<div class="col-4 col-sm-16 col-xs-16">
Lorem ipsum dolor sit amet, ex timeam dissentiet definitionem ius, no vix nihil iriure. Mel ad quodsi
nonumes vulputate, sed cibo incorrupte ad, no nam atqui accusam.
</div>
<div class="col-4 col-sm-16 col-xs-16">col-4</div>
</div>
<h2>Buttons </h2>
<div class="panel pure mt-0">
<div class="content pt-0 pb-5">
<div class="button">Default</div>
<div class="button active">Active</div>
<div class="button disabled">Disabled</div>
<div class="button inactive">Inactive</div>
<div class="button link">Link</div>
<div class="button secondary">Secondary</div>
</div>
<div class="content pt-0 pb-5">
<button class="button primary">Default</button>
<a class="button primary active">Active</a>
<div class="button primary disabled">Disabled</div>
<div class="button primary inactive">Inactive</div>
</div>
<div class="content pt-0 pb-5">
<button class="button success">Default</button>
<a class="button success active">Active</a>
<div class="button success disabled">Disabled</div>
<div class="button success inactive">Inactive</div>
</div>
<div class="content pt-0 pb-5">
<button class="button warning">Default</button>
<a class="button warning active">Active</a>
<div class="button warning disabled">Disabled</div>
<div class="button warning inactive">Inactive</div>
</div>
<div class="content pt-0 pb-5">
<button class="button error">Default</button>
<a class="button error active">Active</a>
<div class="button error disabled">Disabled</div>
<div class="button error inactive">Inactive</div>
</div>
<div class="content pt-0">
<button class="button dark">Default</button>
<a class="button dark active">Active</a>
<div class="button dark disabled">Disabled</div>
<div class="button dark inactive">Inactive</div>
</div>
<!-- BUTTON SIZES -->
<div class="header mt-100">
<span class="h3">
Button Sizes
</span>
</div>
<div class="content">
<p>
Add the <code>.tiny, .mini, .small, .large</code> or <code>.huge</code> class to a button to make it smaller or larger.
Also, you can add the <code>.block</code> class for a full-width button.
</p>
</div>
<div class="content">
<a class="button tiny mr-5">Tiny</a>
<a class="button mini mr-5">Mini</a>
<a class="button small mr-5">Small</a>
<a class="button mr-5">Default</a>
<a class="button large mr-5">Large</a>
<a class="button huge">Huge</a>
<p></p>
<a class="button block">Block Button</a>
</div>
<!-- BUTTON GROUPS -->
<div class="header mt-100">
<span class="h3">
Button Groups
</span>
</div>
<div class="content">
<p class="mb-30">
To create a button group, add the <code>.buttons</code> class to a <code>div</code> element around the buttons.
</p>
<div class="col-16 mt-40">
<div class="buttons mr-10 mt-20">
<button class="button">
Button
</button>
<a href="javascript:" class="button active">
Button
</a>
<button class="button">
Button
</button>
</div>
<div class="buttons secondary">
<button class="button">
Secondary
</button>
<a href="javascript:" class="button active">
Secondary
</a>
<button class="button">
Secondary
</button>
</div>
</div>
<div class="col-16 mt-40">
<div class="buttons secondary mini">
<a href="javascript:" class="button">
<span class="material-icons">person</span>
</a>
<div class="button inactive">254</div>
</div>
<div class="buttons mini ml-20">
<a href="javascript:" class="button warning">
<span class="material-icons">launch</span>
</a>
<div class="button inactive">458</div>
</div>
<div class="buttons mini ml-20">
<a href="javascript:" class="button active">
<span class="material-icons">thumb_up</span>
</a>
<div class="button inactive">276</div>
</div>
<div class="buttons mini ml-20">
<a href="javascript:" class="button primary">
<span class="material-icons">lock</span>
</a>
<div class="button inactive">63</div>
</div>
<div class="buttons mini ml-20">
<a href="javascript:" class="button success">
<span class="material-icons">input</span>
</a>
<div class="button inactive">395</div>
</div>
</div>
<div class="col-16 mt-40">
<div class="buttons">
<div class="button inactive dark">
<i class="material-icons mr-10 ml-10">shopping_cart</i>
</div>
<div class="button">
<span class="weight-900 large-text">$175</span>
</div>
<div class="button warning weight-900">
Checkout Now !
</div>
</div>
</div>
</div>
<!-- remove shadow of button groups -->
<div class="content mt-20">
<span class="h5">
<i class="material-icons color-primary mr-5">info</i> Shadowless
</span>
<p class="mb-30">
To remove the shadow from a button group, add the <code>.shadowless</code> helper class to a <code>.buttons</code>
container class.
</p>
<div class="shadowless buttons">
<a href="javascript:" class="button">
<span class="material-icons">launch</span>
</a>
<a href="javascript:" class="button">
<span class="material-icons">person</span>
</a>
<a href="javascript:" class="button">
<span class="material-icons">directions_run</span>
</a>
</div>
</div>
<!-- sizes of button groups -->
<div class="content mt-20">
<span class="h5">
<i class="material-icons color-primary mr-5">info</i> Sizes of button groups
</span>
<p class="mb-30">
Also, add the <code>.tiny, .mini, .small, .large</code> or <code>.huge</code> class to <code>.buttons</code> to make
it
smaller or larger group buttons.
</p>
<div class="buttons mini mr-20">
<a href="javascript:" class="button">
<span class="material-icons">launch</span>
</a>
<a href="javascript:" class="button">
<span class="material-icons">person</span>
</a>
<a href="javascript:" class="button">
<span class="material-icons">directions_run</span>
</a>
</div>
<div class="buttons small mr-20">
<a href="javascript:" class="button">
<span class="material-icons">launch</span>
</a>
<a href="javascript:" class="button">
<span class="material-icons">person</span>
</a>
<a href="javascript:" class="button">
<span class="material-icons">directions_run</span>
</a>
</div>
<div class="buttons">
<a href="javascript:" class="button">
<span class="material-icons">launch</span>
</a>
<a href="javascript:" class="button">
<span class="material-icons">person</span>
</a>
<a href="javascript:" class="button">
<span class="material-icons">directions_run</span>
</a>
</div>
</div>
<!-- block buttons -->
<div class="content mt-20">
<span class="h5">
<i class="material-icons color-primary mr-5">info</i> Full-width Button Groups
</span>
<p class="mb-30">
And you can add the <code>.block</code> class to <code>.buttons</code> for a full-width button group.
</p>
<div class="buttons small block">
<a href="javascript:" class="button">
Button
</a>
<a href="javascript:" class="button">
Button
</a>
<a href="javascript:" class="button">
Button
</a>
</div>
</div>
<!-- Secondary -->
<div class="header mt-100">
<span class="h3">
Secondary Button
</span>
</div>
<div class="content pb-0">
<p>
You can add the <code>.secondary</code> class to a <code>.button</code> or <code>.buttons</code> to change the
style as secondary.
</p>
</div>
<div class="content mb-40">
<button class="button secondary mini mr-10"><span class="material-icons">person</span></button>
<div class="buttons mini secondary mr-20">
<a href="javascript:" class="button active">
<span class="material-icons">launch</span>
</a>
<a href="javascript:" class="button">
<span class="material-icons">person</span>
</a>
<a href="javascript:" class="button">
<span class="material-icons">directions_run</span>
</a>
</div>
<div class="buttons small secondary mr-20">
<a href="javascript:" class="button">
<span class="material-icons">launch</span>
</a>
<a href="javascript:" class="button active">
<span class="material-icons">person</span>
</a>
<a href="javascript:" class="button">
<span class="material-icons">directions_run</span>
</a>
</div>
</div>
<!-- Dropdown -->
<div class="header mt-50">
<span class="h3">
Button with Dropdown
</span>
</div>
<div class="content">
<p>
A button can be used to trigger a dropdown menu.
</p>
<div class="row">
<div class="col-16 mt-30">
<div class="buttons">
<div class="dropdown">
<a tabindex="0" class="button toggle">
Default Dropdown <span class="material-icons">keyboard_arrow_down</span>
</a>
<ul class="menu">
<li class="item"><a href="#">Dropdown 1</a></li>
<li class="item"><a href="#">Dropdown 2</a></li>
<li class="item"><a href="#">Dropdown 3</a></li>
</ul>
</div>
</div>
<div class="buttons">
<div class="dropdown clickable">
<a tabindex="0" class="button toggle">
Clickable Dropdown <span class="material-icons ml-5">keyboard_arrow_down</span>
</a>
<ul class="menu">
<li class="item"><a href="#">Dropdown 1</a></li>
<li class="item"><a href="#">Dropdown 2</a></li>
<li class="item"><a href="#">Dropdown 3</a></li>
</ul>
</div>
</div>
<div class="buttons small ml-20">
<div class="button">Small Dropdown</div>
<div class="dropdown right bottom">
<a tabindex="0" class="button toggle">
<span class="material-icons">keyboard_arrow_down</span>
</a>
<ul class="menu">
<li class="item"><a href="#">Dropdown 1</a></li>
<li class="item"><a href="#">Dropdown 2</a></li>
<li class="item"><a href="#">Dropdown 3</a></li>
</ul>
</div>
</div>
</div>
<div class="col-16 mt-40">
<div class="buttons mini mr-20">
<div class="button primary">
<span class="material-icons mr-5">drafts</span> Mini
</div>
<div class="button inactive">254</div>
<div class="dropdown right top">
<a tabindex="0" class="button toggle">
<span class="material-icons">keyboard_arrow_up</span>
</a>
<ul class="menu">
<li class="item"><a href="#">Dropdown 1</a></li>
<li class="item"><a href="#">Dropdown 2</a></li>
<li class="item"><a href="#">Dropdown 3</a></li>
</ul>
</div>
</div>
<div class="buttons mini">
<div class="dropdown top left">
<a tabindex="0" class="button toggle">
<span class="material-icons">keyboard_arrow_up</span>
</a>
<ul class="menu">
<li class="item"><a href="#">Dropdown 1</a></li>
<li class="item"><a href="#">Dropdown 2</a></li>
<li class="item"><a href="#">Dropdown 3</a></li>
</ul>
</div>
<div class="button inactive">254</div>
<div class="button secondary">
<span class="material-icons">drafts</span>
</div>
</div>
<div class="buttons primary mini ml-20">
<div class="dropdown">
<a tabindex="0" class="button toggle">
<span class="material-icons">keyboard_arrow_down</span>
</a>
<ul class="menu">
<li class="item"><a href="#">Dropdown 1</a></li>
<li class="item"><a href="#">Dropdown 2</a></li>
<li class="item"><a href="#">Dropdown 3</a></li>
</ul>
</div>
<div class="button inactive">254</div>
<div class="button secondary">
<span class="material-icons">drafts</span>
</div>
</div>
</div>
</div>
<p class="mt-50">
You can change the direction of the dropdown by adding any <code style="white-space: inherit;">.right .left .top .top.left .top.right .bottom.left .bottom.right </code> classes to <code>.dropdown</code> container.
</p>
<div class="row mt-40">
<div class="col-8 align right">
<div class="dropdown top left">
<a tabindex="0" class="button large toggle">
<span class="material-icons">north_west</span>
</a>
<ul class="menu">
<li class="item"><a href="#">Dropdown 1</a></li>
<li class="item"><a href="#">Dropdown 2</a></li>
</ul>
</div>
</div>
<div class="col-8 align left">
<div class="dropdown top right">
<a tabindex="0" class="button large toggle">
<span class="material-icons">north_east</span>
</a>
<ul class="menu">
<li class="item"><a href="#">Dropdown 1</a></li>
<li class="item"><a href="#">Dropdown 2</a></li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-8 align right">
<div class="dropdown left">
<a tabindex="0" class="button large toggle">
<span class="material-icons">west</span>
</a>
<ul class="menu">
<li class="item"><a href="#">Dropdown 1</a></li>
<li class="item"><a href="#">Dropdown 2</a></li>
</ul>
</div>
</div>
<div class="col-8 align left">
<div class="dropdown right">
<a tabindex="0" class="button large toggle">
<span class="material-icons">east</span>
</a>
<ul class="menu">
<li class="item"><a href="#">Dropdown 1</a></li>
<li class="item"><a href="#">Dropdown 2</a></li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-8 align right">
<div class="dropdown bottom left">
<a tabindex="0" class="button large toggle">
<span class="material-icons">south_west</span>
</a>
<ul class="menu">
<li class="item"><a href="#">Dropdown 1</a></li>
<li class="item"><a href="#">Dropdown 2</a></li>
</ul>
</div>
</div>
<div class="col-8 align left">
<div class="dropdown bottom right">
<a tabindex="0" class="button large toggle">
<span class="material-icons">south_east</span>
</a>
<ul class="menu">
<li class="item"><a href="#">Dropdown 1</a></li>
<li class="item"><a href="#">Dropdown 2</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- vertical button groups -->
<div class="header mt-100">
<div class="h3">
Vertical Button Groups
</div>
</div>
<div class="content">
<p>
Also, just add the <code>.vertical</code> class to <code>.buttons</code> to make it vertical button group.
</p>
</div>
<div class="content">
<div class="buttons tiny vertical">
<button class="button">
<i class="material-icons">group_work</i>
</button>
<button class="button">
<i class="material-icons">verified_user</i>
</button>
<button class="button">
<i class="material-icons">settings</i>
</button>
</div>
<div class="buttons mini primary vertical ml-30">
<button class="button">
<i class="material-icons">group_work</i>
</button>
<button class="button">
<i class="material-icons">verified_user</i>
</button>
<button class="button">
<i class="material-icons">settings</i>
</button>
</div>
<div class="buttons small success vertical ml-30">
<button class="button">
<i class="material-icons">group_work</i>
</button>
<button class="button">
<i class="material-icons">verified_user</i>
</button>
<button class="button">
<i class="material-icons">settings</i>
</button>
</div>
<div class="buttons warning vertical ml-30">
<button class="button">
<i class="material-icons">group_work</i>
</button>
<div class="dropdown left">
<a tabindex="0" class="button toggle">
<span class="material-icons mr-5">keyboard_arrow_left</span> <i class="material-icons">verified_user</i>
</a>
<ul class="menu">
<li class="item"><a href="#">Dropdown 1</a></li>
<li class="item"><a href="#">Dropdown 2</a></li>
<li class="item"><a href="#">Dropdown 3</a></li>
</ul>
</div>
<div class="dropdown right">
<a tabindex="0" class="button toggle">
<i class="material-icons">settings</i> <span class="material-icons ml-5">keyboard_arrow_right</span>
</a>
<ul class="menu">
<li class="item"><a href="#">Dropdown 1</a></li>
<li class="item"><a href="#">Dropdown 2</a></li>
<li class="item"><a href="#">Dropdown 3</a></li>
</ul>
</div>
</div>
<div class="buttons large error vertical ml-30">
<button class="button">
<i class="material-icons">group_work</i>
</button>
<button class="button">
<i class="material-icons">verified_user</i>
</button>
<button class="button">
<i class="material-icons">settings</i>
</button>
</div>
</div>
<div class="content">
<div class="row">
<div class="col-8 align right">
<div class="buttons block vertical">
<button class="button">Account Info</button>
<button class="button">Privacy Preferences</button>
<div class="dropdown left">
<a tabindex="0" class="button toggle">
<span class="material-icons mr-5">keyboard_arrow_left</span> Scheduled Reminders
</a>
<ul class="menu">
<li class="item"><a href="#">Dropdown 1</a></li>
<li class="item"><a href="#">Dropdown 2</a></li>
<li class="item"><a href="#">Dropdown 3</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="row mt-40">
<div class="col-8 align right">
<div class="buttons primary block vertical">
<button class="button">Account Info</button>
<button class="button">Privacy Preferences</button>
<div class="dropdown right">
<a tabindex="0" class="button toggle">
Scheduled Reminders <span class="material-icons ml-5">keyboard_arrow_right</span>
</a>
<ul class="menu">
<li class="item"><a href="#">Dropdown 1</a></li>
<li class="item"><a href="#">Dropdown 2</a></li>
<li class="item"><a href="#">Dropdown 3</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<h2>Caption</h2>
<div class="caption">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga delectus commodi illo dolore, officia ratione?
</div>
<h2>Form Elements</h2>
<form class="form">
<div class="three items">
<div class="item">
<label>First Name</label>
<input type="text">
</div>
<div class=" item">
<label>Last Name</label>
<input type="text">
</div>
<div class="item">
<label for="colors">Choose a color:</label>
<select name="colors" id="colors">
<option value="black">Black</option>
<option value="white">White</option>
<option value="blue">Blue</option>
<option value="orange">Orange</option>
</select>
</div>
</div>
</form>
<h2>Icon</h2>
<p>Material Icons</p>
<span class="material-icons">3d_rotation</span>
<i class="material-icons">accessibility</i>
<h2>Label</h2>
<span class="label">Default</span>
<div class="label primary">Primary</div>
<div class="label success">Success</div>
<div class="label warning">Warning</div>
<div class="label error">Error</div>
<div class="label dark">Dark</div>
<h2>Table</h2>
<table class="table">
<thead>
<tr>
<th>Table Heading</th>
<th>Table Heading</th>
<th>Table Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>Table Data</td>
<td>Table Data</td>
<td>Table Data</td>
</tr>
</tbody>
</table>
<h2>Alert</h2>
<span class="alert">Default</span>
<div class="alert primary">Primary</div>
<div class="alert success">Success</div>
<div class="alert warning">Warning</div>
<div class="alert error">Error</div>
<div class="alert dark">Dark</div>
<h2>Badge</h2>
<div class="content">
<div class="badge">12</div>
<div class="badge primary">75</div>
<div class="badge success">336</div>
<div class="badge warning">89567</div>
<div class="badge error">59</div>
<div class="badge dark">549</div>
</div>
<h2>Billboard</h2>
<div class="billboard">
<div class="body">
<h2>Billboard</h2>
<p>
Lorem ipsum dolor sit amet..
</p>
<div class="buttons mt-30">
<div class="button dark inactive">
<i class="material-icons">east</i>
</div>
<div class="button huge primary">Button</div>
</div>
</div>
</div>
<h2>Breadcrumb</h2>
<div class="breadcrumb">
<a href="" class="item">Punica</a>
<a href="" class="item">Components</a>
<a href="" class="item active">Breadcrumb</a>
</div>
<h2>Card</h2>
<div class="card">
<div class="media">
<img src="https://unsplash.it/220/100 ">
</div>
<div class="title">
<div class="h4">Card Title</div>
<div class="subtitle">Card Subtitle</div>
</div>
<div class="description">
Lorem ipsum dolor sit amet...
</div>
</div>
<h2>List</h2>
<div class="pure panel reset">
<div class="content">
<div class="row">
<div class="col-xs-16 col-8">
<div class="h5">
List Title
</div>
<ul class="list">
<li class="item">
Lorem ipsum dolor sit amet
</li>
<li class="item active">
Lorem ipsum dolor sit amet (active)
</li>
<li class="item">
Lorem ipsum dolor sit amet
</li>
</ul>
</div>
<div class="col-xs-16 col-8">
<div class="list divided">
<div class="h5">
List Title
</div>
<div class="item">
Lorem ipsum dolor sit amet
</div>
<div class="item">
Lorem ipsum dolor sit amet
</div>
<div class="item active">
Lorem ipsum dolor sit amet (active)
</div>
</div>
</div>
</div>
</div>
<div class="header mt-50">
<div class="h3">Striped & Hovered List</div>
</div>
<div class="content">
<p>
You can add the zebra-striping to a list by adding the <code>.striped</code> class and add the <code>.hovered</code> class to display a hover state on list items.
</p>
<div class="row">
<div class="col-xs-16 col-lg-7">
<div class="list striped divided">
<div class="h5">
Striped List
</div>
<div class="item">
<i class="material-icons">reorder</i>
<div class="body">
Lorem ipsum dolor sit amet
</div>
</div>
<div class="item">
<i class="material-icons">reorder</i>
<div class="body">
Lorem ipsum dolor sit amet
</div>
</div>
<div class="item">
<i class="material-icons">reorder</i>
<div class="body">
Lorem ipsum dolor sit amet
</div>
</div>
<div class="item">
<i class="material-icons">reorder</i>
<div class="body">
Lorem ipsum dolor sit amet
</div>
</div>
</div>
</div>
<div class="col-xs-16 col-lg-7 offset-lg-9">
<div class="list hovered divided">
<div class="h5">
Hovered List
</div>
<div class="item">
<i class="material-icons">reorder</i>
<div class="body">
Lorem ipsum dolor sit amet
</div>
<div class="actions">
<div class="buttons tiny">
<a href="javascript:" class="button">
<span class="material-icons">edit</span>
</a>
<a href="javascript:" class="button">
<span class="material-icons">delete</span>
</a>
</div>
</div>
</div>
<div class="item">
<i class="material-icons">reorder</i>
<div class="body">
Lorem ipsum dolor sit amet
</div>
<div class="actions">
<div class="buttons tiny">
<a href="javascript:" class="button">
<span class="material-icons">edit</span>
</a>
<a href="javascript:" class="button">
<span class="material-icons">delete</span>
</a>
</div>
</div>
</div>
<div class="item">
<i class="material-icons">reorder</i>
<div class="body">
Lorem ipsum dolor sit amet
</div>
<div class="actions">
<div class="buttons tiny">
<a href="javascript:" class="button">
<span class="material-icons">edit</span>
</a>
<a href="javascript:" class="button">
<span class="material-icons">delete</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="header mt-50">
<div class="h3">List with inputs</div>
</div>
<div class="content">
<p>
Lists can contain variety of form inputs.
</p>
<div class="row">
<div class="col-xs-16 col-lg-7">
<div class="list divided hovered">
<div class="item">
<i class="material-icons">reorder</i>
<div class="body">
<div class="form reset small">
<div class="item reset">
<div class="group">
<input type="text" placeholder="key...">
<input type="text" placeholder="value...">
<a class="button error">
<i class="material-icons">clear</i>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<i class="material-icons">reorder</i>
<div class="body">
<div class="form reset small">
<div class="item reset">
<div class="group">
<input type="text" placeholder="key...">
<input type="text" placeholder="value...">
<a class="button error">
<i class="material-icons">clear</i>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<i class="material-icons">reorder</i>
<div class="body">
<div class="form reset small">
<div class="item reset">
<div class="group">
<input type="text" placeholder="key...">
<input type="text" placeholder="value...">
<a class="button error">
<i class="material-icons">clear</i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-16 col-lg-7 offset-lg-9">
<div class="list divided">
<div class="item">
<i class="material-icons">reorder</i>
<div class="body">
<div class="form reset small">
<div class="item reset">
<div class="group">
<input type="text" placeholder="key...">
<input type="text" placeholder="value...">
</div>
</div>
</div>
</div>
<div class="actions">
<div class="buttons mini">
<a href="javascript:" class="button">
<span class="material-icons">edit</span>
</a>
<a href="javascript:" class="button">
<span class="material-icons">delete</span>
</a>
</div>
</div>
</div>
<div class="item">
<i class="material-icons">reorder</i>
<div class="body">
<div class="form reset small">
<div class="item reset">
<div class="group">
<input type="text" placeholder="key...">
<input type="text" placeholder="value...">
</div>
</div>
</div>
</div>
<div class="actions">
<div class="buttons mini">
<a href="javascript:" class="button">
<span class="material-icons">edit</span>
</a>
<a href="javascript:" class="button">
<span class="material-icons">delete</span>
</a>
</div>
</div>
</div>
<div class="item">
<i class="material-icons">reorder</i>
<div class="body">
<div class="form reset small">
<div class="item reset">
<div class="group">
<input type="text" placeholder="key...">
<input type="text" placeholder="value...">
</div>
</div>
</div>
</div>
<div class="actions">
<div class="buttons mini">
<a href="javascript:" class="button">
<span class="material-icons">edit</span>
</a>
<a href="javascript:" class="button">
<span class="material-icons">delete</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="header mt-50">
<div class="h3">Media List</div>
</div>
<div class="content">
<p>
Also, Lists can contain variety of media elements and actions buttons.
</p>
<div class="row">
<div class="col-xs-16 col-lg-7">
<div class="list divided">
<div class="item">
<img src="https://source.unsplash.com/user/josilito/200x200" class="rounded" width="80">
<div class="body">
<span class="title">Title</span>
<span class="subtitle">Subtitle</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
<div class="item">
<img src="https://source.unsplash.com/user/cosmictimetraveler/200x200" class="rounded" width="80">
<div class="body">
<span class="title">Title</span>
<span class="subtitle">Subtitle</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
<div class="item">
<img src="https://source.unsplash.com/user/aahubs/200x200" class="rounded" width="80">
<div class="body">
<span class="title">Title</span>
<span class="subtitle">Subtitle</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>
</div>
<div class="col-xs-16 col-lg-7 offset-lg-9">
<div class="list divided">
<div class="item">
<img src="https://source.unsplash.com/user/josilito/200x200" class="avatar" width="80">
<div class="body">
<a href="javascript:" class="title">Title</a>
<span class="subtitle">Subtitle</span>
Lorem ipsum dolor sit amet consectetur.
</div>
<div class="actions">
<div class="buttons mini">
<div class="dropdown bottom right mini">
<a tabindex="0" class="button toggle">
<span class="material-icons">keyboard_arrow_down</span>
</a>
<ul class="menu">
<li class="item"><a href="javascript:">Dropdown 1</a></li>
<li class="item"><a href="javascript:">Dropdown 2</a></li>
<li class="item"><a href="javascript:">Dropdown 3</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="item">
<img src="https://source.unsplash.com/user/cosmictimetraveler/200x200" class="avatar" width="80">
<div class="body">
<a href="javascript:" class="title">Title</a>
<span class="subtitle">Subtitle</span>
Lorem ipsum dolor sit amet consectetur.
</div>
<div class="actions">
<div class="buttons mini">
<div class="dropdown bottom right mini">
<a tabindex="0" class="button toggle">
<span class="material-icons">keyboard_arrow_down</span>
</a>
<ul class="menu">
<li class="item"><a href="javascript:">Dropdown 1</a></li>
<li class="item"><a href="javascript:">Dropdown 2</a></li>
<li class="item"><a href="javascript:">Dropdown 3</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="item">
<img src="https://source.unsplash.com/user/aahubs/200x200" class="avatar" width="80">
<div class="body">
<a href="javascript:" class="title">Title</a>
<span class="subtitle">Subtitle</span>
Lorem ipsum dolor sit amet consectetur.
</div>
<div class="actions">
<div class="buttons mini">
<div class="dropdown bottom right mini">
<a tabindex="0" class="button toggle">
<span class="material-icons">keyboard_arrow_down</span>
</a>
<ul class="menu">
<li class="item"><a href="javascript:">Dropdown 1</a></li>
<li class="item"><a href="javascript:">Dropdown 2</a></li>
<li class="item"><a href="javascript:">Dropdown 3</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="content">
<table class="table mt-50">
<thead>
<tr>
<th style="width: 50%;">Props</th>
<th>Default Class Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>Container</td>
<td><code>.list</code></td>
</tr>
<tr>
<td>List Items</td>
<td><code>.item</code></td>
</tr>
<tr>
<td>Avtive Item</td>
<td><code>.active</code></td>
</tr>
<tr>
<td>List Item Body</td>
<td><code>.body</code></td>
</tr>
<tr>
<td>List Item Title</td>
<td><code>.title</code></td>
</tr>
<tr>
<td>List Item Subtitle</td>
<td><code>.subtitle</code></td>
</tr>
<tr>
<td>List Item Actions</td>
<td><code>.actions</code></td>
</tr>
<tr>
<td>Divided List</td>
<td><code>.divided</code></td>
</tr>
<tr>
<td>Hovered List</td>
<td><code>.hovered</code></td>
</tr>
<tr>
<td>Striped List</td>
<td><code>.striped</code></td>
</tr>
</tbody>
</table>
</div>
</div>
<h2>Menu</h2>
<div class="pure panel reset">
<div class="content">
<div class="row">
<div class="col-sm-16 col-xs-16 col-lg-8">
<div class="menu">
<div class="title">Menu</div>
<div class="item">
<a href="javascript:" class="active">
Active Menu Item
</a>
</div>
<div class="item disabled">
<a href="javascript:">
Disabled Menu Item
</a>
<div class="badge warning">
63
</div>
</div>
<div class="item">
<a href="javascript:">
Notifications
</a>
<div class="badge">
85
</div>
</div>
</div>
</div>
<div class="col-sm-16 col-xs-16 col-lg-8">
<div class="menu divided">
<div class="title">Divided Menu</div>
<div class="item">
<a href="javascript:">
<span class="material-icons">person</span> My profile
</a>
</div>
<div class="item">
<a href="javascript:">
<span class="material-icons">email</span> Mail
</a>
<div class="badge">
63
</div>
</div>
<div class="item">
<a href="javascript:">
<span class="material-icons">notifications_active</span> Notifications
</a>
<div class="badge primary">
85
</div>
</div>
</div>
</div>
<div class="col-sm-16 col-xs-16 col-lg-8">
<div class="pure menu divided">
<div class="title">Pure Menu</div>
<div class="item">
<a href="javascript:">
<span class="material-icons">person</span> My profile
</a>
</div>
<div class="item">
<a href="javascript:">
<span class="material-icons">email</span> Mail
</a>
<div class="badge dark">
63
</div>
</div>
<div class="item">
<a href="javascript:">
<span class="material-icons">notifications_active</span> Notifications
</a>
<div class="badge dark">
85
</div>
</div>
</div>
</div>
<div class="col-sm-16 col-xs-16 col-lg-8">
<div class="pure small menu">
<div class="title">Pure Small Menu</div>
<div class="item">
<a href="javascript:">
<span class="material-icons">person</span> My profile
</a>
</div>
<div class="item">
<a href="javascript:">
<span class="material-icons">email</span> Mail
</a>
<div class="badge dark">
63
</div>
</div>
<div class="item">
<a href="javascript:">
<span class="material-icons">notifications_active</span> Notifications
</a>
<div class="badge dark">
85
</div>
</div>
</div>
</div>
</div>
</div>
<div class="content">
<div class="code-toolbar"><pre class=" language-markup"><code class=" language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>menu<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Menu<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>active<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
Item
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
Item
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
Item
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre><div class="toolbar"><div class="toolbar-item"><button type="button">Copy</button></div></div></div>
</div>
<div class="content">
<table class="table mt-50">
<thead>
<tr>
<th style="width: 50%;">Props</th>
<th>Default Class Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>Container</td>
<td><code>.menu</code></td>
</tr>
<tr>
<td>Small Menu</td>
<td><code>.small</code></td>
</tr>
<tr>
<td>Divided Menu</td>
<td><code>.divided</code></td>
</tr>
<tr>
<td>Menu Item</td>
<td><code>.item</code></td>
</tr>
<tr>
<td>Menu Title</td>
<td><code>.title</code></td>
</tr>
<tr>
<td>Active Item</td>
<td><code>.active</code></td>
</tr>
<tr>
<td>Disabled Item</td>
<td><code>.disabled</code></td>
</tr>
<tr>
<td>Menu Badge</td>
<td><code>.badge</code></td>
</tr>
</tbody>
</table>
</div>
</div>
<h2>Navbar</h2>
<div class="pure panel reset">
<div class="content">
<div class="alert center align mb-30">
To see the responsive hamburger menu, please check the main menu of the page.
</div>
<header class="navbar shadowed">
<div class="container">
<section class="brand">
<a href="javascript:">
<img src="http://punica.site/sites/punica/themes/punica/assets/images/logo.png" class="filter-invert">
</a>
</section>
<section class="links">
<div class="section">
<div class="buttons">
<div class="dropdown">
<a class="button toggle" tabindex="0">
Item <span class="material-icons">keyboard_arrow_down</span>
</a>
<ul class="menu">
<li class="item"><a href="javascript:">Link 1</a></li>
<li class="item"><a href="javascript:">Link 2</a></li>
</ul>
</div>
</div>
</div>
<div class="section">
<div class="buttons">
<a href="javascript:" class="button">
<span class="material-icons">person</span>
</a>
</div>
<div class="form">
<div class="group">
<input type="text" name="query" placeholder="search..." id="query">
<button class="button primary">
<i class="material-icons">search</i>
</button>
</div>
</div>
</div>
</section>
</div>
</header>
</div>
<div class="content">
<p>
If you want a light or dark navbar, just add the <code>.light</code> or <code>.dark</code> class to <code>.navbar</code>.
</p>
</div>
<div class="content">
<header class="navbar light shadowed bordered">
<div class="container">
<section class="brand">
<a href="javascript:">
<img src="http://punica.site/sites/punica/themes/punica/assets/images/logo.png" class="filter-invert">
</a>
</section>
<section class="links">
<div class="section">
<div class="buttons">
<div class="dropdown">
<a class="button toggle" tabindex="0">
Item <span class="material-icons">keyboard_arrow_down</span>
</a>
<ul class="menu">
<li class="item"><a href="javascript:">Link 1</a></li>
<li class="item"><a href="javascript:">Link 2</a></li>
</ul>
</div>
</div>
</div>
<div class="section">
<div class="buttons">
<a href="javascript:" class="button">
<span class="material-icons">person</span>
</a>
</div>
<div class="form">
<div class="group">
<input type="text" name="query" placeholder="search..." id="query">
<button class="button dark">
<i class="material-icons">search</i>
</button>
</div>
</div>
</div>
</section>
</div>
</header>
</div>
<div class="content">
<header class="navbar dark shadowed">
<div class="container">
<section class="brand">
<a href="javascript:">
<img src="http://punica.site/sites/punica/themes/punica/assets/images/logo.png" class="filter-invert">
</a>
</section>
<section class="links">
<div class="section">
<div class="buttons">
<div class="dropdown">
<a class="button toggle" tabindex="0">
Item <span class="material-icons">keyboard_arrow_down</span>
</a>
<ul class="menu">
<li class="item"><a href="javascript:">Link 1</a></li>
<li class="item"><a href="javascript:">Link 2</a></li>
</ul>
</div>
</div>
</div>
<div class="section">
<div class="buttons">
<a href="javascript:" class="button">
<span class="material-icons">person</span>
</a>
</div>
<div class="form">
<div class="group">
<input type="text" name="query" placeholder="search..." id="query">
<button class="button dark">
<i class="material-icons">search</i>
</button>
</div>
</div>
</div>
</section>
</div>
</header>
</div>
<div class="content">
<div class="code-toolbar"><pre class=" language-markup"><code class=" language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>navbar light shadowed<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token comment"><!-- responsive hamburger menu --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>burger<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>burger<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>burger<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
<span class="token comment"><!-- /responsive hamburger menu--></span>
<span class="token comment"><!-- navbar brand --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>brand<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span>
<span class="token comment"><!-- navbar links --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>links<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>section<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>buttons<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dropdown<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button toggle<span class="token punctuation">"</span></span> <span class="token attr-name">tabindex</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
Item <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>material-icons<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>keyboard_arrow_down<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>menu<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Link 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Link 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>section<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>buttons<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>material-icons<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>person<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>form<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>group<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>query<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>search...<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>query<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button dark<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>material-icons<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>search<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>i</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span class="token punctuation">></span></span></code></pre><div class="toolbar"><div class="toolbar-item"><button type="button">Copy</button></div></div></div>
</div>
<!-- Navbar sizes -->
<div class="header mt-100">
<span class="h3">Sizes</span>
</div>
<div class="content">
<p>
Add the <code>.mini</code> or <code>.small</code> class to a <code>.navbar</code> to make it smaller. It's that easy!
</p>
</div>
<!-- mini navbar -->
<div class="content">
<header class="navbar dark mini shadowed">
<div class="container">
<section class="brand">
<a href="javascript:">
Mini Navbar
</a>
</section>
<section class="links">
<div class="section justify-content-flex-end">
<div class="buttons">
<a href="javascript:" class="button">Developers</a>
<div class="dropdown bottom right large">
<a class="button toggle" tabindex="0">
Documentation <span class="material-icons">keyboard_arrow_down</span>
</a>
<ul class="menu">
<li class="item"><a href="javascript:">Lorem ipsum dolor</a></li>
<li class="item"><a href="javascript:">Lorem ipsum dolor</a></li>
</ul>
</div>
<a href="javascript:" class="button">
<span class="material-icons">person</span>
</a>
</div>
<a href="javascript:" class="button primary radius-500 ml-10">Signin</a>
</div>
</section>
</div>
</header>
</div>
<!-- small navbar -->
<div class="content">
<header class="navbar small shadowed">
<div class="container">
<section class="brand">
<a href="javascript:">
Small Navbar
</a>
</section>
<section class="links">
<div class="section justify-content-flex-end">
<div class="buttons">
<a href="javascript:" class="button">Developers</a>
<div class="dropdown bottom right large">
<a class="button toggle" tabindex="0">
Documentation <span class="material-icons">keyboard_arrow_down</span>
</a>
<ul class="menu">
<li class="item"><a href="javascript:">Lorem ipsum dolor</a></li>
<li class="item"><a href="javascript:">Lorem ipsum dolor</a></li>
</ul>
</div>
<a href="javascript:" class="button">
<span class="material-icons">person</span>
</a>
</div>
<a href="javascript:" class="button primary radius-500 ml-10">Signin</a>
</div>
</section>
</div>
</header>
</div>
<!-- default navbar -->
<div class="content">
<header class="navbar light shadowed bordered">
<div class="container">
<section class="brand">
<a href="javascript:">
Default Navbar
</a>
</section>
<section class="links">
<div class="section justify-content-flex-end">
<div class="buttons">
<a href="javascript:" class="button">Developers</a>
<div class="dropdown bottom right large">
<a class="button toggle" tabindex="0">
Documentation <span class="material-icons">keyboard_arrow_down</span>
</a>
<ul class="menu">
<li class="item"><a href="javascript:">Lorem ipsum dolor</a></li>
<li class="item"><a href="javascript:">Lorem ipsum dolor</a></li>
</ul>
</div>
<a href="javascript:" class="button">
<span class="material-icons">person</span>
</a>
</div>
<a href="javascript:" class="button primary radius-500 ml-10">Signin</a>
</div>
</section>
</div>
</header>
</div>
<!-- Divided Navbar -->
<div class="header mt-100">
<span class="h3">Divided Navbar</span>
</div>
<div class="content">
<header class="navbar mini divided shadowed">
<div class="container">
<section class="brand mr-50">
<a href="javascript:">
Divided
</a>
</section>
<section class="links ml-75">
<div class="section">
<div class="buttons">
<a href="javascript:" class="button">Home</a>
<div class="dropdown">
<a class="button toggle" tabindex="0">
Features <span class="material-icons">keyboard_arrow_down</span>
</a>
<ul class="menu">
<li class="item"><a href="javascript:">Lorem ipsum dolor</a></li>
<li class="item"><a href="javascript:">Lorem ipsum dolor</a></li>
</ul>
</div>
<a href="javascript:" class="button">Pricing</a>
</div>
</div>
<div class="section">
<div class="buttons">
<a href="javascript:" class="button">
<span class="material-icons">person</span>
</a>
<a href="javascript:" class="button">
<span class="material-icons">settings</span>
</a>
</div>
</div>
</section>
</div>
</header>
</div>
<div class="content">
<header class="navbar light small divided shadowed">
<div class="container">
<section class="brand mr-50">
<a href="javascript:">
Divided
</a>
</section>
<section class="links ml-75">
<div class="section">
<div class="buttons">
<a href="javascript:" class="button">Home</a>
<div class="dropdown">
<a class="button toggle" tabindex="0">
Features <span class="material-icons">keyboard_arrow_down</span>
</a>
<ul class="menu">
<li class="item"><a href="javascript:">Lorem ipsum dolor</a></li>
<li class="item"><a href="javascript:">Lorem ipsum dolor</a></li>
</ul>
</div>
<a href="javascript:" class="button">Pricing</a>
</div>
</div>
<div class="section">
<div class="buttons">
<a href="javascript:" class="button">
<span class="material-icons">person</span>
</a>
<a href="javascript:" class="button">
<span class="material-icons">settings</span>
</a>
</div>
</div>
</section>
</div>
</header>
</div>
<div class="content">
<header class="navbar dark divided shadowed">
<div class="container">
<section class="brand mr-50">
<a href="javascript:">
Divided
</a>
</section>
<section class="links ml-75">
<div class="section">
<div class="buttons">
<a href="javascript:" class="button">Home</a>
<div class="dropdown">
<a class="button toggle" tabindex="0">
Features <span class="material-icons">keyboard_arrow_down</span>
</a>
<ul class="menu">
<li class="item"><a href="javascript:">Lorem ipsum dolor</a></li>
<li class="item"><a href="javascript:">Lorem ipsum dolor</a></li>
</ul>
</div>
<a href="javascript:" class="button">Pricing</a>
</div>
</div>
<div class="section">
<div class="buttons">
<a href="javascript:" class="button">
<span class="material-icons">person</span>
</a>
<a href="javascript:" class="button">
<span class="material-icons">settings</span>
</a>
</div>
</div>
</section>
</div>
</header>
</div>
<div class="content mt-40">
<div class="code-toolbar"><pre class=" language-markup"><code class=" language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>navbar divided<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
...
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre><div class="toolbar"><div class="toolbar-item"><button type="button">Copy</button></div></div></div>
</div>
<!-- info -->
<div class="content">
<table class="table mt-50">
<thead>
<tr>
<th style="width: 50%;">Props</th>
<th>Default Class Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>Container</td>
<td><code>.navbar</code></td>
</tr>
<tr>
<td>Navbar Sections</td>
<td><code>.section</code></td>
</tr>
<tr>
<td>Navbar Links</td>
<td><code>.links</code></td>
</tr>
<tr>
<td>Navbar Link Items</td>
<td><code>.buttons</code> or <code>.button</code></td>
</tr>
<tr>
<td>Navbar Brand</td>
<td><code>.brand</code></td>
</tr>
<tr>
<td>Navbar Dropdown Item</td>
<td><code>.dropdown</code></td>
</tr>
<tr>
<td>Divided Navbar Items</td>
<td><code>.divided</code></td>
</tr>
<tr>
<td>Navbar Burger Menu</td>
<td><code>.burger</code></td>
</tr>
<tr>
<td>Navbar Spacer (if navbar is fixed)</td>
<td><code>.navbar-spacer</code></td>
</tr>
</tbody>
</table>
<table class="table">
<thead>
<tr>
<th style="width: 50%;">Styles & States</th>
<th>Default Class Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>Light</td>
<td><code>.light</code></td>
</tr>
<tr>
<td>Dark</td>
<td><code>.dark</code></td>
</tr>
<tr>
<td>Fixed</td>
<td><code>.fixed</code></td>
</tr>
<tr>
<td>Navbar with Shadow</td>
<td><code>.shadowed</code></td>
</tr>
</tbody>
</table>
<table class="table">
<thead>
<tr>
<th>Spacers</th>
<th>Default Class Name</th>
<th>Property</th>
<th>Default value</th>
</tr>
</thead>
<tbody>
<tr>
<td>Default</td>
<td><code>.navbar-spacer</code></td>
<td><code>margin-top</code></td>
<td><code>120px</code></td>
</tr>
<tr>
<td>Mini</td>
<td><code>.navbar-spacer-mini</code></td>
<td><code>margin-top</code></td>
<td><code>80px</code></td>
</tr>
<tr>
<td>Small</td>
<td><code>.navbar-spacer-small</code></td>
<td><code>margin-top</code></td>
<td><code>100px</code></td>
</tr>
</tbody>
</table>
<table class="table">
<thead>
<tr>
<th style="width: 50%;">Sizes</th>
<th>Default Class Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mini</td>
<td><code>.mini</code></td>
</tr>
<tr>
<td>Small</td>
<td><code>.small</code></td>
</tr>
</tbody>
</table>
</div>
</div>
<h2>Pagination</h2>
<div class="pure panel reset">
<div class="content center align">
<div class="buttons">
<a class="button" href="javascript:">
<span class="material-icons">keyboard_arrow_left</span>
</a>
<a class="button" href="javascript:">1</a>
<a class="button active" href="javascript:">2</a>
<a class="button" href="javascript:">3</a>
<div class="dropdown top right">
<a tabindex="0" class="button toggle">
<span class="material-icons">keyboard_arrow_up</span>
</a>
<ul class="menu">
<div class="title">Per Page</div>
<li class="item"><a href="#">10 items</a></li>
<li class="item"><a href="#">20 items</a></li>
<li class="item"><a href="#">30 items</a></li>
</ul>
</div>
<a class="button" href="javascript:">56</a>
<a class="button" href="javascript:">57</a>
<a class="button" href="javascript:">58</a>
<a class="button" href="javascript:">
<span class="material-icons">keyboard_arrow_right</span>
</a>
</div>
</div>
<div class="content pt-0 center align">
<div class="buttons primary">
<a class="button" href="javascript:">
<span class="material-icons">keyboard_arrow_left</span>
</a>
<a class="button" href="javascript:">1</a>
<a class="button active" href="javascript:">2</a>
<a class="button" href="javascript:">3</a>
<button class="button inactive">
<span class="material-icons">
settings_ethernet
</span>
</button>
<a class="button" href="javascript:">56</a>
<a class="button" href="javascript:">57</a>
<a class="button" href="javascript:">58</a>
<a class="button" href="javascript:">
<span class="material-icons">keyboard_arrow_right</span>
</a>
</div>
</div>
<div class="content pt-0 center align">
<div class="buttons">
<a class="button warning" href="javascript:">
<span class="material-icons">keyboard_arrow_left</span>
</a>
<a class="button" href="javascript:">1</a>
<a class="button active" href="javascript:">2</a>
<a class="button" href="javascript:">3</a>
<button class="button inactive">...</button>
<a class="button" href="javascript:">56</a>
<a class="button" href="javascript:">57</a>
<a class="button" href="javascript:">58</a>
<a class="button warning" href="javascript:">
<span class="material-icons">keyboard_arrow_right</span>
</a>
</div>
</div>
<div class="content">
<div class="code-toolbar"><pre class=" language-markup"><code class=" language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>buttons<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>material-icons<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>keyboard_arrow_left<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button active<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button inactive<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>56<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>57<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>58<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>material-icons<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>keyboard_arrow_right<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre><div class="toolbar"><div class="toolbar-item"><button type="button">Copy</button></div></div></div>
</div>
<div class="header mt-100">
<div class="h3">Pagination Sizes</div>
</div>
<div class="content">
<p>
Also, add the <code>.tiny, .mini, .small, .large</code> or <code>.huge</code> class to <code>.buttons</code> to make it smaller or larger pagination.
</p>
</div>
<div class="content center align">
<div class="buttons tiny">
<a class="button" href="javascript:">
<span class="material-icons">keyboard_arrow_left</span>
</a>
<a class="button" href="javascript:">1</a>
<a class="button active" href="javascript:">2</a>
<a class="button" href="javascript:">3</a>
<button class="button inactive">...</button>
<a class="button" href="javascript:">56</a>
<a class="button" href="javascript:">57</a>
<a class="button" href="javascript:">58</a>
<a class="button" href="javascript:">
<span class="material-icons">keyboard_arrow_right</span>
</a>
</div>
<p></p>
<div class="buttons mini">
<a class="button" href="javascript:">
<span class="material-icons">keyboard_arrow_left</span>
</a>
<a class="button" href="javascript:">1</a>
<a class="button active" href="javascript:">2</a>
<a class="button" href="javascript:">3</a>
<button class="button inactive">...</button>
<a class="button" href="javascript:">56</a>
<a class="button" href="javascript:">57</a>
<a class="button" href="javascript:">58</a>
<a class="button" href="javascript:">
<span class="material-icons">keyboard_arrow_right</span>
</a>
</div>
<p></p>
<div class="buttons small">
<a class="button" href="javascript:">
<span class="material-icons">keyboard_arrow_left</span>
</a>
<a class="button" href="javascript:">1</a>
<a class="button active" href="javascript:">2</a>
<a class="button" href="javascript:">3</a>
<button class="button inactive">...</button>
<a class="button" href="javascript:">56</a>
<a class="button" href="javascript:">57</a>
<a class="button" href="javascript:">58</a>
<a class="button" href="javascript:">
<span class="material-icons">keyboard_arrow_right</span>
</a>
</div>
<p></p>
<div class="buttons primary">
<a class="button" href="javascript:">
<span class="material-icons">keyboard_arrow_left</span>
</a>
<a class="button" href="javascript:">1</a>
<a class="button active" href="javascript:">2</a>
<a class="button" href="javascript:">3</a>
<button class="button inactive">...</button>
<a class="button" href="javascript:">56</a>
<a class="button" href="javascript:">57</a>
<a class="button" href="javascript:">58</a>
<a class="button" href="javascript:">
<span class="material-icons">keyboard_arrow_right</span>
</a>
</div>
<p></p>
<div class="buttons large">
<a class="button error" href="javascript:">
<span class="material-icons">keyboard_arrow_left</span>
</a>
<a class="button" href="javascript:">1</a>
<a class="button active" href="javascript:">2</a>
<a class="button" href="javascript:">3</a>
<button class="button inactive">...</button>
<a class="button" href="javascript:">56</a>
<a class="button" href="javascript:">57</a>
<a class="button" href="javascript:">58</a>
<a class="button error" href="javascript:">
<span class="material-icons">keyboard_arrow_right</span>
</a>
</div>
<p></p>
<div class="buttons huge">
<a class="button dark" href="javascript:">
<span class="material-icons">keyboard_arrow_left</span>
</a>
<a class="button" href="javascript:">1</a>
<a class="button active" href="javascript:">2</a>
<a class="button" href="javascript:">3</a>
<button class="button inactive">...</button>
<a class="button" href="javascript:">56</a>
<a class="button" href="javascript:">57</a>
<a class="button" href="javascript:">58</a>
<a class="button dark" href="javascript:">
<span class="material-icons">keyboard_arrow_right</span>
</a>
</div>
</div>
<div class="content">
<div class="code-toolbar"><pre class=" language-markup"><code class=" language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>buttons tiny<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>material-icons<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>keyboard_arrow_left<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
...
...
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre><div class="toolbar"><div class="toolbar-item"><button type="button">Copy</button></div></div></div>
</div>
</div>
<h2>Panel</h2>
<div class="content">
<div class="row">
<div class="col-sm-16 col-xs-16 col-lg-6">
<div class="panel">
<div class="header">
<div class="title">Title</div>
<div class="actions">Actions</div>
</div>
<div class="content">
<div class="headline">
Headline
</div>
<p>Content</p>
</div>
<div class="bottom">
Bottom
<div class="actions">
Actions
</div>
</div>
</div>
</div>
<div class="col-sm-16 col-xs-16 col-lg-8 offset-lg-8">
<div class="code-toolbar"><pre class=" language-markup"><code class=" language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>panel<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>header<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Title<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>actions<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Actions<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>content<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>headline<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Headline<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Content<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bottom<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
Bottom
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>actions<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Actions<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre><div class="toolbar"><div class="toolbar-item"><button type="button">Copy</button></div></div></div>
</div>
</div>
</div>
<h2>Process</h2>
<div class="pure panel reset">
<div class="content mt-50">
<div class="process">
<div class="item">
<a href="javascript:">Planning</a>
</div>
<div class="item">
<a href="javascript:">Design</a>
</div>
<div class="item">
<a href="javascript:">Content</a>
</div>
<div class="item">
<a href="javascript:">Coding</a>
</div>
<div class="item active">
<a href="javascript:">Testing</a>
</div>
<div class="item">
<a href="javascript:">Maintenance</a>
</div>
</div>
</div>
<div class="content">
<div class="process success">
<div class="item">
<a href="javascript:">Prewriting</a>
</div>
<div class="item active">
<a href="javascript:">Research</a>
</div>
<div class="item">
<a href="javascript:">Drafting</a>
</div>
<div class="item">
<a href="javascript:">Revising</a>
</div>
<div class="item">
<a href="javascript:">Editing</a>
</div>
<div class="item">
<a href="javascript:">Publishing</a>
</div>
</div>
</div>
<div class="content">
<div class="process error">
<div class="item">
<a href="javascript:">Prewriting</a>
</div>
<div class="item">
<a href="javascript:">Research</a>
</div>
<div class="item">
<a href="javascript:">Drafting</a>
</div>
<div class="item active">
<a href="javascript:">Revising</a>
</div>
<div class="item">
<a href="javascript:">Editing</a>
</div>
<div class="item">
<a href="javascript:">Publishing</a>
</div>
</div>
</div>
<div class="content">
<div class="process dark">
<div class="item">
<a href="javascript:">Step 1</a>
</div>
<div class="item">
<a href="javascript:">Step 2</a>
</div>
<div class="item active">
<a href="javascript:">Step 3</a>
</div>
<div class="item">
<a href="javascript:">Step 4</a>
</div>
</div>
</div>
<div class="content">
<div class="code-toolbar"><pre class=" mt-30 language-markup"><code class=" mt-30 language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>process<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Step 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item active<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Step 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
...
...
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre><div class="toolbar"><div class="toolbar-item"><button type="button">Copy</button></div></div></div>
</div>
<div class="header mt-100">
<div class="h3">
Vertical Process
</div>
</div>
<div class="content">
<p>
Also, just add the <code>.vertical</code> class to <code>.process</code> to make it vertical style. It's that easy!
</p>
<div class="alert">
Vertical style is also used for mobile devices.
</div>
<div class="row">
<div class="col-sm-16 col-xs-16 col-lg-8">
<div class="process vertical">
<div class="item">
<a href="javascript:">Planning</a>
</div>
<div class="item">
<a href="javascript:">Design</a>
</div>
<div class="item">
<a href="javascript:">Content</a>
</div>
<div class="item">
<a href="javascript:">Coding</a>
</div>
<div class="item active">
<a href="javascript:">Testing</a>
</div>
<div class="item">
<a href="javascript:">Maintenance</a>
</div>
</div>
</div>
<div class="col-sm-16 col-xs-16 col-lg-8">
<div class="code-toolbar"><pre class=" mt-30 language-markup"><code class=" mt-30 language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>process vertical<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Step 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item active<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Step 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
...
...
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre><div class="toolbar"><div class="toolbar-item"><button type="button">Copy</button></div></div></div>
</div>
</div>
</div>
<div class="header mt-100">
<div class="h3">
Reversed Vertical Process
</div>
</div>
<div class="content">
<p>
And also, you can reverse the items of process using by <code>.reversed</code> class.
</p>
<div class="row">
<div class="col-sm-16 col-xs-16 col-lg-8">
<div class="reversed vertical success process">
<div class="item">
<a href="javascript:">Planning</a>
</div>
<div class="item">
<a href="javascript:">Design</a>
</div>
<div class="item active">
<a href="javascript:">Content</a>
</div>
<div class="item">
<a href="javascript:">Coding</a>
</div>
<div class="item">
<a href="javascript:">Testing</a>
</div>
<div class="item">
<a href="javascript:">Maintenance</a>
</div>
</div>
</div>
<div class="col-sm-16 col-xs-16 col-lg-8">
<div class="code-toolbar"><pre class=" mt-30 language-markup"><code class=" mt-30 language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>reversed vertical success process<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Step 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item active<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Step 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
...
...
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre><div class="toolbar"><div class="toolbar-item"><button type="button">Copy</button></div></div></div>
</div>
</div>
</div>
<div class="content">
<table class="table mt-50">
<thead>
<tr>
<th style="width: 50%;">Props</th>
<th>Default Class Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>Container</td>
<td><code>.process</code></td>
</tr>
<tr>
<td>Process Item</td>
<td><code>.item</code></td>
</tr>
<tr>
<td>Active Item</td>
<td><code>.active</code></td>
</tr>
<tr>
<td>Vertical Style</td>
<td><code>.vertical</code></td>
</tr>
</tbody>
</table>
<table class="table">
<thead>
<tr>
<th style="width: 50%;">Positions</th>
<th>Default Class Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>Horizontal (default)</td>
<td>-</td>
</tr>
<tr>
<td>Vertical</td>
<td><code>.vertical</code></td>
</tr>
<tr>
<td>Reversed Vertical</td>
<td><code>.reversed</code></td>
</tr>
</tbody>
</table>
<table class="table">
<thead>
<tr>
<th style="width: 50%;">Styles</th>
<th>Default Class Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>Primary (default)</td>
<td>-</td>
</tr>
<tr>
<td>Success</td>
<td><code>.success</code></td>
</tr>
<tr>
<td>Warning</td>
<td><code>.warning</code></td>
</tr>
<tr>
<td>Error</td>
<td><code>.error</code></td>
</tr>
<tr>
<td>Dark</td>
<td><code>.dark</code></td>
</tr>
</tbody>
</table>
</div>
</div>
<h2>Progress</h2>
<progress class="progress" value="40" max="100"></progress>
<progress class="progress success" value="55" max="100"></progress>
<progress class="progress warning" value="65" max="100"></progress>
<progress class="progress error" value="75" max="100"></progress>
<progress class="progress dark" value="75" max="100"></progress>
<h2>Tabnav</h2>
<div class="pure panel reset">
<div class="content">
<div class="tab">
<div class="button">Item</div>
<div class="button active">Active <span class="badge small primary ml-10">45</span></div>
<div class="button disabled">Disabled</div>
<div class="spacer"></div>
<div class="button">
<i class="material-icons mr-5">add</i> Add
</div>
<div class="buttons">
<div class="dropdown bottom right">
<a tabindex="0" class="button active toggle">
Options <span class="material-icons ml-5">keyboard_arrow_down</span>
</a>
<ul class="menu">
<li class="item"><a href="#">Options 1</a></li>
<li class="item"><a href="#">Options 2</a></li>
<li class="item"><a href="#">Options 3</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="content">
<div class="tab success">
<div class="button">Item</div>
<div class="button active">Active <span class="badge small success ml-10">45</span></div>
<div class="button disabled">Disabled</div>
<div class="spacer"></div>
<div class="button">
<i class="material-icons mr-5">add</i> Add
</div>
<div class="buttons">
<div class="dropdown bottom right">
<a tabindex="0" class="button active toggle">
Options <span class="material-icons ml-5">keyboard_arrow_down</span>
</a>
<ul class="menu">
<li class="item"><a href="#">Options 1</a></li>
<li class="item"><a href="#">Options 2</a></li>
<li class="item"><a href="#">Options 3</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="content">
<div class="code-toolbar"><pre class=" mt-30 language-markup"><code class=" mt-30 language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tab<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Item<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button active<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Active <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>badge small primary ml-10<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>45<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button disabled<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Disabled<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>spacer<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>material-icons mr-5<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>add<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>i</span><span class="token punctuation">></span></span> Add
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>buttons<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dropdown bottom right<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">tabindex</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button active toggle<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
Options <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>material-icons ml-5<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>keyboard_arrow_down<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>menu<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Options 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Options 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Options 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre><div class="toolbar"><div class="toolbar-item"><button type="button">Copy</button></div></div></div>
</div>
<div class="borderless header mt-40">
<div class="title">
Bottom Position
</div>
</div>
<div class="content mt-30">
<div class="bottom warning tab">
<div class="button">Item</div>
<div class="button active">Active</div>
<div class="button disabled">Disabled</div>
<div class="spacer"></div>
<div class="button">
<i class="material-icons mr-5">add</i> Add
</div>
<div class="buttons">
<div class="dropdown bottom right">
<a tabindex="0" class="button active toggle">
Options <span class="material-icons ml-5">keyboard_arrow_down</span>
</a>
<ul class="menu">
<li class="item"><a href="#">Options 1</a></li>
<li class="item"><a href="#">Options 2</a></li>
<li class="item"><a href="#">Options 3</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="content">
<div class="bottom error tab">
<div class="button">Item</div>
<div class="button active">Active</div>
<div class="button disabled">Disabled</div>
<div class="spacer"></div>
<div class="button">
<i class="material-icons mr-5">add</i> Add
</div>
<div class="buttons">
<div class="dropdown bottom right">
<a tabindex="0" class="button active toggle">
Options <span class="material-icons ml-5">keyboard_arrow_down</span>
</a>
<ul class="menu">
<li class="item"><a href="#">Options 1</a></li>
<li class="item"><a href="#">Options 2</a></li>
<li class="item"><a href="#">Options 3</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="content">
<div class="code-toolbar"><pre class=" mt-30 language-markup"><code class=" mt-30 language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bottom error tab<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
...
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre><div class="toolbar"><div class="toolbar-item"><button type="button">Copy</button></div></div></div>
</div>
<!-- iconic tabs -->
<div class="borderless header mt-40 weight-700">
Iconic Tabs
</div>
<div class="content">
<div class="tab">
<a href="javascript:" class="button active">
<i class="material-icons">panorama_wide_angle</i>
</a>
<a href="javascript:" class="button">
<i class="material-icons">edit_location_alt</i>
</a>
<a href="javascript:" class="button">
<i class="material-icons">mail</i>
</a>
<a href="javascript:" class="button">
<i class="material-icons">shopping_cart</i>
</a>
<div class="spacer"></div>
<div class="buttons">
<div class="dropdown bottom right">
<a tabindex="0" class="button active toggle">
<i class="material-icons">settings</i> <span class="material-icons ml-5">keyboard_arrow_down</span>
</a>
<ul class="menu">
<li class="item"><a href="#">Item 1</a></li>
<li class="item"><a href="#">Item 2</a></li>
<li class="item"><a href="#">Item 3</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="content">
<div class="tab error">
<a href="javascript:" class="button">
<i class="material-icons">panorama_wide_angle</i>
</a>
<a href="javascript:" class="button">
<i class="material-icons">edit_location_alt</i>
</a>
<a href="javascript:" class="button active">
<i class="material-icons">mail</i>
</a>
<a href="javascript:" class="button">
<i class="material-icons">shopping_cart</i>
</a>
<div class="spacer"></div>
<div class="buttons">
<div class="dropdown bottom right">
<a tabindex="0" class="button active toggle">
<i class="material-icons">settings</i> <span class="material-icons ml-5">keyboard_arrow_down</span>
</a>
<ul class="menu">
<li class="item"><a href="#">Item 1</a></li>
<li class="item"><a href="#">Item 2</a></li>
<li class="item"><a href="#">Item 3</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- centered -->
<div class="borderless header mt-40 weight-700">
Centered Tabs
</div>
<div class="content">
<div class="centered tab">
<a href="javascript:" class="button active">
<i class="material-icons">panorama_wide_angle</i>
</a>
<a href="javascript:" class="button">
<i class="material-icons">edit_location_alt</i>
</a>
<a href="javascript:" class="button">
<i class="material-icons">mail</i>
</a>
<a href="javascript:" class="button">
<i class="material-icons">shopping_cart</i>
</a>
</div>
</div>
<div class="content">
<div class="centered tab">
<div class="button">Email</div>
<div class="button active">Notifications <span class="badge small primary ml-10">45</span></div>
<div class="button">Privacy</div>
<div class="button">Account Info</div>
</div>
</div>
<div class="content mt-30">
<div class="code-toolbar"><pre class=" language-markup"><code class=" language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>centered tab<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Email<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button active<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Notifications <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>badge small primary ml-10<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>45<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Privacy<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Account Info<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre><div class="toolbar"><div class="toolbar-item"><button type="button">Copy</button></div></div></div>
</div>
<!-- using helpers -->
<div class="header mt-100">
<span class="h3">Using helpers</span>
</div>
<div class="content">
<p>
You can modify tab view with the Punica's <a href="http://punica.site/base/helpers" class="weight-700" target="_blank">helper classes</a>.
</p>
<div class="tab bordered radius-4 shadowed mt-40">
<div class="button">Item</div>
<div class="button active">Active <span class="badge small primary ml-10">45</span></div>
<div class="button disabled">Disabled</div>
<div class="spacer"></div>
<div class="button">
<i class="material-icons mr-5">add</i> Add
</div>
<div class="buttons">
<div class="dropdown bottom right">
<a tabindex="0" class="button active toggle">
Options <span class="material-icons ml-5">keyboard_arrow_down</span>
</a>
<ul class="menu">
<li class="item"><a href="#">Options 1</a></li>
<li class="item"><a href="#">Options 2</a></li>
<li class="item"><a href="#">Options 3</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="content pt-0 mt-0">
<div class="tab error bordered radius-4 shadowed mt-40">
<a href="javascript:" class="button active">
<i class="material-icons">panorama_wide_angle</i>
</a>
<a href="javascript:" class="button">
<i class="material-icons">edit_location_alt</i>
</a>
<a href="javascript:" class="button">
<i class="material-icons">mail</i>
</a>
<a href="javascript:" class="button">
<i class="material-icons">shopping_cart</i>
</a>
<div class="spacer"></div>
<div class="buttons">
<div class="dropdown bottom right">
<a tabindex="0" class="button active toggle">
<i class="material-icons">settings</i> <span class="material-icons ml-5">keyboard_arrow_down</span>
</a>
<ul class="menu">
<li class="item"><a href="#">Item 1</a></li>
<li class="item"><a href="#">Item 2</a></li>
<li class="item"><a href="#">Item 3</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="content mt-30">
<div class="code-toolbar"><pre class=" language-markup"><code class=" language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tab bordered radius-4 shadowed<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
...
...
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre><div class="toolbar"><div class="toolbar-item"><button type="button">Copy</button></div></div></div>
</div>
<div class="content">
<table class="table mt-50">
<thead>
<tr>
<th style="width: 50%;">Props</th>
<th>Default Class Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>Container</td>
<td><code>.tab</code></td>
</tr>
<tr>
<td>Active Tab</td>
<td><code>.active</code></td>
</tr>
</tbody>
</table>
<table class="table">
<thead>
<tr>
<th style="width: 50%;">Positions</th>
<th>Default Class Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>Top (default)</td>
<td>-</td>
</tr>
<tr>
<td>Bottom</td>
<td><code>.bottom</code></td>
</tr>
</tbody>
</table>
<table class="table">
<thead>
<tr>
<th style="width: 50%;">Styles</th>
<th>Default Class Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>Primary (default)</td>
<td><code>-</code></td>
</tr>
<tr>
<td>Success</td>
<td><code>.success</code></td>
</tr>
<tr>
<td>Warning</td>
<td><code>.warning</code></td>
</tr>
<tr>
<td>Error</td>
<td><code>.error</code></td>
</tr>
<tr>
<td>Dark</td>
<td><code>.dark</code></td>
</tr>
</tbody>
</table>
</div>
</div>
<h2>Timeline</h2>
<div class="timeline">
<div class="activity">
<div class="type">
<span class="material-icons">lock</span>
</div>
<div class="date">12.12.2020</div>
<div class="author">John Doe,</div>
<div class="body">
Te vidisse cotidieque est, in adhuc honestatis his.
</div>
</div>
<div class="activity">
<div class="type primary">
<span class="material-icons">lock</span>
</div>
<div class="date">12.12.2020</div>
<div class="author">Jane Doe,</div>
<div class="body">
Te vidisse cotidieque est, in adhuc honestatis his.
</div>
</div>
<div class="activity">
<div class="type success">
<span class="material-icons">wifi_protected_setup</span>
</div>
<div class="body">
<a href="#1" class="weight-700">Jane Doe</a> aliquid consequat
<a href="#2">debitis eos.</a>
</div>
</div>
<div class="activity">
<div class="type warning">
<span class="material-icons">extension</span>
</div>
<div class="author">John Doe,</div>
<div class="body">
Oeehhh, that's awesome.. Me too!
</div>
<div class="date">12.12.2020</div>
</div>
<div class="activity">
<div class="type error">
<span class="material-icons">build</span>
</div>
<div class="author">Jane Doe,</div>
<div class="body">
Lorem ipsum dolor sit amet, eam ut singulis vituperata!
</div>
<div class="date">12.12.2020</div>
</div>
<div class="activity">
<div class="type dark">
<span class="material-icons">build</span>
</div>
<div class="author">John Doe,</div>
<div class="body">
Random words in front of other random words create a random sentence.
</div>
<div class="date">12.12.2020</div>
</div>
</div>
Scripts
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/codeforms/Punica-CSS-Framework@2.x.x/dist/punica.min.css" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
External Link for Punica pure CSS Framework
Add Comment
Other Items in css framework
Related Search Terms
Other Categories in Code
404 pages animation animations background effects boxes buttons css css & javascript css animation css animations css backgrounds css cursors css framework css frameworks css modal css positions css reset css shadows css slider css text effects css text formatting css tips css tools css z-index content slider cookie alerts design html css sections html canvas html sections icons image zoom interactive images lightbox link effects loading animation modals mouse effects navigation notifications parallax profiles quick css seo sections text ui web developer checklists animations backgrounds bootstrap buttons css css animated css animations css framework css grid footers forms html image effects images javascript scroll effects sections show your work svg text animation timeline
css animations
css animations
HTML Canvas
javascript