<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="black">Text Color</div>
<div class="black hue-1">Text Color</div>
<div class="black hue-2">Text Color</div>
<div class="bg-black">Background Color</div>
<div class="bg-black hue-1">Background Color</div>
<div class="bg-black hue-2">Background Color</div>

<h1 class="small caps italic">Headings</h1>
<h1>h1.Heading</h1>
<h1 class="subheader">h1.Sub Heading</h1>
<h2>h2.Heading</h2>
<h2 class="subheader">h2.Sub Heading</h2>
<h3>h3.Heading</h3>
<h3 class="subheader">h3.Sub Heading</h3>
<h4>h4.Heading</h4>
<h4 class="subheader">h4.Sub Heading</h4>
<h5>h5.Heading</h5>
<h5 class="subheader">h5.Sub Heading</h5>
<h6>h6.Heading</h6>
<h6 class="subheader">h6.Sub Heading</h6>

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

<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>

<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>

<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>

<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>

<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>

<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 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>

<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="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>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
  <li>List Item 4
    <ol>
      <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>
    </ol>
  </li>
  <li>List Item 6</li>
</ol>

<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>

<div class="row xsmall-up-1 small-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>

<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>
            

<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>

<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>

<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>