Posted in css framework
17258
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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/codeforms/Punica-CSS-Framework@2.x.x/dist/punica.min.css" crossorigin="anonymous">
 

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 &amp; 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">&lt;</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">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>Menu<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>
            Item
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>
            Item
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>
            Item
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</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">&lt;</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">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>

        <span class="token comment">&lt;!-- responsive hamburger menu --&gt;</span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
        <span class="token comment">&lt;!-- /responsive hamburger menu--&gt;</span>

        <span class="token comment">&lt;!-- navbar brand --&gt;</span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>section</span><span class="token punctuation">&gt;</span></span>

        <span class="token comment">&lt;!-- navbar links --&gt;</span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>
                            Item <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>keyboard_arrow_down<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>
                            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>Link 1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
                            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>Link 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>person<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>
                            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>search<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">&gt;</span></span>
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>section</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>header</span><span class="token punctuation">&gt;</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">&lt;</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">&gt;</span></span>
    ...
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</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 &amp; 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">&lt;</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">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>keyboard_arrow_left<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>56<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>57<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>58<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>keyboard_arrow_right<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</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">&lt;</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">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>keyboard_arrow_left<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
    ...
    ...
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</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">&lt;</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">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>Title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>Actions<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>Headline<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>Content<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>
        Bottom
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>Actions<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</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">&lt;</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">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>Step 1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>Step 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    ...
    ...
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</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">&lt;</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">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>Step 1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>Step 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    ...
    ...
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</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">&lt;</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">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>Step 1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>Step 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    ...
    ...
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</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">&lt;</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">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>Item<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>Active <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>45<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>Disabled<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>add<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">&gt;</span></span> Add
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>
                Options <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>keyboard_arrow_down<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>Options 1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>Options 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>Options 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</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">&lt;</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">&gt;</span></span>
    ...
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</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">&lt;</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">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>Email<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>Notifications <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>45<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>Privacy<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>Account Info<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</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">&lt;</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">&gt;</span></span>
    ...
    ...
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</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

No Items Found.

Add Comment
Type in a Nick Name here
 
Related Search Terms
Search Code
Search Code by entering your search text above.
Welcome to CSSBundle.com

Hi there and welcome to CSSBundle. Here at CSS Bundle we aim to find the best css and javascript bundles and demos and add them here to make them easy to find all in one place.

If you would like to stay up to date with our latest updates you can subscribe to our mailing list where we will send you one email per week with the latest updates, no spam emails just the latest updates.

Random Quote


Latest Code
css animations Falling Stars CSS Animation html Video different sources on screen sizes video embed html responsive css animations Animated Triangles on Canvas JS HTML HTML Canvas Instant colour fill with HTML Canvas javascript Transform Text into Images using SnapText JS CSS Tools Fancy Border Radius CSS Generator Tool - spin animation keyframes CSS Tools CSS Drop Filter Shadow Creator CSS Slider A CSS and HTML Only Carousel Slider CSS Z-Index Z-Index Code Front - CSS to change z-index when element is active sections section with image to the right text to the left gradient Sections Two Clickable Logo Promo Box Section Foundation HTML CSS Sections Inline Contact Form Formatting HTML CSS Sections Overview full width section in Poppins font with light gray background using foundation Interactive Images Map Image with Easy Dots and Titles using only CSS HTML Sections Social Header Links easy Drop in Code with Font Awesome Icons Sections Responsive Friendly Subscribe to our Newsletter Section CSS Tips Create a button with CSS, HTML and Center it! CSS Text Formatting Truncate Text to an amount of lines using line-clamp CSS Positions Item Positioning in CSS CSS Tips Draw a Circle in CSS css animations Magical Text Effect Bootstrap 4.2 Kitchen Sink CSS Frameworks Make your site look like windows 7 CSS Backgrounds Fancy up your banner image hero sections using overlay gradients CSS Modal Floating Modal Message Fixed on the Bottom of the Screen CSS Modal Create a modal with only CSS css grid display items in a css grid CSS Text Effects Using the selection selector to change the default highlight color Text Truncate your Text with CSS CSS Cursors Change your cursor into an Emoji Cursor or Image Cursor CSS How to Center Everything or Anything with CSS CSS Animations Smooth Scrolling with just CSS CSS Animations Radial Glow under cursor on box hover over effect CSS Shadows Using a filter drop shadow for transparent images CSS Animations Pure CSS 3D Flipping Book with Animations CSS Create a checkerboard background pattern with CSS CSS Animations button animations hover and fill animation CSS Animations button on focus swing animation CSS Animations Animated Button Border when Active Quick CSS create a border with top triangle in css CSS Animations Single Element CSS Spinners CSS Animations CSS Shake - Shake up your elements CSS Framework NES-style(8bit-like) CSS Framework CSS Tips Why to use a CSS Reset? Web Developer Checklists Front-End Checklist Icons Font Awesome Icons CSS Animation Animate Stuff with Animate.css CSS Animations Check Wave Click a Checkbox and Watch the Animation Animation Cloudy spiral animation with CSS3 Notifications Toast Messages and Notifications Standalone Library no JQuery - notify.js