Header Tags

Typography- basic styling for headers. You can also us .h1, .h2, .h3, .h4, .h5, or .h6 to make any text elements style like the associated header tag

Header 1 Tag subheader

Header 2 Tag

Header 3 Tag

Header 4 Tag

Header 5 Tag

Header 6 Tag

<h1>Header 1 Tag
        <small>subheader</small>
      </h1>
      <h2>Header 2 Tag</h2>
      <h3>Header 3 Tag</h3>
      <h4>Header 4 Tag</h4>
      <h5>Header 5 Tag</h5>
      <h6>Header 6 Tag</h6>

Sub Content in Header Tags

[Header Tag] > span.sub-line- basic styling for sub content in headers.

Header 1 Tag sub lines of content in a `span.sub-line`

Header 2 Tag sub lines of content in a `span.sub-line`

Header 3 Tag sub lines of content in a `span.sub-line`

Header 4 Tag sub lines of content in a `span.sub-line`

Header 5 Tag sub lines of content in a `span.sub-line`

Header 6 Tag sub lines of content in a `span.sub-line`

<h1 class="with-underline">Header 1 Tag
  <span class="sub-line">sub lines of content in a `span.sub-line`</span>
</h1>
<h2 class="with-underline">Header 2 Tag
  <span class="sub-line">sub lines of content in a `span.sub-line`</span>
</h2>
<h3 class="with-underline">Header 3 Tag
  <span class="sub-line">sub lines of content in a `span.sub-line`</span>
</h3>
<h4 class="with-underline">Header 4 Tag
  <span class="sub-line">sub lines of content in a `span.sub-line`</span>
</h4>
<h5 class="with-underline">Header 5 Tag
  <span class="sub-line">sub lines of content in a `span.sub-line`</span>
</h5>
<h6 class="with-underline">Header 6 Tag
  <span class="sub-line">sub lines of content in a `span.sub-line`</span>
</h6>

Headline with Counters

.order-marker.- It is some times useful to add an order-marker to the beginning of headlines. You can modify them by adding .hollowor .inversedepending on the need.

1Header 1 Tag

2Header 2 Tag

aHeader 3 Tag

bHollow Marker with H4 Tag

cInversed Marker with H5 Tag

<h1>
  <span class="order-marker">1</span>Header 1 Tag</h1>
<h2>
  <span class="order-marker">2</span>Header 2 Tag</h2>
<h3>
  <span class="order-marker">a</span>Header 3 Tag</h3>
<h4 class="with-underline">
  <span class="order-marker hollow">b</span>Hollow Marker with H4 Tag</h4>
<h5 class="colored-paper" style="">
  <span class="order-marker inverse">c</span>Inversed Marker with H5 Tag</h5>

Header Tags and other Typography States

.error, .warning, .etc...- headers p li blockquote aand ptags can be fully manipulated to respond to states by adding the modifiying state like .error, .warning, .infoetc....

Header 1 Tag Info State

Header 2 Tag Error State

Header 3 Tag Warning State

Header 4 Tag Success State

Header 5 Tag Highlighted State

Paragraph that is a highlighted State.Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.

<h1 class="with-underline info">Header 1 Tag
  <small>Info State</small>
</h1>
<h2 class="with-underline error">Header 2 Tag
  <small>Error State</small>
</h2>
<h3 class="with-underline warning">Header 3 Tag
  <small>Warning State</small>
</h3>
<h4 class="with-underline success">Header 4 Tag
  <span class="sub-line">Success State</span>
</h4>
<h5 class="with-underline highlighted">Header 5 Tag
  <small>Highlighted State</small>
</h5>
<p class="highlighted">
  <strong>Paragraph that is a highlighted State.</strong>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
  ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam
  mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>

Type Modifiers

bold, italic or subtle,etc...- .bold- make text bold, .italic- make text italic, or .subtle- make text subtle

this has the `.bold` class added to the container which increases font weight and darkens the color.

this has the `.emphasis` class added to the container which darkens the color and makes the font italic and bold

this has the `.loud` class added to the container which darkens the color.

this has the `.quiet` class added to the container which lightens the color.

this has the `.subtle` class added to the container which decreases font weight and lightens the color.

this has the `.italic` class added to the container which makes it lighter and makes it italic.

this has the `.text-highlight-color` class added to the container which changes the color to the product color

<div class="bold">this has the `.bold` class added to the container which increases font weight and darkens the color.</div>
<div class="emphasis">this has the `.emphasis` class added to the container which darkens the color and makes the font italic and bold</div>
<div
class="loud">this has the `.loud` class added to the container which darkens the color.</div>
  <div class="quiet">this has the `.quiet` class added to the container which lightens the color.</div>
  <div class="subtle">this has the `.subtle` class added to the container which decreases font weight and lightens the color.</div>
  <div class="italic">this has the `.italic` class added to the container which makes it lighter and makes it italic.</div>
  <div class="text-highlight-color">this has the `.text-highlight-color` class added to the container which changes the color to the product color</div>

Buttons

.nobutton .button .button.navigation or .button.secondary- sample buttons from .buttonyou can modifiers

no button button secondary button disabled button

<a class="nobutton">no button</a>
        <a class="button">button</a>
        <a class="button secondary">secondary button</a>
        <a class="button disabled">disabled button</a>

Selectable Button Group

.selectable.button-group- this is a toggle-able button group that changes colors when items are selected. Add .selected to the lito change colors and add the check to the button.

( !! WARNING !! Updated HTML and Styles From Ver 1)

The container `.question` has an error state. NOTE: if button groups have states it is best for them to have been expanded.

Yes Yes Yes

Error

<h4>Basic</h4>
<div class="question required">
  <div class="input-holder row collapse">
    <div class="column small-12 input-space">
      <div class="button-group selectable">
        <a href="" class="button">
          <i class="fa fa-check"></i>
          <span class="text">Yes</span>
        </a>
        <a href="" class="button">
          <i class="fa fa-check"></i>
          <span class="text">Yes</span>
        </a>
        <a href="" class="button">
          <i class="fa fa-check"></i>
          <span class="text">Yes</span>
        </a>
      </div>
    </div>
  </div>
</div>
<h4>Modified with an item having the class `.selected`</h4>
<div class="question required">
  <div class="input-holder row collapse">
    <div class="column small-12 input-space">
      <div class="button-group selectable">
        <a href="" class="button selected">
          <i class="fa fa-check"></i>
          <span class="text">Yes</span>
        </a>
        <a href="" class="button">
          <i class="fa fa-check"></i>
          <span class="text">Yes</span>
        </a>
        <a href="" class="button">
          <i class="fa fa-check"></i>
          <span class="text">Yes</span>
        </a>
      </div>
    </div>
  </div>
</div>
<h4>Modified with the `.expand`</h4>
<div class="question">
  <div class="input-holder row collapse">
    <div class="column small-12 input-space">
      <div class="button-group expanded selectable">
        <a href="" class="button">
          <i class="fa fa-check"></i>
          <span class="text">Yes</span>
        </a>
        <a href="" class="button">
          <i class="fa fa-check"></i>
          <span class="text">Yes</span>
        </a>
        <a href="" class="button">
          <i class="fa fa-check"></i>
          <span class="text">Yes</span>
        </a>
      </div>
    </div>
  </div>
</div>
<h4>The container `.question` has an error state.
  <span class="sub-line">NOTE: if button groups have states it is best for them to have been expanded.</span>
</h4>
<div class="question error">
  <div class="input-holder row collapse">
    <div class="column small-12 input-space">
      <div class="expanded button-group selectable">
        <a href="" class="button selected">
          <i class="fa fa-check"></i>
          <span class="text">Yes</span>
        </a>
        <a href="" class="button">
          <i class="fa fa-check"></i>
          <span class="text">Yes</span>
        </a>
        <a href="" class="button">
          <i class="fa fa-check"></i>
          <span class="text">Yes</span>
        </a>
      </div>
    </div>
  </div>
  <div class="message-holder">
    <small class="error">Error</small>
  </div>
</div>

Switch (Foundation Override)

.switch- Switches are a more visible and more touchable versions of checkbox and radio buttons.

( !! WARNING !! Updated HTML and Styles From Ver 1)

Yes or No Question

<div class="switch-input-space">
  <div class="switch">
    <input class="switch-input" id="yes-no-1" type="checkbox" name="exampleSwitch">
    <label class="switch-paddle" for="yes-no-1">
      <span class="show-for-sr">Do you like me?</span>
      <span class="switch-active" aria-hidden="true">Yes</span>
      <span class="switch-inactive" aria-hidden="true">No</span>
    </label>
  </div>
  <label class="switch-value" for="yes-no-1">Yes or No Question</label>
</div>

Switch (Disabled)

disable- on the input changes the look and cursor on rollover

Yes or No Question

<div class="switch-input-space  row">
  <div class="switch">
    <input class="switch-input" id="yes-no-disabled" disabled type="checkbox" name="exampleSwitch">
    <label class="switch-paddle" for="yes-no-disabled">
      <span class="show-for-sr">Do you like me?</span>
      <span class="switch-active" aria-hidden="true">Yes</span>
      <span class="switch-inactive" aria-hidden="true">No</span>
    </label>
  </div>
  <label class="switch-value" for="yes-no-disabled">Yes or No Question</label>
</div>

Switch modifing classes

.switch- Switches are remarkably flexable. Radio Buttons should use .radioas modifier, and Checkboxes use .checkbox. .roundand .radiusare very useful to change the look and feel of buttons.

Radio Buttons should use `.round` or `.radio` modifier

You can make a radio with eiither placing the `.round` or `.radio`. *

Radio button made with `.round`

Radio button made with `.radio`

Checkboxes should use `.radius`, `.checkbox`, no modifiers

If you want control over the positive and negative icons use `.radius`. Use `.checkbox` to set it to the standard icon in the positive position

Checkbox button made with `.radius`

Checkbox button made with `.checkbox`

<div class="row group-divide">
  <h4>Radio Buttons should use `.round` or `.radio` modifier</h4>
  <p>You can make a radio with eiither placing the `.round` or `.radio`. *
    <div class="row collapse">
      <div class="switch-input-space column small-6">
        <div class="switch round">
          <input class="switch-input" id="yes-no-round" type="radio" name="radio-switch">
          <label class="switch-paddle" for="yes-no-round">
            <span class="show-for-sr">Do you like me?</span>
            <span class="switch-active" aria-hidden="true">
              <i class="fa fa-check-circle-o"></i>
            </span>
            <span class="switch-inactive" aria-hidden="true">
              <i class="fa fa-times-circle"></i>
            </span>
          </label>
        </div>
        <label class="switch-value" for="yes-no-round">Radio button made with `.round`</label>
      </div>
      <div class="switch-input-space column small-6">
        <div class="switch radio">
          <input class="switch-input" id="yes-no-radio" type="radio" name="radio-switch">
          <label class="switch-paddle" for="yes-no-radio">
            <span class="show-for-sr">Do you like me?</span>
            <span class="switch-active" aria-hidden="true">
              <i class="fa fa-holder"></i>
            </span>
            <span class="switch-inactive" aria-hidden="true">
              <i class="fa fa-holder"></i>
            </span>
          </label>
        </div>
        <label class="switch-value" for="yes-no-radio">Radio button made with `.radio`</label>
      </div>
    </div>
</div>
<div class="row group-divide">
  <h4>Checkboxes should use `.radius`, `.checkbox`, no modifiers</h4>
  <p>If you want control over the positive and negative icons use `.radius`. Use `.checkbox` to set it to the standard icon
    in the positive position</p>
  <div class="row collapse">
    <div class="switch-input-space column small-6">
      <div class="switch radius">
        <input class="switch-input" id="radius-checkbox" type="checkbox" value="true">
        <label class="switch-paddle" for="radius-checkbox">
          <span class="show-for-sr">Do you like me?</span>
          <span class="switch-active" aria-hidden="true">
            <i class="fa fa-check-circle-o"></i>
          </span>
          <span class="switch-inactive" aria-hidden="true">
            <i class="fa fa-times-circle"></i>
          </span>
        </label>
      </div>
      <label class="switch-value" for="radius-checkbox">Checkbox button made with `.radius`</label>
    </div>
    <div class="switch-input-space column small-6">
      <div class="switch checkbox">
        <input class="switch-input" id="checkbox-checkbox" type="checkbox" value="false">
        <label class="switch-paddle" for="checkbox-checkbox">
          <span class="show-for-sr">Do you like me?</span>
          <span class="switch-active" aria-hidden="true">
            <i class="fa fa-holder"></i>
          </span>
          <span class="switch-inactive" aria-hidden="true">
            <i class="fa fa-holder"></i>
          </span>
        </label>
      </div>
      <label class="switch-value" for="checkbox-checkbox">Checkbox button made with `.checkbox`</label>
    </div>
  </div>
</div>

Value Switchers

.value-switch- Add .value-switchto a switch so both inactive and active content of the switcher are visible and stay colored.

You expand the switch area with switch-2x and switch-4x

You can also apply the `.radius` and `.round` to change the style

<div class="switch-input-space column small-12">
  <div class="switch value-switch">
    <input class="switch-input" id="checkbox-value-switch" type="checkbox" value="false">
    <label class="switch-paddle" for="checkbox-value-switch">
      <span class="show-for-sr">Do you like me?</span>
      <span class="switch-active" aria-hidden="true">
        <i class="fa fa-thumbs-up"></i>
      </span>
      <span class="switch-inactive" aria-hidden="true">
        <i class="fa fa-thumbs-down"></i>
      </span>
    </label>
  </div>
</div>
<div class="switch-input-space column small-12">
  <div class="switch value-switch switch-2x radius">
    <input class="switch-input" id="checkbox-value-switch-radius" type="checkbox" value="false">
    <label class="switch-paddle" for="checkbox-value-switch-radius">
      <span class="show-for-sr">Do you like me?</span>
      <span class="switch-active" aria-hidden="true">US</span>
      <span class="switch-inactive" aria-hidden="true">SI</span>
    </label>
  </div>
  <label class="switch-value" for="checkbox-value-switch-radius">You expand the switch area with switch-2x and switch-4x</label>
</div>
<div class="switch-input-space column small-12">
  <div class="switch value-switch switch-4x round">
    <input class="switch-input" id="checkbox-value-switch-round" type="checkbox" value="false">
    <label class="switch-paddle" for="checkbox-value-switch-round">
      <span class="show-for-sr">Do you like me?</span>
      <span class="switch-active" aria-hidden="true">Inches</span>
      <span class="switch-inactive" aria-hidden="true">Centimeters</span>
    </label>
  </div>
  <label class="switch-value" for="checkbox-value-switch-round">You can also apply the `.radius` and `.round` to change the style
  </label>
</div>

Switches with Grouped Content

.switch label- labels can hold more then just plain text but can hold rich text when it is needed. Remember most margins are not needed when placed in labels so using no-vertical-marginmight improve how it looks..

Select One

Bilateral

Muscle symptoms are generalized (e.g., neck and shoulder pain, lower extremity pain)

Bilateral: Possible intolerance

Unilateral

Muscle symptoms are isolated (e.g., knee or shoulder ache)

Unilateral: Unlikely intolerance

<div class="question required">
  <div class="label-holder">
    <label for="">
      <span class="text">
        Select One
      </span>
      <span class="required-holder">
        <i class="fa fa-holder-dynamic">
        </i>
      </span>
    </label>
  </div>
  <div class="switch-input-space column medium-6 large-12">
    <div class="switch radio">
      <input class="switch-input" data-bind="checked:Form().painArea.ForEditing" id="radio1" name="painArea" type="radio" value="true">
      <label class="switch-paddle" for="radio1">
        <span class="show-for-sr">
          Bilateral: Possible intolerance
        </span>
        <span aria-hidden="true" class="switch-active">
          <i class="fa fa-holder">
          </i>
        </span>
        <span aria-hidden="true" class="switch-inactive">
          <i class="fa fa-holder">
          </i>
        </span>
      </label>

    </div>
    <label class="switch-value" for="radio1">
      <h5 style="no-verticle-margin">
        Bilateral
      </h5>
      <p>
        Muscle symptoms are generalized (e.g., neck and shoulder pain, lower extremity pain)
      </p>
      <p class="strong">
        Bilateral: Possible intolerance
      </p>
    </label>
  </div>
  <div class="switch-input-space column medium-6 large-12">
    <div class="switch radio">
      <input class="switch-input" data-bind="checked:Form().painArea.ForEditing" id="radio2" name="painArea" type="radio" value="false">
      <label class="switch-paddle" for="radio2">
        <span class="show-for-sr">
          Unilateral: Unlikely intolerance
        </span>
        <span aria-hidden="true" class="switch-active">
          <i class="fa fa-holder">
          </i>
        </span>
        <span aria-hidden="true" class="switch-inactive">
          <i class="fa fa-holder">
          </i>
        </span>
      </label>

    </div>
    <label class="switch-value" for="radio2">
      <h5 style="no-verticle-margin">
        Unilateral
      </h5>
      <p>
        Muscle symptoms are isolated (e.g., knee or shoulder ache)
      </p>
      <p class="strong">
        Unilateral: Unlikely intolerance
      </p>
    </label>
  </div>
</div>

Switch (States)

.error-active- Switches can be colored with a class [state]-active and [state]-inactive.

Plain switch with `.error-active` and `.sucess-inactive` on the `.switch`

.switch.error-active.warning-inactive/label>

<h3>Plain switch with `.error-active` and `.sucess-inactive` on the `.switch`</h3>
<div class="switch-input-space row">
  <div class="switch warning-active error-inactive switch-2x">
    <input class="switch-input" id="active-inactive" type="checkbox" name="exampleSwitch">
    <label class="switch-paddle" for="active-inactive">
      <span class="show-for-sr">Do you like me?</span>
      <span class="switch-active" aria-hidden="true">Yes</span>
      <span class="switch-inactive" aria-hidden="true">No</span>
    </label>
  </div>
  <label class="switch-value" for="active-inactive">.switch.error-active.warning-inactive/label>
</div>

Slider (Foundation Override)

.range-slider .vertical-range- Sliders are a great peice of UI for mobile and range of numbers !!REQUIRES JAVASCRIPT OF FOUNDATION!!!

Foundation Documentation

<div class="slider" data-slider data-initial-start='50' data-end='200'>
  <span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
  <span class="slider-fill" data-slider-fill></span>
  <input type="hidden">
</div>
<div class="slider vertical" data-slider data-initial-start='25' data-end='200' data-vertical="true">
  <span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
  <span class="slider-fill" data-slider-fill></span>
  <input type="hidden">
</div>
<div class="slider" data-slider data-initial-start='25' data-initial-end='75'>
  <span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
  <span class="slider-fill" data-slider-fill></span>
  <span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
  <input type="hidden">
  <input type="hidden">
</div>
<a class="link" href="http://foundation.zurb.com/sites/docs/slider.html">Foundation Documentation</a>

Top Bar

.top-bar- This is "ACC Style" website headers. These should be used on any product that has multi pages and navigation beyond 1 to 2 tabs

Menu

Search

Profile

<div class="top-bar">
  <div class="hide-for-large">
    <div class="top-bar-left" onClick="$('#siteMenu .top-bar-left').toggleClass('display-block')">
      <a class="top-bar-toggle">
        <i class="fa fa-bars"></i>&nbsp;Menu</a>
    </div>
    <div class="top-bar-right" onClick="$('#siteMenu .top-bar-left').toggleClass('display-block')">
      <a class="top-bar-toggle">Search&nbsp;
        <i class="fa fa-search"></i>
      </a>
    </div>
  </div>
  <div id="siteMenu" class="stack-for-medium">
    <div class="top-bar-left" class="show-for-large">
      <ul class="menu">
        <li>
          <button type="button" data-toggle="example-dropdown">Toggle Dropdown</button>
          <div class="dropdown-pane double-column" id="example-dropdown" data-dropdown data-dropdown data-hover="true" data-hover-pane="true">
            <div class="row collapse">
              <div class="column medium-6">
                <ul class="submenu nav-level-1">
                  <li>
                    <a href="">Menu item</a>
                  </li>
                  <li>
                    <a href="">Menu item</a>
                  </li>
                  <li>
                    <a href="">Menu item</a>
                  </li>
                  <li class="parent">
                    <ul class="submenu nav-level-2">
                      <li>
                        <a href="">Secondary Menu item</a>
                      </li>
                      <li>
                        <a href="">Secondary Menu item</a>
                      </li>
                      <li>
                        <a href="">Secondary Menu item</a>
                      </li>
                      <li>
                        <a href="">Secondary Menu item</a>
                      </li>
                      <li>
                        <a href="">Secondary Menu item</a>
                      </li>
                    </ul>
                  </li>
                  <li>
                    <a href="">Menu item</a>
                  </li>
                </ul>
              </div>
              <div class="column medium-6">
                <ul class="submenu nav-level-1">
                  <li>
                    <a href="">Menu item</a>
                  </li>
                  <li>
                    <a href="">Menu item</a>
                  </li>
                  <li>
                    <a href="">Menu item</a>
                  </li>
                  <li>
                    <a href="">Menu item</a>
                  </li>
                  <li>
                    <a href="">Menu item</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </li>
        <li>
          <a href="#">Two</a>
        </li>
        <li>
          <a href="#">Three</a>
        </li>
      </ul>
    </div>
    <div class="top-bar-right" class="show-for-large">
      <ul class="menu">
        <li>
          <a href="">Drop Down</a>
        </li>
        <li>
          <a href="#">Two</a>
        </li>
        <li>
          <a href="#">Three</a>
        </li>
      </ul>
    </div>
  </div>
</div>

Tabs (Basic)

.tabs- Group of nav that is build for a horizontal space.

( !! WARNING !! Updated HTML and Styles From Ver 1)

<nav class="nav">
  <ul class=" tabs">
    <li class="tabs-title icon">
      <a class="home">
        <i class="fa fa-holder"></i>
      </a>
    </li>
    <li class="tabs-title">
      <a>Tab 2</a>
    </li>
    <li class="tabs-title is-active">
      <a>Tab 3</a>
    </li>
    <li class="tabs-title">
      <a>Tab 4</a>
    </li>
  </ul>
</nav>

Tabs (modifications)

.tabs+[modification]- Tabs can be modified with .secondary, .disabled, .visited, .locked

<nav class="nav">
  <ul class="tabs">
    <li class="tabs-title visited locked">
      <a class="home">visited locked</a>
    </li>
    <li class="tabs-title visited locked">
      <a>visited locked</a>
    </li>
    <li class="tabs-title selected">
      <a>Selected</a>
    </li>
    <li class="tabs-title secondary">
      <a>Secondary</a>
    </li>
    <li class="tabs-title disabled">
      <a>Disabled</a>
    </li>
  </ul>
</nav>

Tabs Overlap

.tabs.overlap- Overlap gives shallow space to give a small layer effect

<nav class="overlap nav">
  <ul class="tabs ">
    <li class="tab-title icon">
      <a class="home">
        <i class="fa fa-holder"></i>
      </a>
    </li>
    <li class="tab-title ">
      <a>Tab 2</a>
    </li>
    <li class="tab-title is-active">
      <a>Tab 3</a>
    </li>
    <li class="tab-title ">
      <a>Tab 4</a>
    </li>
  </ul>
</nav>

Tabs on Paper Pages

.page.paper-page > .overlap >.tabs- Tabs placed outside of cards are used to change all cards under the tabs. This pattern is used for sub page toggling.

Hello

This is content that is showing up in a section group

<div class="page paper-page">
  <nav class="overlap">
    <ul class="tabs">
      <li class="icon">
        <a class="home">
          <i class="fa fa-holder"></i>
        </a>
      </li>
      <li class="">
        <a>Tab 2</a>
      </li>
      <li class="selected">
        <a>Tab 3</a>
      </li>
      <li class="">
        <a>Tab 4</a>
      </li>
    </ul>
  </nav>
  <div class="page-wrapper">
    <section class="section group-section radius">
      <h1>Hello</h1>
      <p>This is content that is showing up in a section group</p>
    </section>
  </div>
</div>

Tabs Primary

.tabs.tabs-primary- Priamary is used for top level nav for mobile porjects.

( !! WARNING !! Updated HTML and Styles From Ver 1)

<ul class="nav tabs tabs-primary">
  <li class="icon tabs-title ">
    <a class="home" href="#">
      <i class="fa fa-holder"></i>
    </a>
  </li>
  <li class=" tabs-title">
    <a href="#">Tab 2</a>
  </li>
  <li class="selected tabs-title ">
    <a href="#">Tab 3</a>
  </li>
  <li class=" tabs-title">
    <a href="#">Tab 4</a>
  </li>
  <li class=" tabs-title">
    <a href="#">Tab 5</a>
  </li>
  <li class="disabled tabs-title">
    <a href="#">Tab 6</a>
  </li>
</ul>
<ul class="nav tabs tabs-primary reverse">
  <li class="icon   tabs-title">
    <a class="home" href="#">
      <i class="fa fa-holder"></i>
    </a>
  </li>
  <li class=" tabs-title">
    <a href="#">Tab 2</a>
  </li>
  <li class="selected tabs-title">
    <a href="#">Tab 3</a>
  </li>
  <li class=" tabs-title">
    <a href="#">Tab 4</a>
  </li>
  <li class=" tabs-title">
    <a href="#">Tab 5</a>
  </li>
  <li class="disabled tabs-title">
    <a href="#">Tab 6</a>
  </li>
</ul>

.nav-list ul li - A collection of navigation links perfect for side navigation or a collection of external links. Add .selected to the li to highlight the nav link.

<nav class="nav-list">
        <ul>
          <li>
            <a>
              <span class="text">Nav List Item 1span>
              <i class="fa fa-holder-dynamic">i>
            a>
          li>
          <li class="selected">
            <a>
              <span class="text">Nav List Item 2span>
              <i class="fa fa-holder-dynamic">i>
            a>
          li>
        ul>
      nav>

Nav List (Checklist)

.nav-checklist- add class to the nav to change the .nav-list from forward links to a list with states of .selected, .success, .warning, .error

<nav class="nav-list nav-checklist">
  <ul>
    <li class="">
      <a>
        <span class="text">Nav List Item 1(blank)</span>
        <i class="fa fa-holder-dynamic"></i>
      </a>
      <li class="selected">
        <a>
          <span class="text">Nav List Item 2(selected)</span>
          <i class="fa fa-holder-dynamic"></i>
        </a>
      </li>
      <li class="sucess">
        <a>
          <span class="text">Nav List Item 3(sucess)</span>
          <i class="fa fa-holder-dynamic"></i>
        </a>
      </li>
  </ul>
</nav>

Nav List (Checklist w/ States)

.nav-checklist.statename- add class to the nav to change the list item to reflect the state with .warning, .error, .highlighted...

<nav class="nav-list nav-checklist">
  <ul>
    <li class="">
      <a>
        <span class="text">Nav List Item 1(blank)</span>
        <i class="fa fa-holder-dynamic"></i>
      </a>
      <li class="selected">
        <a>
          <span class="text">Nav List Item 2(selected and warning)</span>
          <i class="fa fa-holder-dynamic"></i>
        </a>
      </li>
      <li class="highlighted">
        <a>
          <span class="text">Nav List Item 3(highlighted)</span>
          <i class="fa fa-holder-dynamic"></i>
        </a>
      </li>
      <li class="warning">
        <a>
          <span class="text">Nav List Item 4(warning)</span>
          <i class="fa fa-holder-dynamic"></i>
        </a>
      </li>
      <li class="error">
        <a>
          <span class="text">Nav List Item 5(error)</span>
          <i class="fa fa-holder-dynamic"></i>
        </a>
      </li>
      <li class="disabled">
        <a>
          <span class="text">Nav List Item 5(disabled)</span>
          <i class="fa fa-holder-dynamic"></i>
        </a>
      </li>
  </ul>
</nav>

Nav List (With Headlines)

.nav-list ul li- The nav list changes styles depending on the headline tag in front of the nav-list. or simply add the class large, medium, or small

H1 header tag

This list has the medium class

H3 header tag

<h1>H1 header tag</h1>
<nav class="nav-list">
  <ul>
    <li>
      <a>
        <span class="text">Nav List Item 1</span>
        <i class="fa fa-holder-dynamic"></i>
      </a>
    </li>
    <li class="selected">
      <a>
        <span class="text">Nav List Item 2</span>
        <i class="fa fa-holder-dynamic"></i>
      </a>
    </li>
    </li>
  </ul>
</nav>
<br>
<div>This list has the medium class</div>
<nav class="nav-list medium">
  <ul>
    <li>
      <a>
        <span class="text">Nav List Item 1</span>
        <i class="fa fa-holder-dynamic"></i>
      </a>
    </li>
    <li class="selected">
      <a>
        <span class="text">Nav List Item 2</span>
        <i class="fa fa-holder-dynamic"></i>
      </a>
    </li>
    </li>
  </ul>
</nav>
<br>
<h3>H3 header tag</h3>
<nav class="nav-list">
  <ul>
    <li>
      <a>
        <span class="text">Nav List Item 1</span>
        <i class="fa fa-holder-dynamic"></i>
      </a>
    </li>
    <li class="selected">
      <a>
        <span class="text">Nav List Item 2</span>
        <i class="fa fa-holder-dynamic"></i>
      </a>
    </li>
    </li>
  </ul>
</nav>

Pagination

.pagination-holder .pagination- Pagination is often used when there is a table or page of results or repeated items. The Container defaultly styles the paginator to be at the bottom of the area of repeated content but render it at the top just add the class '.top' to render the pagination upside down. The paginator has a single modifier to condense the screen size by adding the class .pagination--compact.

prev
1
2
3
4
next

prev
1
2
3
4
next

Add
Remove

this is some content

prev
1
2
3
4
next

prev
1
2
3
4
next

Add
Remove

prev
1
2
3
4
next

<div class="pagination-holder top">
  <ul class="pagination float-right">
    <li class="arrow disable left">
      <a href="">
        <i class="fa fa-caret-left "></i>
        <span class="text">prev</span>
      </a>
    </li>
    <li class="current">
      <a href="">1</a>
    </li>
    <li>
      <a href="">2</a>
    </li>
    <li>
      <a href="">3</a>
    </li>
    <li>
      <a href="">4</a>
    </li>
    <li class="arrow right">
      <a href="">
        <span class="text">next</span>
        <i class="fa fa-caret-right "></i>
      </a>
    </li>
  </ul>
</div>
<br>
<div class="page with-group-sections">
  <div class="page-wrapper">
    <section class="section group-section">
      <div class="group-section-pagination-holder top">
        <ul class="pagination pagination--compact float-left">
          <li class="arrow disable">
            <a href="">
              <i class="fa fa-caret-left "></i>
              <span class="text">prev</span>
            </a>
          </li>
          <li class="current">
            <a href="">1</a>
          </li>
          <li>
            <a href="">2</a>
          </li>
          <li>
            <a href="">3</a>
          </li>
          <li>
            <a href="">4</a>
          </li>
          <li class="arrow">
            <a href="">
              <span class="text">next</span>
              <i class="fa fa-caret-right "></i>
            </a>
          </li>
        </ul>
        <ul class="pagination float-right">
          <li class="action">
            <a href="">
              <i class="fa fa-plus "></i>
              <span class="text">Add</span>
            </a>
          </li>
          <li class="action">
            <a href="">
              <i class="fa fa-times "></i>
              <span class="text">Remove</span>
            </a>
          </li>
        </ul>
      </div>
      <div class="callout">this is some content</div>
      <div class="pagination-holder">
        <ul class="pagination pagination--compact float-right">
          <li class="arrow disable">
            <a href="">
              <i class="fa fa-caret-left "></i>
              <span class="text">prev</span>
            </a>
          </li>
          <li class="current">
            <a href="">1</a>
          </li>
          <li>
            <a href="">2</a>
          </li>
          <li>
            <a href="">3</a>
          </li>
          <li>
            <a href="">4</a>
          </li>
          <li class="arrow">
            <a href="">
              <span class="text">next</span>
              <i class="fa fa-caret-right "></i>
            </a>
          </li>
        </ul>
      </div>
      <div class="group-section-pagination-holder">
        <ul class="pagination pagination--compact float-left">
          <li class="arrow disable">
            <a href="">
              <i class="fa fa-caret-left "></i>
              <span class="text">prev</span>
            </a>
          </li>
          <li class="current">
            <a href="">1</a>
          </li>
          <li>
            <a href="">2</a>
          </li>
          <li>
            <a href="">3</a>
          </li>
          <li>
            <a href="">4</a>
          </li>
          <li class="arrow">
            <a href="">
              <span class="text">next</span>
              <i class="fa fa-caret-right "></i>
            </a>
          </li>
        </ul>
        <ul class="pagination float-right">
          <li class="action">
            <a href="">
              <i class="fa fa-plus "></i>
              <span class="text">Add</span>
            </a>
          </li>
          <li class="action">
            <a href="">
              <i class="fa fa-times "></i>
              <span class="text">Remove</span>
            </a>
          </li>
        </ul>
      </div>
    </section>
    <div class="content-padding">
      <div class="pagination-holder">
        <ul class="pagination pagination--compact float-left">
          <li class="arrow disable">
            <a href="">
              <i class="fa fa-caret-left "></i>
              <span class="text">prev</span>
            </a>
          </li>
          <li class="current">
            <a href="">1</a>
          </li>
          <li>
            <a href="">2</a>
          </li>
          <li>
            <a href="">3</a>
          </li>
          <li>
            <a href="">4</a>
          </li>
          <li class="arrow">
            <a href="">
              <span class="text">next</span>
              <i class="fa fa-caret-right "></i>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

Pagination with Result Selector

.pagination-holder .pagination.result-selector- used often with a paginator is a ruslt selector. This allows the user to limit the amount of returned items on a single page. Because the Result Selector is bult on the paginator design it can also be used at the top or bottom like a paginator.

Show
10
20
50
Results

prev
1
2
3
4
next

Show
10
20
50
Results

prev
1
2
3
4
next

<div class="pagination-holder top">
  <ul class="pagination result-selector float-left">
    <li class="label">Show</li>
    <li class="current">
      <a href="">10</a>
    </li>
    <li>
      <a href="">20</a>
    </li>
    <li>
      <a href="">50</a>
    </li>
    <li class="value">Results</li>
  </ul>
  <ul class="pagination float-right">
    <li class="arrow unavailable">
      <a href="">
        <i class="fa fa-caret-left "></i>
        <span class="text">prev</span>
      </a>
    </li>
    <li class="current">
      <a href="">1</a>
    </li>
    <li>
      <a href="">2</a>
    </li>
    <li>
      <a href="">3</a>
    </li>
    <li>
      <a href="">4</a>
    </li>
    <li class="arrow">
      <a href="">
        <span class="text">next</span>
        <i class="fa fa-caret-right "></i>
      </a>
    </li>
  </ul>
</div>
<br>
<div class="pagination-holder bottom">
  <ul class="pagination result-selector float-left">
    <li class="label">Show</li>
    <li class="current">
      <a href="">10</a>
    </li>
    <li>
      <a href="">20</a>
    </li>
    <li>
      <a href="">50</a>
    </li>
    <li class="value">Results</li>
  </ul>
  <ul class="pagination float-right">
    <li class="arrow unavailable">
      <a href="">
        <i class="fa fa-caret-left "></i>
        <span class="text">prev</span>
      </a>
    </li>
    <li class="current">
      <a href="">1</a>
    </li>
    <li>
      <a href="">2</a>
    </li>
    <li>
      <a href="">3</a>
    </li>
    <li>
      <a href="">4</a>
    </li>
    <li class="arrow">
      <a href="">
        <span class="text">next</span>
        <i class="fa fa-caret-right "></i>
      </a>
    </li>
  </ul>
</div>

Circle Section Nav (forward & back)

.section-nav with .forward or .back- A wizard-like page nav. Alter the position of the circle button by adding .forwardor .backto the .section-navcontainer.

Back

Page Title

hello I am some content on this page

Forward

<div class="page with-group-sections">
  <div class="section-nav back">
    <a>
      <div class="circle">
        <i class="fa fa-holder-dynamic"></i>
      </div>
      <div class="text">Back</div>
    </a>
  </div>
  <div class="page-wrapper">
    <section class="group-section">
      <h1 class="with-underline">Page Title</h1>
      <p>hello I am some content on this page</p>
  </div>
  </section>
  <div class="section-nav forward">
    <a>
      <div class="circle">
        <i class="fa fa-holder-dynamic"></i>
      </div>
      <div class="text">Forward</div>
    </a>
  </div>
</div>

Circle Section Nav (Disabled)

.section-nav with .disabled- Adding .disabledto the .section-navcontainer with style the circle nav accordingly.

Back

Page Title (Disabled)

Somethig on this page has disabled forward navigation

Forward

<div class="page">
  <div class="section-nav back disabled">
    <a>
      <div class="circle">
        <i class="fa fa-holder-dynamic"></i>
      </div>
      <div class="text">Back</div>
    </a>
  </div>
  <div class="page-wrapper">
    <section class="group-section">
      <h1 class="with-underline">Page Title (Disabled)</h1>
      <p>Somethig on this page has disabled forward navigation</p>
  </div>
  </section>
  <div class="section-nav forward disabled">
    <a>
      <div class="circle">
        <i class="fa fa-holder-dynamic"></i>
      </div>
      <div class="text">Forward</div>
    </a>
  </div>
</div>

Paper Cards

.page.paper-page .page-wrapper.content-padding .card- by default pages are white but when the need arises to have grouped section 'cards' are introduced and the background area becomes a layer of soft off white construction paper. If the need arises to highlight a collection of cards add .highlightedto the .page.with-group-sectionsand the product color will bleed into the construction paper.

Hello

This is content that is showing up in a section group

.Page.Paper-Page.Error

.Page.Paper-Page.Highlighted

<div class="page paper-page">
  <div class="page-wrapper content-padding">
    <section class="section group-section">
      <h1>Hello</h1>
      <p>This is content that is showing up in a section group</p>
    </section>
  </div>
</div>
<div class="page paper-page error">
  <div class="page-wrapper content-padding">
    <section class="section card">
      <h1>.Page.Paper-Page.Error</h1>
    </section>
  </div>
</div>
<div class="page paper-page highlighted">
  <div class="page-wrapper content-padding">
    <section class="section card">
      <h1>.Page.Paper-Page.Highlighted</h1>
    </section>
  </div>
  <div class="page-wrapper content-padding">
    <section class="section card ghost">
      <h1>.Page.Paper-Page .Card.Ghost</h1>
    </section>
  </div>
</div>

Ghost Cards

card.ghost- Ghosted cards are used as holder for an upcoming or locked section. When you want to show a section that will become editable or expanded but don't want it to pop in ghost is a good design pattern to use.

Hello I am a ghost

you can see I am transparent and I do not float like other cards.

Colored Paper is Effected by Ghosting

.Page.Paper-Page.Error .Card.Ghost

<div class="page paper-page">
  <div class="page-wrapper content-padding">
    <section class="section card">
      <h1>Hello I am a ghost</h1>
      <p>This is content that is showing up in a section group</p>
    </section>
  </div>
</div>
<div class="page paper-page error">
  <div class="page-wrapper content-padding">
    <section class="section card ghost">
      <div class="error colored-paper">Colored Paper is Effected by Ghosting</div>
      <h1>.Page.Paper-Page.Error .Card.Ghost</h1>
    </section>
  </div>
</div>

Tabs on Paper Pages

.page.paper-page > .overlap >.tabs- Tabs placed outside of cards are used to change all cards under the tabs. This pattern is used for sub page toggling.

Hello

This is content that is showing up in a section group

<div class="page paper-page">
  <nav class="overlap">
    <ul class="tabs">
      <li class="icon">
        <a class="home">
          <i class="fa fa-holder"></i>
        </a>
      </li>
      <li class="">
        <a>Tab 2</a>
      </li>
      <li class="selected">
        <a>Tab 3</a>
      </li>
      <li class="">
        <a>Tab 4</a>
      </li>
    </ul>
  </nav>
  <div class="page-wrapper">
    <section class="section group-section radius">
      <h1>Hello</h1>
      <p>This is content that is showing up in a section group</p>
    </section>
  </div>
</div>

Tabs on Paper Pages with States

.page.paper-page > .overlap >.tabs- Tabs placed outside of cards are used to change all cards under the tabs. This pattern is used for sub page toggling.

Hello

This is content that is showing up in a section group

Hello

This is content that is showing up in a section group

<div class="page paper-page warning">
  <nav class="overlap">
    <ul class="tabs">
      <li class="icon">
        <a class="home">
          <i class="fa fa-holder"></i>
        </a>
      </li>
      <li class="">
        <a>Tab 2</a>
      </li>
      <li class="selected">
        <a>Tab 3</a>
      </li>
      <li class="">
        <a>Tab 4</a>
      </li>
    </ul>
  </nav>
  <div class="page-wrapper content-padding">
    <section class="section group-section radius">
      <h1>Hello</h1>
      <p>This is content that is showing up in a section group</p>
    </section>
  </div>
</div>
<div class="page paper-page error">
  <nav class="overlap">
    <ul class="tabs">
      <li class="icon">
        <a class="home">
          <i class="fa fa-holder"></i>
        </a>
      </li>
      <li class="">
        <a>Tab 2</a>
      </li>
      <li class="selected">
        <a>Tab 3</a>
      </li>
      <li class="">
        <a>Tab 4</a>
      </li>
    </ul>
  </nav>
  <div class="page-wrapper content-padding">
    <section class="section group-section radius">
      <h1>Hello</h1>
      <p>This is content that is showing up in a section group</p>
    </section>
  </div>
</div>

Tabs for Paper Cards

.page.paper-page .card .colored-paper .nav.tabs- Special tabs holders are introduced to the cards so they can fill the full frame of the card. .color-paperis a container that wraps Tabs.This pattern should be used to toggle content on a single card or area of a card.

Hello

This is content that is showing up in a section group

I am Sub Tab Content

This is content under a secondary tab in a card

<div class="page paper-page">
  <div class="page-wrapper content-padding">
    <section class="section card">
      <div class="colored-paper">
        <nav>
          <ul class="nav tabs">
            <li class="">
              <a>Tab 1</a>
            </li>
            <li class=" selected ">
              <a>Tab 2</a>
            </li>
            <li class="">
              <a>Tab 3</a>
            </li>
          </ul>
        </nav>
      </div>
      <h1>Hello</h1>
      <p>This is content that is showing up in a section group</p>
      <div class="colored-paper info">
        <nav>
          <ul class="nav tabs">
            <li class="">
              <a>Tab 1</a>
            </li>
            <li class=" selected ">
              <a>Tab 2</a>
            </li>
            <li class="">
              <a>Tab 3</a>
            </li>
          </ul>
        </nav>
      </div>
      <h2>I am Sub Tab Content</h2>
      <p>This is content under a secondary tab in a card</p>
    </section>
  </div>
</div>

Content in Colored paper

.page.paper-page .card .color-paper *- Content can be written into colored paper but it is limited to basic contnet like headers and paragraph tags.

I am Content inside of a colored paper

This is a "p" tag inside of colored paper

<div class="page paper-page">
  <div class="page-wrapper">
    <section class="section card">
      <div class="colored-paper">
        <h2>I am Content inside of a colored paper</h2>
        <p>This is a "p" tag inside of colored paper</p>
      </div>
    </section>
  </div>
</div>

Content in Colored paper

.color-paper.[state]- Colored paper can be colored with states to change it from its base color which is the product color.

Warning State

Info State

Error State

<div class="page paper-page">
  <div class="page-wrapper">
    <div class="row">
      <div class="medium-4 columns">
        <div class="card">
          <div class="colored-paper warning">
            <h3 class="text-center">Warning State</h3>
          </div>
        </div>
      </div>
      <div class="medium-4 columns">
        <div class="card">
          <div class="colored-paper info">
            <h3 class="text-center">Info State</h3>
          </div>
        </div>
      </div>
      <div class="medium-4 columns">
        <div class="card">
          <div class="colored-paper error">
            <h3 class="text-center">Error State</h3>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Paper Card Rounded Corners

.card.radius- Using the Utility Class of radius you can round the corners of cards. Just add "radius" "radius-top" "radius-bottom"

radius-top

colored paper also gets the rounded corners set by the card

radius

radius-bottom

colored paper

<div class="page with-group-sections">
  <div class="page-wrapper">
    <div class="row">
      <div class="medium-4 columns">
        <div class="card radius-top">
          <div class="colored-paper">
            <h3 class="text-center">radius-top</h3>
          </div>
          <p>colored paper also gets the rounded corners set by the card</p>
        </div>
      </div>
      <div class="medium-4 columns">
        <div class="card radius">
          <h3 class="text-center">radius</h3>
        </div>
      </div>
      <div class="medium-4 columns">
        <div class="card radius-bottom">
          <h3 class="text-center">radius-bottom</h3>
          <div class="colored-paper">
            <h3 class="text-center">colored paper</h3>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Questions -Required

.question- Below is a standard formating for an input question. The questions elements are designed to be fluid with in the questions width dimensions. So to have a smaller input constrain the .queationcontainer. Modify with .requiredand change the states with warning, 'error', and 'data'

Question Dropdown Title (Required)

Years

Error message Warning message Data message

This is some hint text

Question Dropdown Title (Required)

Click Me

<div class="question required">
  <div class="label-holder">
    <label for="">
      <span class="text">Question Dropdown Title (Required)</span>
      <span class="required-holder">
        <i class="fa fa-holder-dynamic"></i>
      </span>
    </label>
  </div>
  <div class="input-holder">
    <div class="input-space column small-6 large-9">
      <input type="text" />
    </div>
    <div class="column small-6 large-3">
      <small class="value">Years</small>
    </div>
  </div>
  <div class="message-holder">
    <small class="error">
      <i class="fa fa-holder"></i>Error message</small>
    <small class="warning">
      <i class="fa fa-holder"></i>Warning message</small>
    <small class="data">
      <i class="fa fa-holder"></i>Data message</small>
  </div>
  <div class="hint">This is some hint text</div>
</div>

Questions - States

.question + .warning + error +...- Modify the container with .required, .warning, '.error', and other states. Modifiers change the icons and control the visiblity of the message holder.

Question

Years

Error message Warning message Data message

This is some hint text

<div class="question warning wildcard">
  <div class="label-holder">
    <label for="">
      <span class="text">Question</span>
      <span class="required-holder">
        <i class="fa fa-holder-dynamic"></i>
      </span>
    </label>
  </div>
  <div class="input-holder">
    <div class="input-space column small-6 large-9">
      <input type="text" />
    </div>
    <div class="column small-6 large-3">
      <small class="value">Years</small>
    </div>
  </div>
  <div class="message-holder">
    <small class="error">
      <i class="fa fa-holder"></i>Error message</small>
    <small class="warning">
      <i class="fa fa-holder"></i>Warning message</small>
    <small class="info">
      <i class="fa fa-holder"></i>Data message</small>
  </div>
  <div class="hint">This is some hint text</div>
</div>

Questions Grid Based

.question-grid-based- This is a variation of the question block used by NCDR. .label-holder & .input-holderare used as containters so you can add class grid sizer to the split_1of5, split_2of5, split_3of5, split_4of5to control the size of the label and input space.

Default

Question Title 1234

This is some hint text

Error message Warning message Data message

This is some hint text

<div class="row">
  <h5 class="highlighted">Default</h5>
  <div class="column small-12 end">
    <div class="question-grid-based span-2-col required label-position-left">
      <div class="label-holder">
        <label for="">
          <span class="text">Question Title
            <a class="seq">1234</a>
          </span>
          <span class="required-holder">
            <i class="fa fa-holder-dynamic"></i>
          </span>
        </label>
        <div class="hint">This is some hint text</div>
      </div>
      <div class="input-holder">
        <div class="input-space">
          <input type="text">
        </div>
        <div class="message-holder">
          <small class="error">
            <i class="fa fa-holder"></i>Error message</small>
          <small class="warning">
            <i class="fa fa-holder"></i>Warning message</small>
          <small class="data">
            <i class="fa fa-holder"></i>Data message</small>
        </div>
        <div class="hint">This is some hint text</div>
      </div>
    </div>
  </div>
</div>

Chile Indent Modifier

.indent-1- Grid questions can show there relationship to eachother by the use of indent modifiers. Children indent their inputs and mark themselves to show the relationship to the parent.

Default

Question Indent 1 1234

This is some hint text

Error message Warning message Data message

This is some hint text

Question Indent 2 1234

This is some hint text

Error message Warning message Data message

This is some hint text

Question Indent 3 1234

This is some hint text

Error message Warning message Data message

This is some hint text

<div class="row">
  <h5 class="highlighted">Default</h5>
  <div class="column small-12 last">
    <div class="question-grid-based span-2-col required label-position-left indent-1">
      <div class="label-holder">
        <label for="">
          <span class="text">Question Indent 1
            <a class="seq">1234</a>
          </span>
          <span class="required-holder">
            <i class="fa fa-holder-dynamic"></i>
          </span>
        </label>
        <div class="hint">This is some hint text</div>
      </div>
      <div class="input-holder">
        <div class="input-space">
          <input type="text">
        </div>
        <div class="message-holder">
          <small class="error">
            <i class="fa fa-holder"></i>Error message</small>
          <small class="warning">
            <i class="fa fa-holder"></i>Warning message</small>
          <small class="data">
            <i class="fa fa-holder"></i>Data message</small>
        </div>
        <div class="hint">This is some hint text</div>
      </div>
    </div>
  </div>
  <div class="column small-12 last">
    <div class="question-grid-based span-2-col required label-position-left indent-2">
      <div class="label-holder">
        <label for="">
          <span class="text">Question Indent 2
            <a class="seq">1234</a>
          </span>
          <span class="required-holder">
            <i class="fa fa-holder-dynamic"></i>
          </span>
        </label>
        <div class="hint">This is some hint text</div>
      </div>
      <div class="input-holder">
        <div class="input-space">
          <input type="text">
        </div>
        <div class="message-holder">
          <small class="error">
            <i class="fa fa-holder"></i>Error message</small>
          <small class="warning">
            <i class="fa fa-holder"></i>Warning message</small>
          <small class="data">
            <i class="fa fa-holder"></i>Data message</small>
        </div>
        <div class="hint">This is some hint text</div>
      </div>
    </div>
  </div>
  <div class="column small-6">
    <div class="question-grid-based required label-position-left indent-3">
      <div class="label-holder">
        <label for="">
          <span class="text">Question Indent 3
            <a class="seq">1234</a>
          </span>
          <span class="required-holder">
            <i class="fa fa-holder-dynamic"></i>
          </span>
        </label>
        <div class="hint">This is some hint text</div>
      </div>
      <div class="input-holder">
        <div class="input-space">
          <input type="text">
        </div>
        <div class="message-holder">
          <small class="error">
            <i class="fa fa-holder"></i>Error message</small>
          <small class="warning">
            <i class="fa fa-holder"></i>Warning message</small>
          <small class="data">
            <i class="fa fa-holder"></i>Data message</small>
        </div>
        <div class="hint">This is some hint text</div>
      </div>
    </div>
  </div>
  <div class="column small-6"></div>
</div>

Single Switch Modifier

.label-position-right.single-switch[.tiny-switches,.small-switches,.large-switches]- Single switches sometimes don't have value labels but use the question labels. The size and alignment of the switches controlled by adding .tiny-switches, .small-switches, .large-switchesto the question div.

Question Indent 3 1234

<div class="row">
  <div class="column small-12">
    <div class="question-grid-based required single-switch label-position-right small-switches">
      <div class="label-holder">
        <label for="">
          <span class="text">Question Indent 3
            <a class="seq">1234</a>
          </span>
          <span class="required-holder">
            <i class="fa fa-holder-dynamic"></i>
          </span>
        </label>
      </div>
      <div class="input-holder">
        <div class="switch-input-space">
          <div class="switch radius">
            <input class="switch-input" id="radius-singleswitch" type="checkbox" value="true">
            <label class="switch-paddle" for="radius-singleswitch">
              <span class="show-for-sr">Do you like me?</span>
              <span class="switch-active" aria-hidden="true">
                <i class="fa fa-holder"></i>
              </span>
              <span class="switch-inactive" aria-hidden="true">
                <i class="fa fa-holder"></i>
              </span>
            </label>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Repeating Switches Column Modifier

.group-3up- special quesitons have repeating inputs like radio buttons ths controls how if the inputs will spread themselves into columns.

Question Indent 3 1234

Random Label Length

<div class="row">
  <div class="column small-12">
    <div class="question-grid-based required label-position-left span-2-col group-2up">
      <div class="label-holder">
        <label for="">
          <span class="text">Question Indent 3
            <a class="seq">1234</a>
          </span>
          <span class="required-holder">
            <i class="fa fa-holder-dynamic"></i>
          </span>
        </label>
      </div>
      <div class="input-holder">
        <div class="switch-input-space">
          <div class="switch radius">
            <input class="switch-input" id="radius-checkbox1" type="checkbox" value="true">
            <label class="switch-paddle" for="radius-checkbox1">
              <span class="show-for-sr">Do you like me?</span>
              <span class="switch-active" aria-hidden="true">
                <i class="fa fa-check-circle-o"></i>
              </span>
              <span class="switch-inactive" aria-hidden="true">
                <i class="fa fa-times-circle"></i>
              </span>
            </label>
          </div>
          <label class="switch-value" for="radius-checkbox1">Random Label Length</label>
        </div>
        <div class="switch-input-space">
          <div class="switch radius">
            <input class="switch-input" id="radius-checkbox2" type="checkbox" value="true">
            <label class="switch-paddle" for="radius-checkbox2">
              <span class="show-for-sr">Do you like me?</span>
              <span class="switch-active" aria-hidden="true">
                <i class="fa fa-check-circle-o"></i>
              </span>
              <span class="switch-inactive" aria-hidden="true">
                <i class="fa fa-times-circle"></i>
              </span>
            </label>
          </div>
          <label class="switch-value" for="radius-checkbox2">Random Label Length</label>
        </div>
        <div class="switch-input-space">
          <div class="switch radius">
            <input class="switch-input" id="radius-checkbox3" type="checkbox" value="true">
            <label class="switch-paddle" for="radius-checkbox3">
              <span class="show-for-sr">Do you like me?</span>
              <span class="switch-active" aria-hidden="true">
                <i class="fa fa-check-circle-o"></i>
              </span>
              <span class="switch-inactive" aria-hidden="true">
                <i class="fa fa-times-circle"></i>
              </span>
            </label>
          </div>
          <label class="switch-value" for="radius-checkbox3">Random Label Length</label>
        </div>
        <div class="switch-input-space">
          <div class="switch radius">
            <input class="switch-input" id="radius-checkbox4" type="checkbox" value="true">
            <label class="switch-paddle" for="radius-checkbox4">
              <span class="show-for-sr">Do you like me?</span>
              <span class="switch-active" aria-hidden="true">
                <i class="fa fa-check-circle-o"></i>
              </span>
              <span class="switch-inactive" aria-hidden="true">
                <i class="fa fa-times-circle"></i>
              </span>
            </label>
          </div>
          <label class="switch-value" for="radius-checkbox4">Random Label Length</label>
        </div>
        <div class="switch-input-space">
          <div class="switch radius">
            <input class="switch-input" id="radius-checkbox5" type="checkbox" value="true">
            <label class="switch-paddle" for="radius-checkbox5">
              <span class="show-for-sr">Do you like me?</span>
              <span class="switch-active" aria-hidden="true">
                <i class="fa fa-check-circle-o"></i>
              </span>
              <span class="switch-inactive" aria-hidden="true">
                <i class="fa fa-times-circle"></i>
              </span>
            </label>
          </div>
          <label class="switch-value" for="radius-checkbox5">Random Label Length</label>
        </div>
        <div class="switch-input-space">
          <div class="switch radius">
            <input class="switch-input" id="radius-checkbox6" type="checkbox" value="true">
            <label class="switch-paddle" for="radius-checkbox6">
              <span class="show-for-sr">Do you like me?</span>
              <span class="switch-active" aria-hidden="true">
                <i class="fa fa-check-circle-o"></i>
              </span>
              <span class="switch-inactive" aria-hidden="true">
                <i class="fa fa-times-circle"></i>
              </span>
            </label>
          </div>
          <label class="switch-value" for="radius-checkbox6">Random Label Length</label>
        </div>
      </div>
    </div>
  </div>
</div>

Fluid Question Group

.question-group.fluid-align - A containter that will align the labels to the longest label.

Default

Question Title that is Longer 1234

This is some hint text

Title 1234

This is some hint text

Question Title 1234

This is some hint text

            
                <
                
                    h5
                
                
                    class
                
                =
                
                    "highlighted"
                
                >
            
            Default
            
                </
                
                    h5
                
                >
            
            
                <
                
                    div
                
                
                    class
                
                =
                
                    " question-group fluid-align"
                
                >
            
            
                <
                
                    div
                
                
                    class
                
                =
                
                    "question-grid-based span-2-col required label-position-left"
                
                >
            
            
                <
                
                    div
                
                
                    class
                
                =
                
                    "label-holder"
                
                >
            
            
                <
                
                    label
                
                
                    for
                
                =
                
                    ""
                
                >
            
            
                <
                
                    span
                
                
                    class
                
                =
                
                    "text"
                
                >
            
            Question Title that is Longer
            
                <
                
                    a
                
                
                    class
                
                =
                
                    "seq"
                
                >
            
            1234
            
                </
                
                    a
                
                >
            
            
                </
                
                    span
                
                >
            
            
                <
                
                    span
                
                
                    class
                
                =
                
                    "required-holder"
                
                >
            
            
                <
                
                    i
                
                
                    class
                
                =
                
                    "fa fa-holder-dynamic"
                
                >
            
            
                </
                
                    i
                
                >
            
            
                </
                
                    span
                
                >
            
            
                </
                
                    label
                
                >
            
            
                </
                
                    div
                
                >
            
            
                <
                
                    div
                
                
                    class
                
                =
                
                    "input-holder"
                
                >
            
            
                <
                
                    div
                
                
                    class
                
                =
                
                    "input-space"
                
                >
            
            
                <
                
                    input
                
                
                    type
                
                =
                
                    "text"
                
                >
            
            
                </
                
                    div
                
                >
            
            
                <
                
                    div
                
                
                    class
                
                =
                
                    "hint"
                
                >
            
            This is some hint text
            
                </
                
                    div
                
                >
            
            
                </
                
                    div
                
                >
            
            
                </
                
                    div
                
                >
            
            
                <
                
                    div
                
                
                    class
                
                =
                
                    "question-grid-based span-2-col required label-position-left"
                
                >
            
            
                <
                
                    div
                
                
                    class
                
                =
                
                    "label-holder"
                
                >
            
            
                <
                
                    label
                
                
                    for
                
                =
                
                    ""
                
                >
            
            
                <
                
                    span
                
                
                    class
                
                =
                
                    "text"
                
                >
            
            Title
            
                <
                
                    a
                
                
                    class
                
                =
                
                    "seq"
                
                >
            
            1234
            
                </
                
                    a
                
                >
            
            
                </
                
                    span
                
                >
            
            
                <
                
                    span
                
                
                    class
                
                =
                
                    "required-holder"
                
                >
            
            
                <
                
                    i
                
                
                    class
                
                =
                
                    "fa fa-holder-dynamic"
                
                >
            
            
                </
                
                    i
                
                >
            
            
                </
                
                    span
                
                >
            
            
                </
                
                    label
                
                >
            
            
                </
                
                    div
                
                >
            
            
                <
                
                    div
                
                
                    class
                
                =
                
                    "input-holder"
                
                >
            
            
                <
                
                    div
                
                
                    class
                
                =
                
                    "input-space"
                
                >
            
            
                <
                
                    input
                
                
                    type
                
                =
                
                    "text"
                
                >
            
            
                </
                
                    div
                
                >
            
            
                <
                
                    div
                
                
                    class
                
                =
                
                    "hint"
                
                >
            
            This is some hint text
            
                </
                
                    div
                
                >
            
            
                </
                
                    div
                
                >
            
            
                </
                
                    div
                
                >
            
            
                <
                
                    div
                
                
                    class
                
                =
                
                    "question-grid-based span-2-col required label-position-left"
                
                >
            
            
                <
                
                    div
                
                
                    class
                
                =
                
                    "label-holder"
                
                >
            
            
                <
                
                    label
                
                
                    for
                
                =
                
                    ""
                
                >
            
            
                <
                
                    span
                
                
                    class
                
                =
                
                    "text"
                
                >
            
            Question Title
            
                <
                
                    a
                
                
                    class
                
                =
                
                    "seq"
                
                >
            
            1234
            
                </
                
                    a
                
                >
            
            
                </
                
                    span
                
                >
            
            
                <
                
                    span
                
                
                    class
                
                =
                
                    "required-holder"
                
                >
            
            
                <
                
                    i
                
                
                    class
                
                =
                
                    "fa fa-holder-dynamic"
                
                >
            
            
                </
                
                    i
                
                >
            
            
                </
                
                    span
                
                >
            
            
                </
                
                    label
                
                >
            
            
                </
                
                    div
                
                >
            
            
                <
                
                    div
                
                
                    class
                
                =
                
                    "input-holder"
                
                >
            
            
                <
                
                    div
                
                
                    class
                
                =
                
                    "input-space"
                
                >
            
            
                <
                
                    input
                
                
                    type
                
                =
                
                    "text"
                
                >
            
            
                </
                
                    div
                
                >
            
            
                <
                
                    div
                
                
                    class
                
                =
                
                    "hint"
                
                >
            
            This is some hint text
            
                </
                
                    div
                
                >
            
            
                </
                
                    div
                
                >
            
            
                </
                
                    div
                
                >
            
            
                </
                
                    div
                
                >

Form Repeater

.repeater- This is form elements repeater. This Module is broken into 3 major containers. The rendersare any previously saved collection of inputs.The question-groupholds all of the questions that need to be repeated. And the .repeater-actionsis the buttons to save|submit and cancel the current session of inputs. The repeater has a focused mode when editing adding .repeater.edit-modeto the containter will hide the renders at the top and toggle any elements that have been tagged with .edit-mode--hideand .edit-mode--show.

Multi Input Form

edit delete

Jeff Morris
jmorris@acc.org

This is a dynamic render message.

All inputs marked with the * are required to submit and save

Edit Record

Add Record

Question (Required)

Years

Error message Warning message Data message

This is some hint text

Question (Required)

Years

Error message Warning message Data message

This is some hint text

Question (Required)

Years

Error message Warning message Data message

This is some hint text

This is a dynmic message for the question group.

clear save

Multi Input Form (Edit)

edit delete

Jeff Morris
jmorris@acc.org

This is a dynamic render message.

All inputs marked with the * are required to submit and save

Edit Record

Add Record

Question Block

This is a dynmic message for the question group.

clear save

<div class="repeater required">
  <div class="label-holder">
    <label for="">
      <span class="text">Multi Input Form</span>
      <span class="required-holder">
        <i class="fa fa-holder-dynamic"></i>
      </span>
    </label>
  </div>
  <div class="render">
    <div class="render-actions">
      <a href="" class="edit">
        <i class="fa fa-holder"></i>
        <span class="text">edit</span>
      </a>
      <a href="" class="delete">
        <i class="fa fa-holder"></i>
        <span class="text">delete</span>
      </a>
    </div>
    <ul class="render-holder">
      <li class="italic starred">
        <i class="fa fa-holder"></i>
      </li>
      <li class="bold break">Jeff Morris</li>
      <li>jmorris@acc.org</li>
      <li class="validated">
        <i class="fa fa-holder"></i>
      </li>
    </ul>
    <div class="message-holder">
      <small class="warning">
        <i class="fa fa-holder-dynamic"></i>
        This is a dynamic render message.
      </small>
    </div>
  </div>
  <div class="question-group">
    <div class="required-message">All inputs marked with the * are required to submit and save</div>
    <h4 class="edit-mode--show warning">Edit Record</h4>
    <h4 class="edit-mode--hide highlighted">Add Record</h4>
    <div class="row">
      <div class="question required column small-4">
        <div class="label-holder">
          <label for="">
            <span class="text">Question (Required)</span>
            <span class="required-holder">
              <i class="fa fa-holder-dynamic"></i>
            </span>
          </label>
        </div>
        <div class="input-holder">
          <div class="input-space column small-6 large-9">
            <input type="text" />
          </div>
          <div class="column small-6 large-3">
            <small class="value">Years</small>
          </div>
        </div>
        <div class="message-holder">
          <small class="error">
            <i class="fa fa-holder"></i>Error message</small>
          <small class="warning">
            <i class="fa fa-holder"></i>Warning message</small>
          <small class="data">
            <i class="fa fa-holder"></i>Data message</small>
        </div>
        <div class="hint">This is some hint text</div>
      </div>
      <div class="question required column small-4">
        <div class="label-holder">
          <label for="">
            <span class="text">Question (Required)</span>
            <span class="required-holder">
              <i class="fa fa-holder-dynamic"></i>
            </span>
          </label>
        </div>
        <div class="input-holder">
          <div class="input-space column small-6 large-9">
            <input type="text" />
          </div>
          <div class="column small-6 large-3">
            <small class="value">Years</small>
          </div>
        </div>
        <div class="message-holder">
          <small class="error">
            <i class="fa fa-holder"></i>Error message</small>
          <small class="warning">
            <i class="fa fa-holder"></i>Warning message</small>
          <small class="data">
            <i class="fa fa-holder"></i>Data message</small>
        </div>
        <div class="hint">This is some hint text</div>
      </div>
      <div class="question required column small-4">
        <div class="label-holder">
          <label for="">
            <span class="text">Question (Required)</span>
            <span class="required-holder">
              <i class="fa fa-holder-dynamic"></i>
            </span>
          </label>
        </div>
        <div class="input-holder">
          <div class="input-space column small-6 large-9">
            <input type="text" />
          </div>
          <div class="column small-6 large-3">
            <small class="value">Years</small>
          </div>
        </div>
        <div class="message-holder">
          <small class="error">
            <i class="fa fa-holder"></i>Error message</small>
          <small class="warning">
            <i class="fa fa-holder"></i>Warning message</small>
          <small class="data">
            <i class="fa fa-holder"></i>Data message</small>
        </div>
        <div class="hint">This is some hint text</div>
      </div>
    </div>
    <div class="message-holder">
      <small class="warning">
        <i class="fa fa-holder"></i>
        This is a dynmic message for the question group.
      </small>
    </div>
  </div>
  <div class="repeater-action">
    <a href="" class="clear">
      <i class="fa fa-holder"></i>
      <span class="text">clear</span>
    </a>
    <a href="" class="save">
      <i class="fa fa-holder"></i>
      <span class="text">save</span>
    </a>
  </div>
</div>
<div class="repeater required edit-mode">
  <div class="label-holder">
    <label for="">
      <span class="text">Multi Input Form (Edit)</span>
      <span class="required-holder">
        <i class="fa fa-holder-dynamic"></i>
      </span>
    </label>
  </div>
  <div class="render">
    <div class="render-actions">
      <a href="" class="edit">
        <i class="fa fa-holder"></i>
        <span class="text">edit</span>
      </a>
      <a href="" class="delete">
        <i class="fa fa-holder"></i>
        <span class="text">delete</span>
      </a>
    </div>
    <ul class="render-holder">
      <li class="italic starred">
        <i class="fa fa-holder"></i>
      </li>
      <li class="bold break">Jeff Morris</li>
      <li>jmorris@acc.org</li>
      <li class="validated">
        <i class="fa fa-holder"></i>
      </li>
    </ul>
    <div class="message-holder">
      <small class="warning">
        <i class="fa fa-holder-dynamic"></i>
        This is a dynamic render message.
      </small>
    </div>
  </div>
  <div class="question-group">
    <div class="required-message">All inputs marked with the * are required to submit and save</div>
    <h4 class="edit-mode--show warning">Edit Record</h4>
    <h4 class="edit-mode--hide highlighted">Add Record</h4>
    <div class="row">
      <div class="question required column small-4 outline">
        <span class="notation">Question Block</span>
      </div>
      <div class="question required column small-5 outline">
        <span class="notation">Question Block</span>
      </div>
      <div class="question required column small-3 outline">
        <span class="notation">Question Block</span>
      </div>
    </div>
    <div class="message-holder">
      <small class="warning">
        <i class="fa fa-holder"></i>
        This is a dynmic message for the question group.
      </small>
    </div>
  </div>
  <div class="repeater-action">
    <a href="" class="clear">
      <i class="fa fa-holder"></i>
      <span class="text">clear</span>
    </a>
    <a href="" class="save">
      <i class="fa fa-holder"></i>
      <span class="text">save</span>
    </a>
  </div>
</div>

App Framework Sample with a branding color theme

Most notable UI changes are listed below.

Typography

Header Tags

Header 1 Tag subheader

Header 2 Tag

Header 3 Tag

Header 4 Tag

Header 5 Tag

Header 6 Tag

Sub Content in Header Tags

Header 1 Tag sub lines of content in a `span.sub-line`

Header 2 Tag sub lines of content in a `span.sub-line`

Header 3 Tag sub lines of content in a `span.sub-line`

Header 4 Tag sub lines of content in a `span.sub-line`

Header 5 Tag sub lines of content in a `span.sub-line`

Header 6 Tag sub lines of content in a `span.sub-line`

Headline with Counters

1Header 1 Tag

2Header 2 Tag

aHeader 3 Tag

bHollow Marker with H4 Tag

cInversed Marker with H5 Tag

Header Tags and other Typography States

Header 1 Tag Info State

Header 2 Tag Error State

Header 3 Tag Warning State

Header 4 Tag Success State

Header 5 Tag Highlighted State

Type Modifiers

Inputs: Buttons & Switches

Buttons

Selectable Button Group

( !! WARNING !! Updated HTML and Styles From Ver 1)

Basic

Modified with an item having the class `.selected`

Modified with the `.expand`

The container `.question` has an error state. NOTE: if button groups have states it is best for them to have been expanded.

Inputs

Switch (Foundation Override)

( !! WARNING !! Updated HTML and Styles From Ver 1)

Switch (Disabled)

Switch modifing classes

Radio Buttons should use `.round` or `.radio` modifier

Checkboxes should use `.radius`, `.checkbox`, no modifiers

Value Switchers

Switches with Grouped Content

Bilateral

Unilateral

Switch (States)

Plain switch with `.error-active` and `.sucess-inactive` on the `.switch`

Slider (Foundation Override)

Navigation: Tabs & Nav Lists

Top Bar

Tabs

Tabs (Basic)

( !! WARNING !! Updated HTML and Styles From Ver 1)

Tabs (modifications)

Tabs Overlap

Tabs on Paper Pages

Hello

Tabs Primary

( !! WARNING !! Updated HTML and Styles From Ver 1)

Nav Lists

Navigation List

Nav List (Checklist)

Nav List (Checklist w/ States)

Nav List (With Headlines)

H1 header tag

H3 header tag

Pagination

Pagination

Pagination with Result Selector

Wizard Navs

Circle Section Nav (forward & back)

Page Title

Circle Section Nav (Disabled)

Page Title (Disabled)

Paper Layers & Grouping

Paper Cards