JavaScript Disabled. For a better experience on this website please enable JavaScript in your browser.

Color Palette

Brand Colors
UI / Supporting Colors
  • .warning / .red
  • .success / .green
  • .secondary / .blue
  • .auxiliary / .yellow
Greyscale

Typography

Regular Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Light Headings

Heading 1 .light

Heading 2 .light

Heading 3 .light

Heading 4 .light

Heading 5 .light
Heading 6 .light
Paragraph and Related

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras posuere luctus dui, consequat elementum est laoreet sit amet. Proin quis purus felis, eu faucibus diam. Suspendisse sit amet velit in nunc tempor laoreet. Maecenas ac sapien sem, in ultrices nisi. Mauris dapibus, nibh sit amet scelerisque tempor, massa tellus varius nunc, a sagittis purus enim id libero. Etiam non dapibus diam.

Phasellus tincidunt, enim et mollis dapibus, tortor sapien lobortis mauris, sed dignissim quam sem tristique purus. Curabitur interdum ullamcorper libero in auctor. Ut dictum ultricies enim ornare vehicula. Vivamus sapien enim, malesuada gravida ornare et, sagittis et lectus. Sed nulla leo, placerat sit amet posuere in, hendrerit id arcu. Morbi id ipsum nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin diam orci, laoreet sit amet varius nec, dignissim nec lectus.

  • Hi there
  • I'm an
  • Unordered List
blockquote / .quote

"Break open a cherry tree and there are no flowers, but the spring breeze brings forth myriad blossoms."

- Ikkyu Sojun

Horizontal Rule

Pairing Heading Examples with .subhead and .prehead

Major Headline

Subheadlines are making waves!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras posuere luctus dui, consequat elementum est laoreet sit amet. Proin quis purus felis, eu faucibus diam. Suspendisse sit amet velit in nunc tempor laoreet. Maecenas ac sapien sem, in ultrices nisi. Mauris dapibus, nibh sit amet scelerisque tempor, massa tellus varius nunc, a sagittis purus enim id libero. Etiam non dapibus diam.

What is this prehead?

Some Kind of Magic...

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras posuere luctus dui, consequat elementum est laoreet sit amet. Proin quis purus felis, eu faucibus diam. Suspendisse sit amet velit in nunc tempor laoreet. Maecenas ac sapien sem, in ultrices nisi. Mauris dapibus, nibh sit amet scelerisque tempor, massa tellus varius nunc, a sagittis purus enim id libero. Etiam non dapibus diam.

Buttons

.button

	<a href="#" class="button">My Button</a>
	
By Colors
.button .button .button-red .button .button-green .button .button-blue .button .button-yellow .button .button-white

	<a class="button" href="#">.button</a>
<a class="button button-red" href="#">.button .button-red</a>
<a class="button button-green" href="#">.button .button-green</a>
<a class="button button-blue" href="#">.button .button-blue</a>
<a class="button button-yellow" href="#">.button .button-yellow</a>
<a class="button button-white" href="#">.button .button-white</a>
By Names
.button .button .button-warning .button .button-success .button .button-secondary .button .button-auxiliary .button .button-inverse

	<a class="button" href="#">.button</a>
<a class="button button-warning" href="#">.button .button-warning</a>
<a class="button button-success" href="#">.button .button-success</a>
<a class="button button-secondary" href="#">.button .button-secondary</a>
<a class="button button-auxiliary" href="#">.button .button-auxiliary</a>
<a class="button button-inverse" href="#">.button .button-inverse</a>
Sizes
.button .button-mini .button .button-small .button .button .button-large .button .button-giant

	<a class="button button-mini" href="#">.button .button-mini</a>
<a class="button button-small" href="#">.button .button-small</a>
<a class="button" href="#">.button</a>
<a class="button button-large" href="#">.button .button-large</a>
<a class="button button-giant" href="#">.button .button-giant</a>
Button Group

	<div class="button-group">
<a class="button button-red" href="#">.button .button-red</a>
<a class="button button-yellow" href="#">.button .button-yellow</a>
<a class="button button-blue" href="#">.button .button-blue</a>
<a class="button button-black" href="#">.button .button-black</a>
</div>
Button Navigation

	<div class="button-nav">
<a class="button" href="#">.button</a>
<a class="button" href="#">.button</a>
<a class="button" href="#">.button</a>
<a class="button" href="#">.button</a>
</div>
Dropdowns
This is universal plug-in that will allow you to put a dropdown on just about anything. Most commonly though it will probably be buttons and links. See below.
Buttons
Click Me
Regular Links
Click Me

	<h6>Buttons</h6>
<a class="button button-red" href="#" data-dropdown="#dropdown-1"><i class="fa fa-th"></i> Click Me</a>

<hr>

<h6>Regular Links</h6>
<a href="#" data-dropdown="#dropdown-1"><i class="fa fa-th"></i> Click Me</a>

<div id="dropdown-1" class="dropdown dropdown-tip">
<ul class="dropdown-menu">
<li><a href="http://www.wildappledesigngroup.com" target="_blank">Wild Apple Design Group</a></li>
<li><a href="http://www.facebook.com" target="_blank"><i class="fa fa-facebook-square"></i> Facebook</a></li>
<li><a href="http://www.twitter.com" target="_blank"><i class="fa fa-twittersquare"></i> Twitter</a></li>
<li><a href="http://www.linkedin.com" target="_blank"><i class="fa fa-linkedin"></i> LinkedIn</a></li>
<li><a href="http://www.codepen.com" target="_blank"><i class="fa fa-codepen"></i> Codepen</a></li>
</ul>
</div>
Button Block
.button .button-block

	<a class="button button-block" href="#">.button .button-block</a>
	

Gigantor / Hero

.gigantor / .hero

.gigantor / .hero

.gigantor / .hero

Bigger than big, taller than tall, Quicker than quick, stronger than strong. Ready to fight for right, against wrong!

EXTRA bold area to display an important call to action or special purpose of a page. Typically useful when you have no images to add a visual impact to the heading of a page.


		<div class="hero">
<h1></h1>
<h2></h2>
<h3></h3>
<p></p>

Wells

.well

"No need, gentlemen; one moment, and I proceed.-Now, gentlemen, so suddenly perceiving the snowy whale within fifty yards of the ship-forgetful of the compact among the crew-in the excitement of the moment, the Teneriffe man had instinctively and involuntarily lifted his voice for the monster, though for some little time past it had been plainly beheld from the three sullen mast-heads. All was now a phrensy. 'The White Whale-the White Whale!'"

.well .well-warning

"No need, gentlemen; one moment, and I proceed.-Now, gentlemen, so suddenly perceiving the snowy whale within fifty yards of the ship-forgetful of the compact among the crew-in the excitement of the moment, the Teneriffe man had instinctively and involuntarily lifted his voice for the monster, though for some little time past it had been plainly beheld from the three sullen mast-heads. All was now a phrensy. 'The White Whale-the White Whale!'"

.well .well-success

"No need, gentlemen; one moment, and I proceed.-Now, gentlemen, so suddenly perceiving the snowy whale within fifty yards of the ship-forgetful of the compact among the crew-in the excitement of the moment, the Teneriffe man had instinctively and involuntarily lifted his voice for the monster, though for some little time past it had been plainly beheld from the three sullen mast-heads. All was now a phrensy. 'The White Whale-the White Whale!'"

.well .well-secondary

"No need, gentlemen; one moment, and I proceed.-Now, gentlemen, so suddenly perceiving the snowy whale within fifty yards of the ship-forgetful of the compact among the crew-in the excitement of the moment, the Teneriffe man had instinctively and involuntarily lifted his voice for the monster, though for some little time past it had been plainly beheld from the three sullen mast-heads. All was now a phrensy. 'The White Whale-the White Whale!'"

.well .well-auxiliary

"No need, gentlemen; one moment, and I proceed.-Now, gentlemen, so suddenly perceiving the snowy whale within fifty yards of the ship-forgetful of the compact among the crew-in the excitement of the moment, the Teneriffe man had instinctively and involuntarily lifted his voice for the monster, though for some little time past it had been plainly beheld from the three sullen mast-heads. All was now a phrensy. 'The White Whale-the White Whale!'"

.well .well-inverse

"No need, gentlemen; one moment, and I proceed.-Now, gentlemen, so suddenly perceiving the snowy whale within fifty yards of the ship-forgetful of the compact among the crew-in the excitement of the moment, the Teneriffe man had instinctively and involuntarily lifted his voice for the monster, though for some little time past it had been plainly beheld from the three sullen mast-heads. All was now a phrensy. 'The White Whale-the White Whale!'"

.well .well-dark

"No need, gentlemen; one moment, and I proceed.-Now, gentlemen, so suddenly perceiving the snowy whale within fifty yards of the ship-forgetful of the compact among the crew-in the excitement of the moment, the Teneriffe man had instinctively and involuntarily lifted his voice for the monster, though for some little time past it had been plainly beheld from the three sullen mast-heads. All was now a phrensy. 'The White Whale-the White Whale!'"


		<div class="well">
</div>

Frames

.frame

"Framed! I've been framed!" he exclaimed before shrivelling down like slug in a pile of salt. It came as no surprise to me though. If your average P.I. was hard boiled, I've been overcooked, burned charred and twice baked even still. I'm not without compassion though and I did feel for this poor fella. I lowered to my knee, the old mid-thigh bullet wound stretching scar tissue as I leaned in caused me a bit of a wince. I placed a hand on his shoulder, feeling it raise and lower between gasping breaths. He's the fourth sap I've seen fall victim to this same scam and it's no longer about the money. It's about justice and I'm just the guy to bring it.

.frame .frame-red or .frame-warning

"Framed! I've been framed!" he exclaimed before shrivelling down like slug in a pile of salt. It came as no surprise to me though. If your average P.I. was hard boiled, I've been overcooked, burned charred and twice baked even still. I'm not without compassion though and I did feel for this poor fella. I lowered to my knee, the old mid-thigh bullet wound stretching scar tissue as I leaned in caused me a bit of a wince. I placed a hand on his shoulder, feeling it raise and lower between gasping breaths. He's the fourth sap I've seen fall victim to this same scam and it's no longer about the money. It's about justice and I'm just the guy to bring it.

.frame .frame-green or .frame-success

"Framed! I've been framed!" he exclaimed before shrivelling down like slug in a pile of salt. It came as no surprise to me though. If your average P.I. was hard boiled, I've been overcooked, burned charred and twice baked even still. I'm not without compassion though and I did feel for this poor fella. I lowered to my knee, the old mid-thigh bullet wound stretching scar tissue as I leaned in caused me a bit of a wince. I placed a hand on his shoulder, feeling it raise and lower between gasping breaths. He's the fourth sap I've seen fall victim to this same scam and it's no longer about the money. It's about justice and I'm just the guy to bring it.

.frame .frame-blue or .frame-secondary

"Framed! I've been framed!" he exclaimed before shrivelling down like slug in a pile of salt. It came as no surprise to me though. If your average P.I. was hard boiled, I've been overcooked, burned charred and twice baked even still. I'm not without compassion though and I did feel for this poor fella. I lowered to my knee, the old mid-thigh bullet wound stretching scar tissue as I leaned in caused me a bit of a wince. I placed a hand on his shoulder, feeling it raise and lower between gasping breaths. He's the fourth sap I've seen fall victim to this same scam and it's no longer about the money. It's about justice and I'm just the guy to bring it.

.frame .frame-yellow or .frame-auxiliary

"Framed! I've been framed!" he exclaimed before shrivelling down like slug in a pile of salt. It came as no surprise to me though. If your average P.I. was hard boiled, I've been overcooked, burned charred and twice baked even still. I'm not without compassion though and I did feel for this poor fella. I lowered to my knee, the old mid-thigh bullet wound stretching scar tissue as I leaned in caused me a bit of a wince. I placed a hand on his shoulder, feeling it raise and lower between gasping breaths. He's the fourth sap I've seen fall victim to this same scam and it's no longer about the money. It's about justice and I'm just the guy to bring it.

.frame .frame-dark or .frame-black

"Framed! I've been framed!" he exclaimed before shrivelling down like slug in a pile of salt. It came as no surprise to me though. If your average P.I. was hard boiled, I've been overcooked, burned charred and twice baked even still. I'm not without compassion though and I did feel for this poor fella. I lowered to my knee, the old mid-thigh bullet wound stretching scar tissue as I leaned in caused me a bit of a wince. I placed a hand on his shoulder, feeling it raise and lower between gasping breaths. He's the fourth sap I've seen fall victim to this same scam and it's no longer about the money. It's about justice and I'm just the guy to bring it.


		<div class="frame">
</div>

Alerts

By color...

.alert There's something strange in the neighborhood...

.alert .alert-red There's something strange in the neighborhood...
.alert .alert-green There's something strange in the neighborhood...
.alert .alert-blue There's something strange in the neighborhood...
.alert .alert-yellow There's something strange in the neighborhood...
.alert .alert-white There's something strange in the neighborhood...

		<div class="alert">
<strong>.alert</strong> There's something strange in the neighborhood...
</div>

<div class="alert alert-red">
<strong>.alert .alert-red</strong> There's something strange in the neighborhood...
</div>

<div class="alert alert-green">
<strong>.alert .alert-green</strong> There's something strange in the neighborhood...
</div>

<div class="alert alert-blue">
<strong>.alert .alert-blue</strong> There's something strange in the neighborhood...
</div>

<div class="alert alert-yellow">
<strong>.alert .alert-yellow</strong> There's something strange in the neighborhood...
</div>

<div class="alert alert-white">
<strong>.alert .alert-white</strong> There's something strange in the neighborhood...
</div>
By name...
.alert There's something strange in the neighborhood...
.alert .alert-warning There's something strange in the neighborhood...
.alert .alert-success There's something strange in the neighborhood...
.alert .alert-secondary There's something strange in the neighborhood...
.alert .alert-auxiliary There's something strange in the neighborhood...
.alert .alert-inverse There's something strange in the neighborhood...

		<div class="alert">
<strong>.alert</strong> There's something strange in the neighborhood...
</div>

<div class="alert alert-warning">
<strong>.alert .alert-warning</strong> There's something strange in the neighborhood...
</div>

<div class="alert alert-success">
<strong>.alert .alert-success</strong> There's something strange in the neighborhood...
</div>

<div class="alert alert-secondary">
<strong>.alert .alert-secondary</strong> There's something strange in the neighborhood...
</div>

<div class="alert alert-auxiliary">
<strong>.alert .alert-auxiliary</strong> There's something strange in the neighborhood...
</div>

<div class="alert alert-inverse">
<strong>.alert .alert-inverse</strong> There's something strange in the neighborhood...
</div>

Labels

By color...
.label .label .label-red .label .label-green .label .label-blue .label .label-yellow .label .label-white

		<span class="label">.label</span>
<span class="label label-red">.label .label-red</span>
<span class="label label-green">.label .label-green</span>
<span class="label label-blue">.label .label-blue</span>
<span class="label label-yellow">.label .label-yellow</span>
<span class="label label-white">.label .label-white</span>
By name...
.label .label .label-warning .label .label-success .label .label-secondary .label .label-auxiliary .label .label-inverse

		<span class="label">.label</span>
<span class="label label-warning">.label .label-warning</span>
<span class="label label-success">.label .label-success</span>
<span class="label label-secondary">.label .label-secondary</span>
<span class="label label-auxiliary">.label .label-auxiliary</span>
<span class="label label-inverse">.label .label-inverse</span>

Badges

By color...
1.badge
2.badge .badge-red
3.badge .badge-green
4.badge .badge-blue
5.badge .badge-yellow
6.badge .badge-white

		<span class="badge">1</span>.badge<br />
<span class="badge badge-red">2</span>.badge .badge-red<br />
<span class="badge badge-green">3</span>.badge .badge-green<br />
<span class="badge badge-blue">4</span>.badge .badge-blue<br />
<span class="badge badge-yellow">5</span>.badge .badge-yellow<br />
<span class="badge badge-white">6</span>.badge .badge-white<br />
By name...
1.badge
2.badge .badge-warning
3.badge .badge-success
4.badge .badge-secondary
5.badge .badge-auxiliary
6.badge .badge-inverse

		<span class="badge">1</span>.badge<br />
<span class="badge badge-warning">2</span>.badge .badge-warning<br />
<span class="badge badge-success">3</span>.badge .badge-success<br />
<span class="badge badge-secondary">4</span>.badge .badge-secondary<br />
<span class="badge badge-auxiliary">5</span>.badge .badge-auxiliary<br />
<span class="badge badge-inverse">6</span>.badge .badge-inverse<br />

Forms


		<form action="" method="post">
<label for="text">input type=text</label>
<input id="text" type="text" name="text" value="" placeholder="placeholder">
<br>
<label for="search">input type=search</label>
<input id="search" type="search" name="search" value="" placeholder="enter search terms">
<br>
<label for="email">input type=email</label>
<input type="email" name="email" value="" placeholder="you@youremail.com" required>
<br>
<label for="url">input type=url</label>
<input id="url" type="url" name="url" value="" placeholder="http://www.youraddress.com" required>
<br>
<label for="tel">input type=tel</label>
<input id="tel" type="tel" name="tel" value="" placeholder="555-555-5555" required>
<br>
<label for="number">input type=number</label>
<input id="number" type="number" name="number" value="" placeholder="1234567890" required>
<br>
<label for="range">input type=range</label>
<input id="range" type="range" name="range" value="50" min="0" max="100" placeholder="" required>
<br>
<label for="date">input type=date</label>
<input id="date" type="date" name="date" value="" placeholder="1234567890" required>
<br>
<label for="color">input type=color</label>
<input id="color" type="color" name="color" value="" placeholder="" required>
<br>
<label for="checkbox">input type=checkbox</label>
<input id="checkbox" type="checkbox" name="checkbox" value="1">
<br>
<label for="radio">input type=radio</label>
<input id="radio" type="radio" name="radio" value="1">
<br>
<label for="select">select</label>
<select id="select" type="select" name="select" required>
<optgroup label="One through Three"></optgroup>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<optgroup label="Four through Six"></optgroup>
<option value="1">Option 4</option>
<option value="2">Option 5</option>
<option value="3">Option 6</option>
</select>
<br>
<label for="textarea">textarea</label>
<textarea id="textarea" name="textarea" cols="40" rows="5" required></textarea>
<br>
<button type="submit" class="submit" >Kick it!</button>
</form>

Icons - FontAwesome

Cheat Sheet

I see!

Eeeey! Fonzarelli!

		<p><i class="fa fa-eye"></i> I see!</p>

<a class="button button-red" href="#"><i class="fa fa-thumbs-up"></i> Eeeey Fonzarelli!</a>

Grid

12 Column Responsive Grid that breaks into single column for resolutions less than 769px

Basic Grid
.span-1
.span-1
.span-1
.span-1
.span-1
.span-1
.span-1
.span-1
.span-1
.span-1
.span-1
.span-1
.span-2
.span-2
.span-2
.span-2
.span-2
.span-2
.span-3
.span-3
.span-3
.span-3
.span-4
.span-4
.span-4
.span-5
.span-5
.span-2
.span-6
.span-6
.span-7
.span-5
.span-8
.span-4
.span-9
.span-3
.span-10
.span-2
.span-11
.span-1
.span-12
Offsetting Columns
.span-11 .offset-1
.span-10 .offset-2
.span-9 .offset-3
.span-8 .offset-4
.span-7 .offset-5
.span-6 .offset-6
.span-5 .offset-7
.span-4 .offset-8
.span-3 .offset-9
.span-2 .offset-10
.span-1 .offset-11
Welcome! Please sign in:

Can't access your account?

Site Search