Components Pure CSS components

All components are made purely with CSS, no Javascript needed. You can always added your own vanilla Javascript or a Javascript libarary to control these components further. No Javascript means no need for preloading components and will be ready for your users to use as soon as they show on the page.

Button Magic Pure CSS Button Components

Here you will see the code for button hover menus, button click menus and button groups. You have full control over these buttons from using the contextual colors for .btn classes to menu seperators and which side you want the menu to anchor too. Below you will see all the variations that are possible. All arrow icons are made with css and are not images or fonts for fast light weight loading.

WARNING: All Button Menus Need Unque ID Names

All buttons that have menus, need to have checkboxes with their own unique IDs. All click and hover buttons have two label tags with the for property that MUST match the checkbox ID of the button element they control.

Button with Click Activated Menu

The click button code below is used for all other buttons with menus by just adding a class. Learn more about other button menu types below.

Click Button
Example Code 
<div class="btn has-drop-menu">
	<input type="checkbox" id="button-click-1" class="drop-menu-input">
	<label for="button-click-1" class="menu-label"></label>
	Click Button <i class="arrow-down"></i>
	<label class="full-screen" for="button-click-1"></label>
	<ul class="drop-menu">
		<li><a href="#">Item 1</a></li>
		<li><a href="#">Item 2</a></li>
		<li><a href="#">Item 3</a></li>
	</ul>
</div>

Button with Hover Activated Menu

The code is the same as the click activated button above just add the .hover-menu class to the div with the .btn class.

Hover Button In Mobile Devices

The hover button will become a click on and off button under 1024px resolutions. Tablets and phones don't react well to hover menus so the menu converts to a click menu for a better touch experience.
Hover Button
Example Code 
<div class="btn has-drop-menu hover-menu">
	<input type="checkbox" id="button-hover-1" class="drop-menu-input">
	<label for="button-hover-1" class="menu-label"></label>
	Hover Button <i class="arrow-down"></i>
	<label class="full-screen" for="button-hover-1"></label>
	<ul class="drop-menu">
		<li><a href="#">Item 1</a></li>
		<li><a href="#">Item 2</a></li>
		<li><a href="#">Item 3</a></li>
	</ul>
</div>

Don't like the arrow Animation?

If you want to remove the drop down arrow animation add class.no-animation to the i tag like this: <i class="arrow-down no-animation"></i> or simply remove the <i class="arrow-down"></i> tag if you don't want an arrow at all.
No Arrow Animation

Using Contexual Colors for Buttons and Menu Separators

This is an example with the primary button color being used along with a separator set in the dropmenu and a menu link that is extra long. By default menus are set to extend to the right of the button.

Hover Button
Example Code 
<div class="btn primary has-drop-menu hover-menu">
	<input type="checkbox" id="button-hover-2" class="drop-menu-input">
	<label for="button-hover-2" class="menu-label"></label>
	Hover Button <i class="arrow-down"></i>
	<label class="full-screen" for="button-hover-2"></label>
	<ul class="drop-menu">
		<li><a href="#">Item 1</a></li>
		<li><a href="#">Item 2</a></li>
		<li class="sep"></li>
		<li><a href="#">Seperator</a></li>
		<li><a href="#">Second Item 1</a></li>
		<li><a href="#">Second Item with more text ....</a></li>
	</ul>
</div>

Menus set to overflow to left side

This is an example of the drop menu extending to the left instead of the right. Add .drop-menu-left to the ul tag <ul class="drop-menu drop-menu-left">.
This class works with both hover and click menu buttons.

Menu Left Side

Menus content scrollable

Sometimes you have too many items in a menu or just don't have the room. Add the class .auto-scroll to the ul tag <ul class="drop-menu auto-scroll"> to make the content scroll, the scroll kicks in at anything over height 150px.

Overflow Scrolling Menu

Menus set to appear on top

This is an example of the drop menu appearing on top of the button. Add .drop-menu-top to the btn containing
This class works with both hover and click menu buttons as shown below.

Hover Menu on Top
<div class="btn primary has-drop-menu hover-menu drop-menu-top">
Click Menu on Top
<div class="btn primary has-drop-menu drop-menu-top">

Button Groups

Below is an exampleof a button group where all buttons line up and have a 1px margin separator.

Button 1 Button 2
Hover Button
Example Code 
<div class="btn-group">
	<a href="#" class="btn">Button 1</a>
	<a href="#" class="btn">Button 2</a>
	<div class="btn has-drop-menu hover-menu">
		<input type="checkbox" id="button-hover-group" class="drop-menu-input">
		<label for="button-hover-group" class="menu-label"></label>
		Hover Button <i class="arrow-down"></i>
		<label class="full-screen" for="button-hover-group"></label>
		<ul class="drop-menu drop-menu-left">
			<li><a href="#">Item 1</a></li>
			<li><a href="#">Item 2</a></li>
			<li class="sep"></li>
			<li><a href="#">Seperator</a></li>
			<li><a href="#">Second Item 1</a></li>
			<li><a href="#">Second Item with more text ....</a></li>
		</ul>
	</div>
</div>
Button Group with Rounded Sides

Here is another example of a button group with rounded corners on the right and left sides. To create this simply add class .rounded-sides like this: <div class="btn-group btn-group rounded-sides">

Button 1 Button 2
Hover Button
Responsive Swipe to Scroll Button Group

To create this simply add a new DIV wrapping element to the button group div like this: <div class="responsive-btn-group">. To see it in action display this page in a mobile phone or shrink your desktop browser.

Warning

When using responsive button containers they will not be compatibale with hover or click drop down menus or tool tips as any overflow area will be hidden.
Button 1 Button 2 Button 3 Button 4 Button 5 Button 6 Button 7 Button 8

Tabs Pure CSS Tabs.

All tabs work with labels for buttons and radio inputs for active tabs that control the styles. You can also use contextual colors for the tabs if you so wish. You can add rounded edges to your tab buttons by adding .rounded-corners.

How To Add Tabs

  • You will need to manually add IDs for each radio button that must match the for attribute in each label tag tab.
  • Make sure all the radio buttons are in the same order (first radio button controls first label tab) in the code as the tabs that follow so the proper active state of the tab will match the opening information tab.
  • If you would like a certain tab opened on load of the page simply put the property checked on the input radio that matches the tab label.

Horizontal Responsive Tabs

The tab system is responsive and can support up to 20 horizontal tabs. If you have more tabs than the width of the screen in any view under 1024px you will be able to scroll through them. In all touch devices such as tablets and phones just swipe to make the tabs move left or right to see all options that maybe off the screen.

Information for tab 1

Another line of information.

Information for tab 2

Another line of information.

Information for tab 3

Another line of information.
Another line of information.

Information for tab 4

Another line of information.

Information for tab 5

Another line of information.

Information for tab 6

Another line of information.
Example Code 
<div class="tab-elements">
	<input type="radio" id="tab-1" name="tab-elements" checked>
	<input type="radio" id="tab-2" name="tab-elements">
	<input type="radio" id="tab-3" name="tab-elements">
	<input type="radio" id="tab-4" name="tab-elements">
	<input type="radio" id="tab-5" name="tab-elements">
	<input type="radio" id="tab-6" name="tab-elements">
	<div class="responsive-tabs">
		<div class="tab-btns">
			<label for="tab-1" class="btn">Tab 1</label>
			<label for="tab-2" class="btn">Tab 2</label>
			<label for="tab-3" class="btn">Tab 3</label>
			<label for="tab-4" class="btn">Tab 4</label>
			<label for="tab-5" class="btn">Tab 5</label>
			<label for="tab-6" class="btn">Tab 6 With Long Text</label>
		</div>
	</div>
	<div class="tab-info-wrap">
		<div class="tab-info">
			<h3>Information for tab 1</h3>
			Another line of information.
		</div>
		<div class="tab-info">
			<h3>Information for tab 2</h3>
			Another line of information.
		</div>
		<div class="tab-info">
			<h3>Information for tab 3</h3>
			Another line of information.
			<br>
			Another line of information.
		</div>
		<div class="tab-info">
			<h3>Information for tab 4</h3>
			Another line of information.
		</div>
		<div class="tab-info">
			<h3>Information for tab 5</h3>
			Another line of information.
		</div>
		<div class="tab-info">
			<h3>Information for tab 6</h3>
			Another line of information.
		</div>
	</div>
</div>

Line Tab Design

Same as the horizontal responsive tabs, just a different design.

Information for tab 1

Another line of information.

Information for tab 2

Another line of information.

Information for tab 3

Another line of information.
Another line of information.

Information for tab 4

Another line of information.

Information for tab 5

Another line of information.

Information for tab 6

Another line of information.
Example Code 
<div class="tab-elements line-tabs">
	<input type="radio" id="line-tab-1" name="line-tabs-elements" checked>
	<input type="radio" id="line-tab-2" name="line-tabs-elements">
	<input type="radio" id="line-tab-3" name="line-tabs-elements">
	<input type="radio" id="line-tab-4" name="line-tabs-elements">
	<input type="radio" id="line-tab-5" name="line-tabs-elements">
	<input type="radio" id="line-tab-6" name="line-tabs-elements">
	<div class="responsive-tabs">
		<div class="tab-btns">
			<label for="line-tab-1" class="btn">Tab 1
			<label for="line-tab-2" class="btn">Tab 2
			<label for="line-tab-3" class="btn">Tab 3
			<label for="line-tab-4" class="btn">Tab 4
			<label for="line-tab-5" class="btn">Tab 5
			<label for="line-tab-6" class="btn">Tab 6 With Long Text
		</div>
	</div>
	<div class="tab-info-wrap">
		<div class="tab-info">
			<h3>Information for tab 1</h3>
			Another line of information.
		</div>
		<div class="tab-info">
			<h3>Information for tab 2</h3>
			Another line of information.
		</div>
		<div class="tab-info">
			<h3>Information for tab 3</h3>
			Another line of information.
			<br>
			Another line of information.
		</div>
		<div class="tab-info">
			<h3>Information for tab 4</h3>
			Another line of information.
		</div>
		<div class="tab-info">
			<h3>Information for tab 5</h3>
			Another line of information.
		</div>
		<div class="tab-info">
			<h3>Information for tab 6</h3>
			Another line of information.
		</div>
	</div>
</div>

Vertical Tabs

Since these tabs are stacked top to bottom there is no need for a responsive scrolling tab. If you use vertical tabs you may want to make sure the tab text is very short or use icons to fit best in mobile.

Information for tab 1

Another line of information.

Information for tab 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas viverra pharetra quam, in imperdiet dui iaculis sit amet. Sed ut elit a magna lobortis viverra. Nullam sed lobortis orci, in suscipit nulla. Proin imperdiet massa ac nunc lacinia rhoncus. Nullam at risus in orci semper tincidunt quis quis mi. Morbi sit amet finibus urna, eu tincidunt nibh. Vivamus non lobortis odio.

Nullam ornare et enim nec placerat. In commodo commodo maximus. Aenean posuere tortor nec metus fermentum semper. Nulla facilisi. Duis rutrum, ante in ultricies hendrerit, sem nibh euismod purus, nec imperdiet diam sem eget lorem. Pellentesque vel iaculis lectus. Cras fermentum vel lacus vel tincidunt. Donec vehicula diam ut eros gravida, ac porttitor justo viverra. Donec at mi at nisi dapibus egestas at nec quam.

Phasellus eget rutrum purus. Maecenas eu ultricies lectus. Cras neque nunc, fringilla nec vehicula eu, tempor ac nisl. Suspendisse ac massa in turpis molestie fermentum. Aliquam ultricies porttitor ligula sit amet placerat. Proin urna lectus, eleifend ac sodales id, congue sit amet lorem. Nulla faucibus, tortor nec condimentum vestibulum, nisi lacus pulvinar libero, ut sollicitudin eros diam vel velit. Nunc feugiat eros ac convallis molestie.

Morbi ac arcu ultrices, malesuada sapien sit amet, lobortis nunc. Nulla at fringilla augue, et tempus dui. Proin at lorem faucibus dolor venenatis imperdiet. Fusce et augue sit amet elit rutrum convallis eu quis leo. Fusce aliquam mauris vitae vehicula pellentesque. Quisque ullamcorper, nisi sit amet aliquet pretium, metus dui eleifend turpis, ac semper nulla eros vitae elit. Integer venenatis mauris in leo egestas, a posuere mi pellentesque. Nullam pellentesque interdum enim eget faucibus. Sed non blandit lectus. Pellentesque nec commodo nibh. Etiam faucibus molestie ullamcorper. Etiam dolor velit, varius vitae erat sit amet, pellentesque gravida ante. Aliquam eget augue ac est placerat facilisis vel quis enim. Nunc tincidunt in dolor et sollicitudin. Nunc ac commodo augue, vel aliquet nisi. In rutrum sodales odio sed varius.

Information for tab 3

Another line of information.
Another line of information.

Information for tab 4

Another line of information.

Information for tab 5

Another line of information.

Information for tab 6

Another line of information.
Example Code 
<div class="tab-elements tabs-vertical clearfix">
	<input type="radio" id="tab-vert-1" name="tab-elements-vert" checked>
	<input type="radio" id="tab-vert-2" name="tab-elements-vert">
	<input type="radio" id="tab-vert-3" name="tab-elements-vert">
	<input type="radio" id="tab-vert-4" name="tab-elements-vert">
	<input type="radio" id="tab-vert-5" name="tab-elements-vert">
	<input type="radio" id="tab-vert-6" name="tab-elements-vert">
	<div>
		<div class="tab-btns">
			<label for="tab-vert-1" class="btn">Tab 1</label>
			<label for="tab-vert-2" class="btn">Tab 2</label>
			<label for="tab-vert-3" class="btn">Tab 3</label>
			<label for="tab-vert-4" class="btn">Tab 4</label>
			<label for="tab-vert-5" class="btn">Tab 5</label>
			<label for="tab-vert-6" class="btn">Tab 6</label>
		</div>
	</div>
	<div class="tab-info-wrap">
		<div class="tab-info">
			<h3>Information for tab 1</h3>
			Another line of information.
		</div>
		<div class="tab-info">
			<h3>Information for tab 2</h3>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas viverra pharetra quam, in imperdiet dui iaculis sit amet. Sed ut elit a magna lobortis viverra. Nullam sed lobortis orci, in suscipit nulla. Proin imperdiet massa ac nunc lacinia rhoncus. Nullam at risus in orci semper tincidunt quis quis mi. Morbi sit amet finibus urna, eu tincidunt nibh. Vivamus non lobortis odio.
			<br><br>
			Nullam ornare et enim nec placerat. In commodo commodo maximus. Aenean posuere tortor nec metus fermentum semper. Nulla facilisi. Duis rutrum, ante in ultricies hendrerit, sem nibh euismod purus, nec imperdiet diam sem eget lorem. Pellentesque vel iaculis lectus. Cras fermentum vel lacus vel tincidunt. Donec vehicula diam ut eros gravida, ac porttitor justo viverra. Donec at mi at nisi dapibus egestas at nec quam.
			<br><br>
			Phasellus eget rutrum purus. Maecenas eu ultricies lectus. Cras neque nunc, fringilla nec vehicula eu, tempor ac nisl. Suspendisse ac massa in turpis molestie fermentum. Aliquam ultricies porttitor ligula sit amet placerat. Proin urna lectus, eleifend ac sodales id, congue sit amet lorem. Nulla faucibus, tortor nec condimentum vestibulum, nisi lacus pulvinar libero, ut sollicitudin eros diam vel velit. Nunc feugiat eros ac convallis molestie.
			<br><br>
			Morbi ac arcu ultrices, malesuada sapien sit amet, lobortis nunc. Nulla at fringilla augue, et tempus dui. Proin at lorem faucibus dolor venenatis imperdiet. Fusce et augue sit amet elit rutrum convallis eu quis leo. Fusce aliquam mauris vitae vehicula pellentesque. Quisque ullamcorper, nisi sit amet aliquet pretium, metus dui eleifend turpis, ac semper nulla eros vitae elit. Integer venenatis mauris in leo egestas, a posuere mi pellentesque. Nullam pellentesque interdum enim eget faucibus. Sed non blandit lectus. Pellentesque nec commodo nibh. Etiam faucibus molestie ullamcorper. Etiam dolor velit, varius vitae erat sit amet, pellentesque gravida ante. Aliquam eget augue ac est placerat facilisis vel quis enim. Nunc tincidunt in dolor et sollicitudin. Nunc ac commodo augue, vel aliquet nisi. In rutrum sodales odio sed varius.
		</div>
		<div class="tab-info">
			<h3>Information for tab 3</h3>
			Another line of information.
			<br>
			Another line of information.
		</div>
		<div class="tab-info">
			<h3>Information for tab 4</h3>
			Another line of information.
		</div>
		<div class="tab-info">
			<h3>Information for tab 5</h3>
			Another line of information.
		</div>
		<div class="tab-info">
			<h3>Information for tab 6</h3>
			Another line of information.
		</div>
	</div>
</div>

Header Navigation

Here you will find premade header menus that have responsive mobile menus.

Header With Two Nav Groups

Features:

  • Fixed to top header on scroll (can be turned off).
  • Right set of navigation.
  • Left set of navigation.
  • Two sets of mobile menus and mobile icons.
  • Example of hover and click drop menus.
  • Hamburger css icon and profile icon used with "i" tags. Can be easily swapped out.
  • Dark version available with the class .dark.

View header and code in new window for correct responsive results:

View Example ❯ View Dark Version ❯

Side Navigation / Accordion Menu

Features:

  • Accordion optional menus.
  • Menu is set to width of 100% by default, just nest the menu in a grid to control sizing, or set a static width.
  • Dark version available with the class .dark.

Basic Side Navigation

This is the basic side navigation set up without submenus.

Example Code 
<nav class="nav-side">
	<div class="nav-side-item">
		<a href="#">Link 1</a>
	</div>
	<div class="nav-side-item">
		<a href="#">Link 2</a>
	</div>
	<div class="nav-side-item">
		<a href="#">Link 3</a>
	</div>
	<div class="nav-side-item">
		<a href="#">Link 4</a>
	</div>
	<div class="nav-side-item">
		<a href="#">Link 5</a>
	</div>
</nav>

Accordion Side Navigation

Remember to Update IDs and Labels

Each submenu has a check box with an ID. Make sure the id isn't repeated as IDs need to be unique and the correct label's for attribute calls the right ID name.
Example Code 
<nav class="nav-side">
	<div class="nav-side-item">
		<a href="#">Link 1</a>
	</div>
	<div class="nav-side-item">
		<a href="#">Link 2</a>
	</div>
	<div class="nav-side-item">
		<input type="checkbox" class="hide"  id="nav_item_bio">
		<label for="nav_item_bio">
			<span>Link 3 - Submenu</span>
			<i class="arrow-down"></i>
		</label>
		<ul>
			<li><a href="javascript:;">Sub item 1</a></li>
			<li><a href="javascript:;">Sub item 2</a></li>
			<li><a href="javascript:;">Sub item 3</a></li>
			<li><a href="javascript:;">Sub item 4</a></li>
		</ul>
	</div>
	<div class="nav-side-item">
		<a href="#">Link 4</a>
	</div>
</nav>

Dark Version

Dark version available for both basic and accordion style menus. Simply add class .dark to the class .nav-side like this: class="nav-side dark"

Example Code 
<nav class="nav-side dark">
	<div class="nav-side-item">
		<a href="#">Link 1</a>
	</div>
	<div class="nav-side-item">
		<a href="#">Link 2</a>
	</div>
	<div class="nav-side-item">
		<input type="checkbox" class="hide"  id="nav_item_bio">
		<label for="nav_item_bio">
			<span>Link 3 - Submenu</span>
			<i class="arrow-down"></i>
		</label>
		<ul>
			<li><a href="javascript:;">Sub item 1</a></li>
			<li><a href="javascript:;">Sub item 2</a></li>
			<li><a href="javascript:;">Sub item 3</a></li>
			<li><a href="javascript:;">Sub item 4</a></li>
		</ul>
	</div>
	<div class="nav-side-item">
		<a href="#">Link 4</a>
	</div>
</nav>

Auto Collapse Accordion Navigation

But I like it to work like a JQuery accordion that auto collapses other open menus.

No problem, the version below does the same with almost the same code setup. The only down side is double clicking the same menu item wont close the menu like the ones above. Dark versions of this work exactly the same way as the normal accordion navigation menus.

Example Code 
<nav class="nav-side">
	<input type="radio" class="hide" name="nav_menu_auto" id="nav_menu_auto" checked>
	<div class="nav-side-item">
		<a href="#">Link 1</a>
	</div>
	<div class="nav-side-item">
		<a href="#">Link 2</a>
	</div>
	<div class="nav-side-item">
		<input type="radio" class="hide" name="nav_menu_auto" id="nav_menu_auto_1">
		<label for="nav_menu_auto_1">
			<span>Link 3 - Submenu</span>
			<i class="arrow-down"></i>
		</label>
		<ul>
			<li><a href="javascript:;">Sub item 1</a></li>
			<li><a href="javascript:;">Sub item 2</a></li>
			<li><a href="javascript:;">Sub item 3</a></li>
			<li><a href="javascript:;">Sub item 4</a></li>
		</ul>
	</div>
	<div class="nav-side-item">
		<input type="radio" class="hide" name="nav_menu_auto" id="nav_menu_auto_2">
		<label for="nav_menu_auto_2">
			<span>Link 4 - Submenu</span>
			<i class="arrow-down"></i>
		</label>
		<ul>
			<li><a href="javascript:;">Sub item 1</a></li>
			<li><a href="javascript:;">Sub item 2</a></li>
			<li><a href="javascript:;">Sub item 3</a></li>
			<li><a href="javascript:;">Sub item 4</a></li>
		</ul>
	</div>

	<div class="nav-side-item">
		<a href="#">Link 5</a>
	</div>
</nav>

Responsive Side Navigation PCF style

As an option you can make the side navigation menu turn into a drop menu on mobile devices. The PCF site's sidemenu uses this type of menu. Just resize the browser to under 1024px to see the results of the menu. You can add the class .fixed to class="nav-side side-nav-responsive" if you would like the menu to be fixed in place like this site.

Example Code 
<nav class="nav-side side-nav-responsive">
	<input type="checkbox" class="hide" id="responsive_options">
	<label class="side-menu-options bold" for="responsive_options">
			<i class="arrow-down"></i> 
			<span>Options</span>
	</label>
	<div class="side-menu-items">
		<div class="nav-side-item">
			<input type="checkbox" class="hide"  id="nav_item_drops">
			<label for="nav_item_drops">
				<span>Button Magic</span>
				<i class="arrow-down"></i>
			</label>

			<ul>
				<li><a href="#click_menu">Click Menu</a></li>
				<li><a href="#hover_menu">Hover Menu</a></li>
				<li><a href="#button_group">Button Groups</a></li>
			</ul>
		</div>

		<div class="nav-side-item">
			<a href="#tabs">Tabs</a>
		</div>

		<div class="nav-side-item">
			<input type="checkbox" class="hide"  id="nav_item_nav">
			<label for="nav_item_nav">
				<span>Navigation</span>
				<i class="arrow-down"></i>
			</label>
			<ul>
				<li><a href="#nav_header">Header Nav</a></li>
				<li><a href="#nav_side">Side Nav</a></li>
			</ul>
		</div>

		<div class="nav-side-item">
			<a href="#panels">Panels</a>
		</div>

		<div class="nav-side-item">
			<a href="#modals">Modals</a>
		</div>

		<div class="nav-side-item">
			<a href="#pagination">Pagination</a>
		</div>
		<div class="nav-side-item">
			<a href="#breadcrumbs">Breadcrumbs</a>
		</div>

		<div class="nav-side-item">
			<a href="#alerts">Alerts</a>
		</div>

		<div class="nav-side-item">
			<a href="#notes">Info Flags</a>
		</div>

		<div class="nav-side-item">
			<a href="#icons">Icons</a>
		</div>

		<div class="nav-side-item">
			<a href="#loaders">Loaders</a>
		</div>
	</div>
</nav>

Panels

Panels are a cool way to seperate sections, below are a few different types of panels and options.

Panel Header Sub header text
Panel Body
Panel Footer Area if Needed
Example Code 
<div class="panel">
	<div class="panel-header">
		Panel Header
		<small>Sub header text</small>
	</div>
	<div class="panel-body">
		Panel Body
	</div>
	<div class="panel-footer">
		Panel Footer Area if Needed
	</div>
</div>

Panel with Header Buttons

Panel Header Sub header text
Edit
Options
Panel Body
Panel Footer Area if Needed
Example Code 
<div class="panel">
	<div class="panel-header">
		Panel Header
		<small>Sub header text</small>

		<div class="panel-btn-area clearfix">
			<a href="#" class="btn">Edit</a>
			<div class="btn primary has-drop-menu">
				Options <i class="arrow-down"></i>
				<label class="full-screen" for="panel-menu"></label>
				<ul class="drop-menu">
					<li><a href="javascript:;">Item 1</a></li>
					<li><a href="javascript:;">Item 2</a></li>
					<li><a href="javascript:;">Item 3</a></li>
				</ul>
			</div>

		</div>
	</div>
	<div class="panel-body">
		Panel Body
	</div>
	<div class="panel-footer">
		Panel Footer Area if Needed
	</div>
</div>

Panel with Collapsablity

Panel Header Sub header text
Panel Body
Panel Footer Area if Needed
Example Code 
<div class="panel">
	<input type="checkbox" class="panel-close-checkbox hide" id="panel-close-3">
	<div class="panel-header">
		Panel Header
		<small>Sub header text</small>

		<div class="panel-btn-area clearfix">
			<a href="#" class="btn">Edit</a>
			<div class="btn primary has-drop-menu">
				<input type="checkbox" id="panel-menu" class="drop-menu-input">
				<label for="panel-menu" class="menu-label"></label>
				Options <i class="arrow-down"></i>
				<label class="full-screen" for="panel-menu"></label>
				<ul class="drop-menu">
					<li><a href="javascript:;">Item 1</a></li>
					<li><a href="javascript:;">Item 2</a></li>
					<li><a href="javascript:;">Item 3</a></li>
				</ul>
			</div>
			<label class="panel-close" for="panel-close-3">
				<i class="arrow-down"></i>
			</label>

		</div>
	</div>
	<div class="panel-body">
		Panel Body
	</div>
	<div class="panel-footer">
		Panel Footer Area if Needed
	</div>
</div>

Panel with all Features

Panels are all built off the same code,adding a few lines will get you buttons and collapsable capability.

Panel Header Sub header text
Edit
Options
Panel Body
Panel Footer Area if Needed
Example Code 
<div class="panel">
	<input type="checkbox" class="panel-close-checkbox hide" id="panel-close-3">
	<div class="panel-header">
		Panel Header
		<small>Sub header text</small>

		<div class="panel-btn-area clearfix">
			<a href="#" class="btn">Edit</a>
			<div class="btn primary has-drop-menu">
				<input type="checkbox" id="panel-menu" class="drop-menu-input">
				<label for="panel-menu" class="menu-label"></label>
				Options <i class="arrow-down"></i>
				<label class="full-screen" for="panel-menu"></label>
				<ul class="drop-menu">
					<li><a href="javascript:;">Item 1</a></li>
					<li><a href="javascript:;">Item 2</a></li>
					<li><a href="javascript:;">Item 3</a></li>
				</ul>
			</div>
			<label class="panel-close" for="panel-close-3">
				<i class="arrow-down"></i>
			</label>

		</div>
	</div>
	<div class="panel-body">
		Panel Body
	</div>
	<div class="panel-footer">
		Panel Footer Area if Needed
	</div>
</div>

Modals

Open and close models with a click of a button, or if you need to use javascript simple check the radio input to open or close the modal. All modals use the same code just add classes for the features you like, see examples below.

Since modals are controlled by radio inputs, you can tie them all together with the same names so only one can be opened at a time.

Example Code 
<!-- Example Launch Modal Button -->
<label class="btn primary" for="modal-1">Launch Modal</label>

<!-- Modal : Remember if you have more than one modal on a page rename the IDs and radio names. -->
<input type="radio" name="modal-1" class="hide" id="hide_modal" checked>
<div class="modal-container">
	<input type="radio" name="modal-1" class="hide modal-control" id="modal_1">
	<label class="modal-shadow" for="hide_modal"></label>
	<div class="modal-wrap">
		<div class="modal">
			<div class="modal-header">
				Header
				<label class="close-modal" for="modal_1">X</label>
			</div>
			<div class="modal-body">
				Body text/html goes here.
				<br><br>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque finibus ipsum diam, 
				et auctor leo fringilla et. 
				<br>
				Donec a pretium nibh. Vivamus sed purus eu risus semper accumsan. 
			</div>
			<div class="modal-footer">
				<a href="#" class="btn primary">Some Button</a>
				<label for="hide_modal" class="btn">Cancel Button</label>
			</div>
		</div>
	</div>
</div>
Basic Modal
  • Opens in center of screen.
  • Can Be closed by clicking dark shadow area.
  • Can be closed by button in modal header.
  • Can be closed with a label button as well.
  • Is responsive.
Header
Body text/html goes here.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque finibus ipsum diam, et auctor leo fringilla et.
Donec a pretium nibh. Vivamus sed purus eu risus semper accumsan.
Some Button
Modal - No Shadow Click
  • Same as Basic Modal
  • Can NOT Be closed by clicking dark shadow area.
Update the modal shadow label: <label class="modal-shadow" for="modal_1"></label> to be a div like this: <div class="modal-shadow"></div> This way the shadow area becomes unclickable.
Header
Body text/html goes here.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque finibus ipsum diam, et auctor leo fringilla et.
Donec a pretium nibh. Vivamus sed purus eu risus semper accumsan.
Some Button
Modal - Fixed to Top
  • Same as Basic Modal
  • Centers and aligns the Modal to the top of page.
Add class .modal-top to the toplevel div container like this: class="modal-container modal-top"
Header
Body text/html goes here.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque finibus ipsum diam, et auctor leo fringilla et.
Donec a pretium nibh. Vivamus sed purus eu risus semper accumsan.
Some Button
Modal - Slide Down Animation
Animates down from top of the screen works with all modal versions. This example uses the top page modal just add .animate-from-top to the top level div tag like this:
class="modal-container modal-top animate-from-top"
Header
Body text/html goes here.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque finibus ipsum diam, et auctor leo fringilla et.
Donec a pretium nibh. Vivamus sed purus eu risus semper accumsan.
Some Button
Modal - Zoom In
Animates from center of the screen works with all modal versions. This example uses the top page modal just add .animate-zoom to the top level div tag like this:
class="modal-container animate-zoom"
Header
Body text/html goes here.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque finibus ipsum diam, et auctor leo fringilla et.
Donec a pretium nibh. Vivamus sed purus eu risus semper accumsan.
Some Button

Pagination

Below are examples of pagenation components.

Extra classes

  • Active Class: .active like this: <a href="#" class="active primary">1</a>
  • Disabled Class: .disabled like this: <a href="#" class="disabled">«</a>
Example Code 
<ul class="paging">
	<li>
	  <a href="#">
		«<
	  </a>
	</li>
	<li><a href="#" class="active primary">1</a></li>
	<li><a href="#">2</a></li>
	<li><a href="#">3</a></li>
	<li><a href="#">4</a></li>
	<li><a href="#">5</a></li>
	<li>
	  <a href="#">
		»<
	  </a>
	</li>
</ul>

Pagination Alignment

Aligning paging to the right or center is easy, just add an extra div wrapper around the pageing code above like this: <div class="paging-right">, or like this: <div class="paging-center"> if you would like the paging to be centered on the page. The example below is aligned to the left.

Example Code 
<div class="paging-right">
	<ul class="paging">
		<li>
		  <a href="#">
			«<
		  </a>
		</li>
		<li><a href="#" class="active primary">1</a></li>
		<li><a href="#">2</a></li>
		<li><a href="#">3</a></li>
		<li><a href="#">4</a></li>
		<li><a href="#">5</a></li>
		<li>
		  <a href="#">
			»<
		  </a>
		</li>
	</ul>
</div>

Condensed Pagination

Condensing spaces between page numbers is easy, just add class .condensed to the basic pagination code like this: <ul class="paging condensed">. Condensed paging also works the same with aligning as the non-condensed version. This example also has the previous arrow using the .disabled class.

Pagination Full Width

This version is used where you may have existing drop menus for pages or just need a full width previous/next button solution. All normal button classes apply to make the full width pagination component, you can also use the different built in button colors found in the CSS section along with <a href="#" class="btn disabled"> to disable paging buttons when needed.

Drop Menu Button Tips

  • btn btn-ghost btn-sm has-drop-menu hover-menuThese examples use the hover version of the paging drop menus, you can easily use the click version by removing class .hover-menu.
  • Menu button can be changed to a click button if you don't want a hover version. See the Button section in the "Button Magic" here.
  • Button sizes can all be controlled, please see the CSS button section here.
Previous
Next »
Example Code 
<div class="flex-grid">
	<div class="col-3 col-4-sm">
		<a href="#" class="btn primary btn-sm">« Previous</a>
	</div>
	<div class="col-6 col-4-sm text-center">
		<select class="paging-select">
			<option>Page 1</option>
			<option>Page 2</option>
			<option>Page 3</option>
			<option>Page 4</option>
			<option>Page 5</option>
			<option>Page 6</option>
		</select>
	</div>
	<div class="col-3 col-4-sm text-right">
		<a href="#" class="btn primary btn-sm">Next »</a>
	</div>
</div>

Alerts

Examples of PCF alerts, the icons used are pure css icons and can be changed out for your own icons or downloaded icon font sets very easily. Below is the standard alert in grey, if you add color classes you can change the alert font and background colors. Scrioll down for all examples.

Alert!
This is some text related to an alert.
Example Code 
<div class="alert primary-light">	
	<div class="alert-title clearfix">
		<i class="alert-icon"></i>
		<span>Alert!</span>
	</div>
	This is some text related to an alert.
</div>

Alert Colors

Add the classes below to the code above to change colors of the alerts and css icon warning triangle. Feel free to replace the built in CSS icons with icons from third party software for easier updating.

Primary Alert!
Code Example: <div class="alert primary-light">
Secondary Alert!
Code Example: <div class="alert secondary-light">
Info Alert!
Code Example: <div class="alert info-light">
Success Alert!
Code Example: <div class="alert success-light">
Warning Alert!
Code Example: <div class="alert warning-light">
Danger Alert!
Code Example: <div class="alert danger-light">

Alert with Strong Colors

These alerts have the full strength color with white icons. You will need to use the code version below.

Example Code 
<div class="alert">	
	<div class="alert-title clearfix">
		<i class="alert-icon alert-tri-white"></i>
		<span>Alert!</span>
	</div>
	This is some text related to an alert.
</div>
Primary Alert!
Update Colors: <div class="alert primary">
Update Icon Color: <i class="alert-icon alert-tri-white text-primary"></i>
Secondary Alert!
Update Colors: <div class="alert secondary">
Update Icon Color: <i class="alert-icon alert-tri-white text-secondary"></i>
Info Alert!
Update Colors: <div class="alert info">
Update Icon Color: <i class="alert-icon alert-tri-white text-info"></i>
Success Alert!
Update Colors: <div class="alert success">
Update Icon Color: <i class="alert-icon alert-tri-white text-success"></i>
Warning Alert!
Update Colors: <div class="alert warning">
Update Icon Color: <i class="alert-icon alert-tri-white text-warning"></i>
Danger Alert!
Update Colors: <div class="alert danger">
Update Icon Color: <i class="alert-icon alert-tri-white text-danger"></i>

Info Flags

Info flags are any bit of text that needs to be highlighted with a background color.

Info flag Info flag Info flag Info flag Info flag Info flag Info flag

Example Code 
<span class="flag default">Info flag</span>
<span class="flag primary">Info flag</span>
<span class="flag secondary">Info flag</span>
<span class="flag info">Info flag</span>
<span class="flag success">Info flag</span>
<span class="flag warning">Info flag</span>
<span class="flag danger">Info flag</span>

Squared

Info flag Info flag Info flag Info flag Info flag Info flag Info flag

Example Code 
<span class="flag default no-rounded">Info flag</span>
<span class="flag primary no-rounded">Info flag</span>
<span class="flag secondar no-roundedy">Info flag</span>
<span class="flag info no-rounded">Info flag</span>
<span class="flag success no-rounded">Info flag</span>
<span class="flag warning no-rounded">Info flag</span>
<span class="flag danger no-rounded">Info flag</span>

Flags for amounts

Circles

Stuff5
Messages5
Updates5
Completed5
Warnings5
Example Code 
Stuff<span class="flag-amount default">5</span><br>
Messages<span class="flag-amount danger">5</span><br>
Updates<span class="flag-amount info">5</span><br> 
Completed<span class="flag-amount success">5</span><br>
Warnings<span class="flag-amount warning">5</span>

Squared

Stuff5
Messages5
Updates5
Completed5
Warnings5
Example Code 
Stuff<span class="flag-amount default no-rounded">5</span><br>
Messages<span class="flag-amount danger no-rounded">5</span><br>
Updates<span class="flag-amount info no-rounded">5</span><br> 
Completed<span class="flag-amount success no-rounded">5</span><br>
Warnings<span class="flag-amount warning no-rounded">5</span>
Button Flags
Stuff5 Messages5 Messages5
Messages5 Messages5
Messages 5
Example Code 
<a href="#" class="btn primary flag-item">Messages<span class="flag-amount default">5</span></a> 
<a href="#" class="btn primary flag-item">Messages<span class="flag-amount danger">5</span></a> 
<a href="#" class="btn primary flag-item">Messages<span class="flag-amount info">5</span></a> 
<a href="#" class="btn primary flag-item">Messages<span class="flag-amount success">5</span></a> 
<div class="btn primary has-drop-menu flag-item">
	<input type="checkbox" id="button-click-10" class="drop-menu-input">
	<label for="button-click-10" class="menu-label"></label>
	Messages <i class="arrow-down"></i><span class="flag-amount danger">5</span>
	<label class="full-screen" for="button-click-10"></label>
	<ul class="drop-menu">
		<li><a href="#">Item 1</a></li>
		<li><a href="#">Item 2</a></li>
		<li><a href="#">Item 3</a></li>
	</ul>
</div>

Loaders Animated loaders and loading bars

Loading | Loading
Loading | Loading

Large V2 Loader

 Loading
Loading ... | Loading ...
Example Code 
<span class="loading-wrap"><i class="loading"></i> Loading</span>
<div class="spacer-sm"></div>
<a href="#" class="btn primary"><i class="loading"></i> Loading</a>
<div class="spacer-sm"></div>
<i class="loading-v2"></i> Loading
<div class="spacer-sm"></div>
<a href="#" class="btn primary"><i class="loading-v2"></i> Loading</a>
<div class="spacer-sm"></div>
<div class="line-dashed"></div>
<h2><i class="loading-v2 lg"></i> Large V2 Loader</h2>
<a href="#" class="btn btn-lg primary"><i class="loading-v2 lg left clearfix"></i>  Loading</a>
<div class="line-dashed"></div>
<a href="#" class="btn primary"><span class="loading-text">Loading <span>...</span></span></a>
<div class="spacer-sm"></div>
<span class="loading-text">Loading <span>...</span></span>

Loading Bars

These can be used with any of the contextual color classes, by default the bar will be set to your success color. Setting the style on the div with class="bar" style="width:50%" will allow you to set the size. Animation has been applied as well so if you dynamically change the bar with JavaScript it will animate.

Example Code 
<div class="loading-bar">
	<div class="bar" style="width:50%"></div>
</div>

Tool Tips

Simply add class .tooltip to the container, by default text will flyout to the right. To change flyout directions add classes .tip-left .tip-top .tip-bottom .tip-right (default)

Regular A Tag Examples

Left Tip Left Tool Tip  |  Top Tip Top Tool Tip  |  Bottom Tip Bottom Tool Tip  |  Right Tip Right Tool Tip

Button Examples

Left Tip Left Tool Tip  |  Top Tip Top Tool Tip, with a bunch of
text here. Add html/css to this tip as well  |  Bottom Tip Bottom Tool Tip  |  Right Tip Right Tool Tip
Example Code 
<a href="javascript:;" class="tooltip tip-left">
	Left Tip
	<span class="tip">testing</span>
</a>
<span class="opacity-50"> | </span>
<a href="javascript:;" class="tooltip tip-top">
	Top Tip
	<span class="tip">testing really long text here ...</span>
</a>
<span class="opacity-50"> | </span>
<a href="javascript:;" class="tooltip tip-bottom">
	Bottom Tip
	<span class="tip">testing</span>
</a>
<span class="opacity-50"> | </span>
<a href="javascript:;" class="tooltip">
	Right Tip
	<span class="tip">testing</span>
</a>