Quality & Craftsmanship

Style Guide

Branding Colors

.hue-1
.hue-2
.hue-3
.hue-4
$primary-color .brand-1#0E3150
.hue-1
.hue-2
.hue-3
.hue-4
$secondary-color .brand-2#C1*74F
$body-font .body-font#33333
<div class="brand-1">Text Color</div>
<div class="bg-brand-1">Background Color</div>
<div class="brand-2">Text Color</div>
<div class="bg-brand-2">Background Color</div>
<div class="body-font">Body Font Color</div>

Typography

Aa Dosis
ExtraLight Regular SemiBold Bold
Aa Lato
Regular Bold BoldItalic

Headings

H1 One Morning, When Gregor Samsa Woke

H1 Subheading One Morning, When Gregor Samsa Woke

H2 One Morning, When Gregor Samsa Woke

H2 Subheading One Morning, When Gregor Samsa Woke

H3 One Morning, When Gregor Samsa Woke

H3 Subheading One Morning, When Gregor Samsa Woke

H4 One Morning, When Gregor Samsa Woke

H4 Subheading One Morning, When Gregor Samsa Woke

H5 One Morning, When Gregor Samsa Woke
H5 Subheading One Morning, When Gregor Samsa Woke
H6 One Morning, When Gregor Samsa Woke
H6 Subheading One Morning, When Gregor Samsa Woke
<h1 class="small caps italic">Headings</h1>
<h1 class="light">H1  One Morning, When Gregor Samsa Woke</h1>
<h1 class="subheader italic">h1.Sub Heading</h1>
<h2 class="semibold">H2  One Morning, When Gregor Samsa Woke</h2>
<h2 class="subheader">h2.Sub Heading</h2>
<h3>H3  One Morning, When Gregor Samsa Woke</h3>
<h3 class="subheader">h3.Sub Heading</h3>
<h4>H4  One Morning, When Gregor Samsa Woke</h4>
<h4 class="subheader normal">h4.Sub Heading</h4>
<h5>H4  One Morning, When Gregor Samsa Woke</h5>
<h5 class="subheader brand-2">h5.Sub Heading</h5>
<h6>H6  One Morning, When Gregor Samsa Woke</h6>
<h6 class="subheader normal">h6.Sub Heading</h6>

Sub Headings

Section Sub Headings

<h4 class="subheading">Sub Headings</h4>

Paragraphs

This is a lead paragraph donec venenatis vulputate lorem. Nam at tortor in tellus interdum sagittis. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Praesent egestas neque eu enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus.

Drop Cap Paragraph enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Paragraph link. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.

Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.

Normal Paragraph enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.

Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.

Normal Paragraph enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.

Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.

Normal Paragraph enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.

Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.

Normal Paragraph enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.

Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.

Normal Paragraph enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.

Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.

<p class="lead">This is a lead paragraph donec venenatis vulputate lorem. Nam at tortor in tellus interdum sagittis. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Praesent egestas neque eu enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus.</p>
<p class="drop-cap">Drop Cap Paragraph enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. <a href="#">Paragraph link</a>. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<p>Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<img src="http://placehold.it/350x250" class="float-right thumbnail ml3 mb3">
<p>Normal Paragraph enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<p>Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<img src="http://placehold.it/350x250" class="float-left thumbnail mr3 mb3">
<p>Normal Paragraph enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<p>Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<p>Normal Paragraph enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<p>Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<img src="http://placehold.it/1200x400" class="text-center thumbnail mb3">
<p>Normal Paragraph enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<p>Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<p>Normal Paragraph enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<p>Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>

Typography

Italic Font

Upercase Font Decoration

Bold Font Weight

Normal Font Weight

<p class="italic">Italic Font</p>
<p class="caps">Upercase Font Decoration</p>
<p class="bold">Bold Font Weight</p>
<p class="regular">Normal Font Weight</p>

Aligning

Left Align Lorem ipsum Ut a nisl id ante tempus hendrerit.

Right Align Lorem ipsum Ut a nisl id ante tempus hendrerit.

Center Lorem ipsum Ut a nisl id ante tempus hendrerit.

<p class="text-left p1"><strong>Left Align</strong> Lorem ipsum Ut a nisl id ante tempus hendrerit.</p>
<p class="text-right p1"><strong>Right Align</strong> Lorem ipsum Ut a nisl id ante tempus hendrerit.</p>
<p class="text-center p1"><strong>Center</strong> Lorem ipsum Ut a nisl id ante tempus hendrerit.</p>

Blockquotes

Blockquote Text donec venenatis vulputate lorem. Nam at tortor in tellus interdum sagittis. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis.

Optional Authors NameOptional Company

<blockquote>
Blockquote Text donec venenatis vulputate lorem. Nam at tortor in tellus interdum sagittis. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. 
</blockquote>
<p class="quote-author">Optional Authors Name<span class="quote-author-company">Optional Company</span></p>

Spacing

Top Spacing

Margin Top 0
Margin Top 1
Margin Top 2
Margin Top 3
Margin Top 4
Margin Top 5
Margin Top 6
Margin Top 7
Margin Top 8
Margin Top 9
Margin Top 10
Margin Top 11
Margin Top 12

Bottom Spacing

Margin Bottom 0
Margin Bottom 1
Margin Bottom 2
Margin Bottom 3
Margin Bottom 4
Margin Bottom 5
Margin Bottom 6
Margin Bottom 7
Margin Bottom 8
Margin Bottom 9
Margin Bottom 10
Margin Bottom 11
Margin Bottom 12
<div class="mt0">Margin Top 0</div>
<div class="mt1">Margin Top 1</div>
<div class="mt2">Margin Top 2</div>
<div class="mt3">Margin Top 3</div>
<div class="mt4">Margin Top 4</div>
<div class="mt5">Margin Top 5</div>
<div class="mt6">Margin Top 6</div>
<div class="mt7">Margin Top 7</div>
<div class="mt8">Margin Top 8</div>
<div class="mt9">Margin Top 9</div>
<div class="mt10">Margin Top 10</div>
<div class="mt11">Margin Top 11</div>
<div class="mt12">Margin Top 12</div>
<h4 class="mt4 mb1">Bottom Spacing</h4>
<div class="mb0">Margin Bottom 0</div>
<div class="mb1">Margin Bottom 1</div>
<div class="mb2">Margin Bottom 2</div>
<div class="mb3">Margin Bottom 3</div>
<div class="mb4">Margin Bottom 4</div>
<div class="mb5">Margin Bottom 5</div>
<div class="mb6">Margin Bottom 6</div>
<div class="mb7">Margin Bottom 7</div>
<div class="mb8">Margin Bottom 8</div>
<div class="mb9">Margin Bottom 9</div>
<div class="mb10">Margin Bottom 10</div>
<div class="mb11">Margin Bottom 11</div>
<div class="mb12">Margin Bottom 12</div>

Buttons

Disabled Button

Expanded Button

<a class="button large" href="#">Primary Large</a>
<a class="button" href="#">Primary Default</a>
<a class="button tiny" href="#">Primary Tiny</a>
<a class="button secondary large" href="#">Secondary Large</a>
<a class="button secondary" href="#">Secondary Default</a>
<a class="button secondary tiny" href="#">Secondary Tiny</a>
<a class="button tertiary large" href="#">Tertiary Large</a>
<a class="button tertiary" href="#">Tertiary Default</a>
<a class="button tertiary tiny" href="#">Tertiary Tiny</a>
<a class="button stroked" href="#">Primary Stroked</a>
<a class="button secondary stroked" href="#">Secondary Stroked</a>
<a class="button tertiary stroked" href="#">Tertiary Stroked</a>
<a class="button transparent large" href="#">Transparent Large</a>
<a class="button transparent" href="#">Transparent Default</a>
<a class="button transparent tiny" href="#">Transparent Tiny</a>
<a class="button disabled" href="#">Disabled Button</a>
<a class="button expand" href="#">Expanded Button</a>

Lists

  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4
    • Sub List Item 1
    • Sub List Item 2
    • Sub List Item 3
    • Sub List Item 4
    • Sub List Item 5
  • List Item 6
  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4
    • Sub List Item 1
    • Sub List Item 2
    • Sub List Item 3
    • Sub List Item 4
    • Sub List Item 5
  • List Item 6
  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4
    • Sub List Item 1
    • Sub List Item 2
    • Sub List Item 3
    • Sub List Item 4
    • Sub List Item 5
  • List Item 6
  1. Customers First Our customers are our top priority. Meeting and then exceeding your expectations is at the heart of everything we do. We want every interaction you have with us to be a positive one.
  2. Quality We want our customers to experience our commitment to quality in every product we deliver. We aim for an unfailing drive toward quality, transparency, honesty, collaboration, and doing the right thing every time.
  3. Value Every product we offer is selected and inspected with an eye towards providing value for you. We would purchase any of these products for ourselves.
<ul>
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
    <li>List Item 4
        <ul>
            <li>Sub List Item 1</li>
            <li>Sub List Item 2</li>
            <li>Sub List Item 3</li>
            <li>Sub List Item 4</li>
            <li>Sub List Item 5</li>
        </ul>
    </li>
    <li>List Item 6</li>
</ul>
<ul class="checkmarks">
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
    <li>List Item 4
        <ul>
            <li>Sub List Item 1</li>
            <li>Sub List Item 2</li>
            <li>Sub List Item 3</li>
            <li>Sub List Item 4</li>
            <li>Sub List Item 5</li>
        </ul>
    </li>
    <li>List Item 6</li>
</ul>
<ul class="no-bullet">
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
    <li>List Item 4
        <ul>
            <li>Sub List Item 1</li>
            <li>Sub List Item 2</li>
            <li>Sub List Item 3</li>
            <li>Sub List Item 4</li>
            <li>Sub List Item 5</li>
        </ul>
    </li>
    <li>List Item 6</li>
</ul>
 <ol>
  <li><b>Customers First</b> Our customers are our top priority. Meeting and then exceeding your expectations is at the heart of everything we do. We want every interaction you have with us to be a positive one. </li>
  <li><b>Quality</b> We want our customers to experience our commitment to quality in every product we deliver. We aim for an unfailing drive toward quality, transparency, honesty, collaboration, and doing the right thing every time. </li>
  <li><b>Value</b> Every product we offer is selected and inspected with an eye towards providing value for you. We would purchase any of these products for ourselves. </li>
</ol>

Forms

<form>
  <div class="row">
    <div class="large-12 columns">
      <label>Input Label
        <input type="text" placeholder="large-12.columns">
      </label>
    </div>
  </div>
  <div class="row">
    <div class="large-4 columns">
      <label>Input Label
        <input type="text" placeholder="large-4.columns">
      </label>
    </div>
    <div class="large-4 columns">
      <label>Input Label
        <input type="text" placeholder="large-4.columns">
      </label>
    </div>
    <div class="large-4 columns">
      <label>Input Label
        <input type="text" placeholder="large-4.columns">
      </label>
    </div>
  </div>
  <div class="row">
    <div class="large-12 columns">
      <label>Select Box
        <select>
          <option value="husker">Husker</option>
          <option value="starbuck">Starbuck</option>
          <option value="hotdog">Hot Dog</option>
          <option value="apollo">Apollo</option>
        </select>
      </label>
    </div>
  </div>
  <div class="row row-checkbox">
    <div class="large-6 columns">
      <label>Choose Your Favorite</label>
      <label class="input-radio">
        <input type="radio" name="pokemon" value="Red" id="pokemonRed">
        Red</label>
      <label class="input-radio">
        <input type="radio" name="pokemon" value="Blue" id="pokemonBlue">
        Blue</label>
    </div>
    <div class="large-6 columns">
      <label>Check these out</label>
      <label class="input-checkbox">
        <input id="checkbox1" type="checkbox">
        Checkbox 1</label>
      <label class="input-checkbox">
        <input id="checkbox2" type="checkbox">
        Checkbox 2</label>
    </div>
  </div>
  <div class="row">
    <div class="large-12 columns">
      <label>Textarea Label
        <textarea rows="8" placeholder="small-12.columns"></textarea>
      </label>
    </div>
  </div>
  <div class="row">
    <div class="large-12 columns">
      <button type="submit" class="button">Submit</button>
    </div>
  </div>
</form>

Block Grids

<div class="row small-up-1 smedium-up-2 medium-up-3 large-up-4 xlarge-up-5 xxlarge-up-6">
<div class="column column-block"><img src="http://placehold.it/350x300" class="thumbnail"></div>
<div class="column column-block"><img src="http://placehold.it/350x300" class="thumbnail"></div>
<div class="column column-block"><img src="http://placehold.it/350x300" class="thumbnail"></div>
<div class="column column-block"><img src="http://placehold.it/350x300" class="thumbnail"></div>
<div class="column column-block"><img src="http://placehold.it/350x300" class="thumbnail"></div>
<div class="column column-block"><img src="http://placehold.it/350x300" class="thumbnail"></div>
<div class="column column-block"><img src="http://placehold.it/350x300" class="thumbnail"></div>
<div class="column column-block"><img src="http://placehold.it/350x300" class="thumbnail"></div>
<div class="column column-block"><img src="http://placehold.it/350x300" class="thumbnail"></div>
<div class="column column-block"><img src="http://placehold.it/350x300" class="thumbnail"></div>
<div class="column column-block"><img src="http://placehold.it/350x300" class="thumbnail"></div>
<div class="column column-block"><img src="http://placehold.it/350x300" class="thumbnail"></div>
</div>

Callouts

This is a callout.

It has an easy to override visual style, and is appropriately subdued.

It's dangerous to go alone, take this.
This is a secondary callout

It has an easy to override visual style, and is appropriately subdued.

It's dangerous to go alone, take this.
This is a success callout

It has an easy to override visual style, and is appropriately subdued.

It's dangerous to go alone, take this.
This is a warning callout

It has an easy to override visual style, and is appropriately subdued.

It's dangerous to go alone, take this.
This is an alert callout

It has an easy to override visual style, and is appropriately subdued.

It's dangerous to go alone, take this.
This is Important!

But when you're done reading it, click the close button in the corner to dismiss this alert.

I'm using the default data-closable parameters, and simply fade out.

<div class="callout">
	<h5>This is a callout.</h5>
	<p>It has an easy to override visual style, and is appropriately subdued.</p>
	<a href="#">It's dangerous to go alone, take this.</a>
</div>
<div class="callout secondary">
	<h5>This is a secondary callout</h5>
	<p>It has an easy to override visual style, and is appropriately subdued.</p>
	<a href="#">It's dangerous to go alone, take this.</a>
</div>
<div class="callout success">
	<h5>This is a success callout</h5>
	<p>It has an easy to override visual style, and is appropriately subdued.</p>
	<a href="#">It's dangerous to go alone, take this.</a>
</div>
<div class="callout warning">
	<h5>This is a warning callout</h5>
	<p>It has an easy to override visual style, and is appropriately subdued.</p>
	<a href="#">It's dangerous to go alone, take this.</a>
</div>
<div class="callout alert">
	<h5>This is an alert callout</h5>
	<p>It has an easy to override visual style, and is appropriately subdued.</p>
	<a href="#">It's dangerous to go alone, take this.</a>
</div>
<div class="alert callout" data-closable>
	<h5>This is Important!</h5>
	<p>But when you're done reading it, click the close button in the corner to dismiss this alert.</p>
	<p>I'm using the default <code>data-closable</code> parameters, and simply fade out.</p>
                    <button class="close-button" aria-label="Dismiss alert" type="button" data-close>
                        <span aria-hidden="true">&times;</span>
                    </button>
            </div>
            

Slide Content

Slide Toggle With Link

Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.

More Info

Normal Paragraph enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.

Normal Paragraph enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.

Slide Toggle With Button

Normal Paragraph enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.

More Info

Normal Paragraph enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.

Normal Paragraph enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.

<h3>Slide Toggle With Link</h3>
<p>Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus
  laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula,
  eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<div class="slide-toggle-container">
  <p> <a class="slide-toggle" href="#">More Info</a> </p>
  <div class="slide-content">
    <p>Normal Paragraph enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
    <p>Normal Paragraph enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
  </div>
</div>
<h3>Slide Toggle With Button</h3>
<p>Normal Paragraph enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<div class="slide-toggle-container"> <a class="slide-toggle button" href="#"> More Info</a>
  <div class="slide-content">
    <p>Normal Paragraph enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
    <p>Normal Paragraph enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
  </div>
</div>

Accordion

<ul class="accordion" data-accordion>
	<li class="accordion-item is-active" data-accordion-item>
		<!-- Accordion tab title -->
		<a href="#" class="accordion-title">FAQ Question 1. Pellentesque dapibus hendrerit tortor. Donec vitae orci sed dolor?</a>
		<div class="accordion-content" data-tab-content>
			<p>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</p>
		</div>
	</li>
	<li class="accordion-item" data-accordion-item>
		<!-- Accordion tab title -->
		<a href="#" class="accordion-title">FAQ Question 2. Pellentesque dapibus hendrerit tortor. Donec vitae orci sed dolor?</a>
		<div class="accordion-content" data-tab-content>
			<p>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</p>
		</div>
	</li>
	<li class="accordion-item" data-accordion-item>
		<!-- Accordion tab title -->
		<a href="#" class="accordion-title">FAQ Question 3. Pellentesque dapibus hendrerit tortor. Donec vitae orci sed dolor?</a>
		<div class="accordion-content" data-tab-content>
			<p>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</p>
		</div>
	</li>
</ul>

Tables

Table Header Table Header Table Header Table Header
Content Goes Here This is longer content Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
<table class="table">
  <thead>
    <tr>
      <th width="200">Table Header</th>
      <th>Table Header</th>
      <th width="150">Table Header</th>
      <th width="150">Table Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content Goes Here</td>
      <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
      <td>Content Goes Here</td>
      <td>Content Goes Here</td>
    </tr>
    <tr>
      <td>Content Goes Here</td>
      <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
      <td>Content Goes Here</td>
      <td>Content Goes Here</td>
    </tr>
    <tr>
      <td>Content Goes Here</td>
      <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
      <td>Content Goes Here</td>
      <td>Content Goes Here</td>
    </tr>
  </tbody>
</table>
BASF
Bendpak
Hagerty
Instrument Spec
MAC Tools
Mopar CG
Nova Verta
RM DIAMONT
Ryan Agencies
Wizards
Log into Your Account
New here? Create and Account

Your account has been created. Close this popup and you're ready to go!