Our Build Process

When building out projects we take a modular approach. We start with a "guidelines" page featuring each of the elements of the site individually before we place content. Doing this allows us to see that everything is consistent in style and feels cohesive. New site elements can quickly be compared to the existing styles, allowing expansion of site functionality while maintaining the brand. Once this is complete, any developer can quickly access the elements from this page and expedite page construction with well managed and consistently designed code. The page also gives clients a page they can access to reference for any marketing goods, and be customized to be used as a full company style guide if needed.

Alerts

Notifier Bar Default × 
<div data-notifier="" class="notifier">
  <div class="notifier__content">
    Notifier Bar Default
    <a class="notifier__close" href=""> &times;</a>
  </div>
</div>
Notifier Bar Primary × 
<div data-notifier="" class="notifier notifier--primary">
  <div class='notifier__content'>
    Notifier Bar Primary
    <a class='notifier__close'>&times;</a>
  </div>
</div>
Notifier Bar Secondary × 
<div data-notifier="" class="notifier notifier--secondary">
  <div class='notifier__content'>
    Notifier Bar Secondary
    <a class='notifier__close'>&times;</a>
  </div>
</div>
Notifier Bar Function × 
<div data-notifier="" class="notifier notifier--function">
  <div class='notifier__content'>
    Notifier Bar Function
    <a class='notifier__close'>&times;</a>
  </div>
</div>
Notifier Bar Alert × 
<div data-notifier="" class="notifier notifier--alert">
  <div class='notifier__content'>
    Notifier Bar Alert
    <a class='notifier__close'>&times;</a>
  </div>
</div>
Notifier Bar Secure × 
<div data-notifier="" class="notifier notifier--secure">
  <div class='notifier__content'>
    Notifier Bar Secure
    <a class='notifier__close'>&times;</a>
  </div>
</div>
Notifier Bar Warning × 
<div data-notifier="" class="notifier notifier--warning">
  <div class='notifier__content'>
    Notifier Bar Warning
    <a class='notifier__close'>&times;</a>
  </div>
</div>
Notifier Bar Success × 
<div data-notifier="" class="notifier notifier--success">
  <div class='notifier__content'>
    Notifier Bar Success
    <a class='notifier__close'>&times;</a>
  </div>
</div>

Buttons

<button class="button">Default Button</button>
<button class="button button--primary">Primary Button</button>
<button class="button button--secondary">Secondary Button</button>
<button class="button button--function">Function Button</button>
<button class="button button--alert">Alert Button</button>
<button class="button button--success">Success Button</button>
<button class="button button--warning">Warning Button</button>
<button class="button button--secure">Secure Button</button>
<button class="button button--inverted">Inverted Button</button>
<button class="button button--subaccent">Subaccent Button</button>
<button class="button button--transparent">Default Button</button>
<button class="button button--primary button--transparent">Primary Button</button>
<button class="button button--secondary button--transparent">Secondary Button</button>
<button class="button button--function button--transparent">Function Button</button>
<button class="button button--alert button--transparent">Alert Button</button>
<button class="button button--success button--transparent">Success Button</button>
<button class="button button--warning button--transparent">Warning Button</button>
<button class="button button--secure button--transparent">Secure Button</button>
<button class="button button--inverted button--transparent">Inverted Button</button>
<button class="button button--subaccent button--transparent">Subaccent Button</button>
<button class="button">Default Button</button>
<button class="button button--primary">Primary Button</button>
<button class="button button--secondary">Secondary Button</button>
<button class="button button--function">Function Button</button>
<button class="button button--alert">Alert Button</button>
<button class="button button--success">Success Button</button>
<button class="button button--warning">Warning Button</button>
<button class="button button--secure">Secure Button</button>
<button class="button button--inverted">Inverted Button</button>
<button class="button button--subaccent">Subaccent Button</button>
<button class="button button--small">Small Button</button>
<button class="button button-medium">Default/Medium Button</button>
<button class="button button--large">Large Button</button>
<button class="button button--expand">Expand Button</button>

Checkboxes

<ul class='ul list list--unstyled'>
  <li class='list__item'>
    <label class='label'>All Ideas (68)</label>
    <input type='checkbox' class='checkbox' checked>
  </li>
  <li class='list__item'>
    <label class='label'>Completed (25)</label>
    <input type='checkbox' class='checkbox'>
  </li>
  <li class='list__item'>
    <label class='label'>In Progress (35)</label>
    <input type='checkbox' class='checkbox'>
  </li>
  <li class='list__item'>
    <label class='label'>Planned (7)</label>
    <input type='checkbox' class='checkbox'>
  </li>
  <li class='list__item'>
    <label class='label'>Under Consideration (1)</label>
    <input type='checkbox' class='checkbox' disabled>
  </li>
</ul>

Colors

black
grey
silver
white
red
green
blue
cerulean
sky
purple
yelow
orange

Named Colors

$color-primary
$color-secondary
$color-inverted
$color-function
$color-accent
$color-subaccent
$color-alert
$color-success
$color-warning
$color-secure

Header

<header class="header header--secondary header--guidelines">
  <nav class="nav nav--primary" id="nav">
    <ul>
      <li class="nav__item nav--primary__item nav--primary__item--logo">
        <a title="Littlelines" data-instant="" class="nav__link nav--primary__link nav--primary__link--logo" href="/">
          <svg xmlns="http://www.w3.org/2000/svg" class="svg logo" viewBox="0 0 141.25 24.02"><title>Littlelines</title><path d="M10.53 18.58C7.79 21.32 5.86 22 4.7 22a2.75 2.75 0 0 1-2.11-1 4.11 4.11 0 0 1-.51-.73l-.08-.1V1a1 1 0 1 0-2 0v19.38l.07.36a5.78 5.78 0 0 0 1 1.63A4.76 4.76 0 0 0 4.68 24c2 0 4.31-1.1 7.24-4a1 1 0 0 0-1.39-1.42zm52.89 0C60.68 21.32 58.76 22 57.59 22a2.74 2.74 0 0 1-2.11-1 4 4 0 0 1-.48-.69l-.08-.14V1a1 1 0 1 0-2 0v19.38l.08.36a5.72 5.72 0 0 0 1 1.63A4.76 4.76 0 0 0 57.57 24c2 0 4.31-1.1 7.24-4a1 1 0 0 0-1.39-1.42zm65.81-.24c-1.5 1.63-3.94 3.76-5.7 3.69a2.55 2.55 0 0 1-1.54-.52 4.68 4.68 0 0 1-1.54-3.85 7.42 7.42 0 0 1 .54-2.84 4.69 4.69 0 0 1 4.29-2.82 4.11 4.11 0 0 1 1.82.41 7.69 7.69 0 0 1-1.1 1.71 4.08 4.08 0 0 1-3.25 1.36h-.55a1 1 0 0 0-.15 2h.7a6.06 6.06 0 0 0 4.81-2.1 5.75 5.75 0 0 0 1.59-3.05 1.78 1.78 0 0 0-1-1.59 6.09 6.09 0 0 0-2.85-.69 6.68 6.68 0 0 0-6.12 4 9.36 9.36 0 0 0-.71 3.63 6.62 6.62 0 0 0 2.36 5.47 4.55 4.55 0 0 0 2.68.9c3.07-.07 5.53-2.67 7.14-4.3a1 1 0 1 0-1.42-1.41zm-53 0c-1.5 1.66-3.94 3.76-5.7 3.66a2.55 2.55 0 0 1-1.53-.49 4.67 4.67 0 0 1-1.54-3.85 7.39 7.39 0 0 1 .54-2.85A4.69 4.69 0 0 1 72.28 12a4.11 4.11 0 0 1 1.82.41 7.63 7.63 0 0 1-1.1 1.71 4.07 4.07 0 0 1-3.25 1.36h-.55a1 1 0 0 0-.15 2h.7a6.07 6.07 0 0 0 4.81-2.1 5.77 5.77 0 0 0 1.59-3.05 1.78 1.78 0 0 0-1-1.59 6.09 6.09 0 0 0-2.87-.74 6.68 6.68 0 0 0-6.12 4 9.38 9.38 0 0 0-.71 3.63 6.61 6.61 0 0 0 2.37 5.47 4.53 4.53 0 0 0 2.68.9c3.07-.07 5.53-2.67 7.15-4.3a1 1 0 0 0-1.42-1.36zm12.58.24C86.07 21.32 84.14 22 83 22a2.74 2.74 0 0 1-2.11-1 4.17 4.17 0 0 1-.51-.73l-.07-.14V1a1 1 0 1 0-2 0v19.38l.07.36a5.77 5.77 0 0 0 1 1.63A4.75 4.75 0 0 0 83 24c2 0 4.31-1.1 7.24-4a1 1 0 0 0-1.43-1.42zm-51.81 0C34.24 21.32 32.31 22 31.15 22A2.74 2.74 0 0 1 29 21a4 4 0 0 1-.51-.73l-.07-.14v-8.34a14.65 14.65 0 0 0 2.25-.4c1.62-.44 3.69-1.29 4.17-3.5a1 1 0 0 0-2-.37c-.1.84-1.26 1.57-2.71 1.94a12.42 12.42 0 0 1-1.74.32V1a1 1 0 1 0-2 0v8.9c-3.49.37-4.58 2.8-4.59 3a1 1 0 0 0 .62 1.27 1 1 0 0 0 .33.06 1 1 0 0 0 .95-.67 3.2 3.2 0 0 1 2.7-1.62v8.46l.07.36a5.73 5.73 0 0 0 1 1.63A4.75 4.75 0 0 0 31.13 24c2 0 4.31-1.1 7.24-4A1 1 0 1 0 37 18.58zm13.22 0C47.46 21.32 45.53 22 44.37 22a2.74 2.74 0 0 1-2.11-1 4.17 4.17 0 0 1-.51-.73l-.07-.14v-8.2a14.84 14.84 0 0 0 2.26-.4c1.62-.44 3.69-1.29 4.16-3.5a1 1 0 0 0-2-.37c-.1.84-1.26 1.57-2.71 1.94a12.36 12.36 0 0 1-1.75.32V1a1 1 0 1 0-2 0v9.05c-3.49.37-4.58 2.8-4.59 3a1 1 0 0 0 1.95.65 3.2 3.2 0 0 1 2.7-1.62v8.31l.07.36a5.77 5.77 0 0 0 1 1.63A4.75 4.75 0 0 0 44.35 24c2 0 4.31-1.1 7.24-4a1 1 0 0 0-1.39-1.42zm-26.44 0C21 21.32 19.09 22 17.93 22a2.75 2.75 0 0 1-2.11-1 4.06 4.06 0 0 1-.51-.73l-.08-.14V11a1 1 0 1 0-2 0v9.38l.07.36a5.78 5.78 0 0 0 1 1.63A4.76 4.76 0 0 0 17.91 24c2 0 4.31-1.1 7.24-4a1 1 0 0 0-1.39-1.42zM14.22 8.11A1.11 1.11 0 1 0 13.11 7a1.11 1.11 0 0 0 1.11 1.11zm88.26 10.47C99.74 21.32 97.81 22 96.65 22a2.74 2.74 0 0 1-2.11-1 4.17 4.17 0 0 1-.54-.69l-.07-.14V11a1 1 0 1 0-2 0v9.38l.07.36a5.8 5.8 0 0 0 1 1.63A4.76 4.76 0 0 0 96.63 24c2 0 4.31-1.1 7.24-4a1 1 0 1 0-1.39-1.42zM93 8.11A1.11 1.11 0 1 0 91.84 7 1.11 1.11 0 0 0 93 8.11zm23.42 6.7A7.57 7.57 0 0 0 110.1 10a4.65 4.65 0 0 0-.68 0 4.83 4.83 0 0 0-4.92 4.83v8.22a1 1 0 1 0 2 0v-8.21a2.79 2.79 0 0 1 2.92-2.84h.42c1.93.21 4.14 1.69 4.61 3.41a25 25 0 0 1 .68 7v.53a1 1 0 1 0 2 0v-.53a26.56 26.56 0 0 0-.76-7.6zM138.2 16c-.9-.32-2.12-.52-3.11-.9a3.52 3.52 0 0 1-1.12-.63.82.82 0 0 1-.3-.64 1.76 1.76 0 0 1 .14-.64 2.32 2.32 0 0 1 2.34-1.25 3.65 3.65 0 0 1 2.53.92 1 1 0 0 0 1.46-1.37 5.56 5.56 0 0 0-4-1.55 4.3 4.3 0 0 0-4.2 2.5 3.66 3.66 0 0 0-.29 1.39 2.83 2.83 0 0 0 .92 2.09c1.56 1.41 4.07 1.59 5 2h.08a2 2 0 0 1 1.61 1.93 1.92 1.92 0 0 1-1.26 1.76 4.25 4.25 0 0 1-1.78.41 3.51 3.51 0 0 1-3.11-1.87 1 1 0 1 0-1.73 1 5.53 5.53 0 0 0 4.8 2.86 6.25 6.25 0 0 0 2.62-.6 3.93 3.93 0 0 0 2.38-3.57A4 4 0 0 0 138.2 16z"></path></svg>

</a>      </li>
      <li class="nav__item nav--primary__item nav--primary__item--toggle">
        <button class="hamburger hamburger--squeeze nav__link nav--primary__link nav--primary__link--toggle" @click="toggle">
          <span class="hamburger-box">
            <span class="hamburger-inner">Toggle Menu</span>
          </span>
        </button>
      </li>
      <li>
        <ul class="nav--primary__right nav--primary__collapse">
          <li class="nav__item nav--primary__item">
            <a data-instant="" class="nav__link nav--primary__link nav--primary__link--secondary " @click="close" href="/work">Work</a>
          </li>

          <li class="nav__item nav--primary__item">
            <a data-instant="" class="nav__link nav--primary__link nav--primary__link--secondary " @click="close" href="/services">Services</a>
          </li>
          <li class="nav__item nav--primary__item">
            <a data-instant="" class="nav__link nav--primary__link nav--primary__link--secondary " @click="close" href="/company">Company</a>
          </li>
          <li class="nav__item nav--primary__item">
            <a class="nav__link nav--primary__link nav--primary__link--secondary " @click="close" href="/blog">Blog</a>
          </li>
          <li class="nav__item nav--primary__item">
            <a class="nav__link nav--primary__link nav--primary__link--secondary " @click="close" href="/contacts/new">Contact</a>
          </li>
          <li class="nav__item nav--primary__item">
            <a class="nav__link nav--primary__button nav--primary__button--secondary" @click="close" href="/planner">Get Started</a>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</header>

Headings

h1 Hello, World

h2 Hello, World

h3 Hello, World

h4 Hello, World

h5 Hello, World
h6 Hello, World
<h1 class="h1">h1 Hello, World</h1>
<h2 class="h2">h2 Hello, World</h2>
<h3 class="h3">h3 Hello, World</h3>
<h4 class="h4">h4 Hello, World</h4>
<h5 class="h5">h5 Hello, World</h5>
<h6 class="h6">h6 Hello, World</h6>

Hero

We craft web & mobile products
with both brains and beauty.

Proudly based in Ohio, serving clients worldwide since 2007. 

<div class="hero hero--home" data-vide-bg="mp4: https://cdn.littlelines.com/assets/home_smaller-06c111faa0afd90211b64f3e1ddfcfcb5b1d4f909f8a0df3678635f681b8fc1a.mp4, ogv: https://cdn.littlelines.com/assets/home_smaller-3dea4554bc5ceeee0b730d58df0bb6d014758ad0e4ebcd0a40b0848f0f1f05b2.ogv, webm: https://cdn.littlelines.com/assets/home_smaller-f66d027aae2e888c35dfc94ebc608900a19f8ae3d8d4da0fe5b22d20ab5e1006.webm, poster: https://cdn.littlelines.com/assets/home_smaller-b03b454a036e32975aece9848aeb2cf2641d9c88ff4a89a531987d1ef9825fe6.jpg" data-vide-options="posterType: jpg">
  <div class="hero__content">
    <h1 class="hero__title">
      We craft web <span class="color--subaccent">&</span> mobile products <br class="hero__title-break">with both brains and beauty.
    </h1>
    <h3 class="hero__body">
      Proudly based in Ohio, serving clients worldwide since 2007.
    </h3>
  </div>
</div>

Inputs

  • <label class="label" for="text-input">Text Input</label>
<input class="input" id="text-input" placeholder="Text Input" type="text"></input>
  • <label class="label" for="email-input">Email Input</label>
<input class="input" id="email-input" placeholder="Email Input" type="email"></input>
  • <label class="label" for="password-input">Password Input</label>
<input class="input" id="password-input" placeholder="Password Input" type="password"></input>
  • <label class="label" for="tel-input">Telephone Input</label>
<input class="input" id="tel-input" placeholder="+1 (123) 456-7890" type="tel"></input>
  • <label class="label" for="search-input">Search Input</label>
<input class="input input--search" id="search-input" placeholder="search" type="search"></input>
  • <label class="label" for="url-input">URL Input</label>
<input class="input" id="url-input" placeholder="http://example.com" type="url"></input>
  • <label class="label" for="date-input">Date Input</label>
<input class="input" id="date-input" placeholder="1/15/19" type="date"></input>
  • <label class="label" for="file-input">File Input</label>
<input class="input" id="file-input" type="file"></input>
  • <label class="label" for="number-input">Number Input</label>
<input class="input" id="number-input" placeholder="123" type="number"></input>
  • (ONLY WORKS IN WEBKIT AT THE MOMENT) 
    <label class="label" for="range-input">Range Input</label>
<input class="input input--range" id="range-input" type="range"></input>
(ONLY WORKS IN WEBKIT AT THE MOMENT)
  • <label class="label">Text Area</label>
<textarea class="textarea" placeholder="Text Area"></textarea>
  • <label class="label">Select</label>
<select class="select">
  <option>Select Input</option>
</select>
  • <input class="button" type="submit" value="Submit your post"></input>

Lists

  • Curabitur semper purus erat, non.
  • Curabitur semper purus erat, non.
  • Curabitur semper purus erat, non.
<ul class="ul list">
  <li class="list__item">Curabitur semper purus erat, non.</li>
  <li class="list__item">Curabitur semper purus erat, non.</li>
  <li class="list__item">Curabitur semper purus erat, non.</li>
</ul>

Definition Lists

This is a definition title
This is a definition about the definition title
<dl class="dl">
  <dt>This is a definition title</dt>
  <dd>This is a definition about the definition title</dd>
</dl>

List Horizontal

  • Curabitur semper purus erat, non.
  • Curabitur semper purus erat, non.
  • Curabitur semper purus erat, non.
<ul class="ul list">
  <li class="list__item list__item--horizontal">Curabitur semper purus erat, non.</li>
  <li class="list__item list__item--horizontal">Curabitur semper purus erat, non.</li>
  <li class="list__item list__item--horizontal">Curabitur semper purus erat, non.</li>
</ul>

Ordered Lists

  1. Proin vitae euismod urna. Praesent.
    1. Aliquam condimentum dui sed dui aliquam, fringilla iaculis.
    2. Suspendisse blandit diam eu turpis.
  2. Curabitur semper purus erat, non.
  3. Curabitur semper purus erat, non.
  4. Curabitur semper purus erat, non.
<ol class="ol">
  <li>
    Proin vitae euismod urna. Praesent.
    <ol class="ol">
      <li>
        Aliquam condimentum dui sed dui aliquam, fringilla iaculis.
      </li>
      <li>
        Suspendisse blandit diam eu turpis.
      </li>
    </ol>
  </li>
  <li>Curabitur semper purus erat, non.</li>
  <li>Curabitur semper purus erat, non.</li>
  <li>Curabitur semper purus erat, non.</li>
</ol>

Unordered Lists

  • Proin vitae euismod urna. Praesent.
    • Aliquam condimentum dui sed dui aliquam, fringilla iaculis.
    • Suspendisse blandit diam eu turpis.
      • Aliquam condimentum dui sed dui aliquam, fringilla iaculis.
      • Suspendisse blandit diam eu turpis.
  • Curabitur semper purus erat, non.
  • Curabitur semper purus erat, non.
  • Curabitur semper purus erat, non.
<ul class="ul">
  <li>
    Proin vitae euismod urna. Praesent.
    <ul class="ul">
      <li>
        Aliquam condimentum dui sed dui aliquam, fringilla iaculis.
      </li>
      <li>
        Suspendisse blandit diam eu turpis.
        <ul class="ul">
          <li>
            Aliquam condimentum dui sed dui aliquam, fringilla iaculis.
          </li>
          <li>
            Suspendisse blandit diam eu turpis.
          </li>
        </ul>
      </li>
    </ul>
  </li>
    <li>Curabitur semper purus erat, non.</li>
    <li>Curabitur semper purus erat, non.</li>
    <li>Curabitur semper purus erat, non.</li>
</ul>

Nav

<nav>
  <ul class="ul nav">
    <li class="nav__item">
      <a class="nav__link">Curabitur</a>
    </li>
    <li class="nav__item">
      <a class="nav__link">Curabitur</a>
    </li>
    <li class="nav__item">
      <a class="nav__link">Curabitur</a>
    </li>
  </ul>
</nav>

Nav Horizontal

<nav>
  <ul class="ul nav">
    <li class="nav__item--horizontal">
      <a class="nav__link">Curabitur</a>
    </li>
    <li class="nav__item--horizontal">
      <a class="nav__link">Curabitur</a>
    </li>
    <li class="nav__item--horizontal">
      <a class="nav__link">Curabitur</a>
    </li>
  </ul>
</nav>

Panels

Panel Default

Nunc a dui vitae odio condimentum dignissim. Nunc vel urna non nibh commodo vehicula at laoreet sem. Donec nisi purus, hendrerit eget eleifend vitae, mollis at justo. Nullam non sollicitudin diam, nec porta erat. Aliquam eget laoreet nisi. Sed orci ante, facilisis quis ornare a, iaculis ac enim. Donec fermentum nulla et sollicitudin viverra. Duis vulputate, dolor quis porttitor feugiat, odio urna semper odio, eu dictum magna lacus sit amet arcu. Curabitur hendrerit nunc id est laoreet, ut venenatis eros iaculis. Etiam placerat porttitor nisi id tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non dui in mi malesuada cursus. Nam sit amet ex risus. Sed in leo eleifend, suscipit augue sed, pretium libero.

Panel with border

Nunc a dui vitae odio condimentum dignissim. Nunc vel urna non nibh commodo vehicula at laoreet sem. Donec nisi purus, hendrerit eget eleifend vitae, mollis at justo. Nullam non sollicitudin diam, nec porta erat. Aliquam eget laoreet nisi. Sed orci ante, facilisis quis ornare a, iaculis ac enim. Donec fermentum nulla et sollicitudin viverra. Duis vulputate, dolor quis porttitor feugiat, odio urna semper odio, eu dictum magna lacus sit amet arcu. Curabitur hendrerit nunc id est laoreet, ut venenatis eros iaculis. Etiam placerat porttitor nisi id tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non dui in mi malesuada cursus. Nam sit amet ex risus. Sed in leo eleifend, suscipit augue sed, pretium libero.

Panel Primary

Nunc a dui vitae odio condimentum dignissim. Nunc vel urna non nibh commodo vehicula at laoreet sem. Donec nisi purus, hendrerit eget eleifend vitae, mollis at justo. Nullam non sollicitudin diam, nec porta erat. Aliquam eget laoreet nisi. Sed orci ante, facilisis quis ornare a, iaculis ac enim. Donec fermentum nulla et sollicitudin viverra. Duis vulputate, dolor quis porttitor feugiat, odio urna semper odio, eu dictum magna lacus sit amet arcu. Curabitur hendrerit nunc id est laoreet, ut venenatis eros iaculis. Etiam placerat porttitor nisi id tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non dui in mi malesuada cursus. Nam sit amet ex risus. Sed in leo eleifend, suscipit augue sed, pretium libero.

Panel Secondary

Nunc a dui vitae odio condimentum dignissim. Nunc vel urna non nibh commodo vehicula at laoreet sem. Donec nisi purus, hendrerit eget eleifend vitae, mollis at justo. Nullam non sollicitudin diam, nec porta erat. Aliquam eget laoreet nisi. Sed orci ante, facilisis quis ornare a, iaculis ac enim. Donec fermentum nulla et sollicitudin viverra. Duis vulputate, dolor quis porttitor feugiat, odio urna semper odio, eu dictum magna lacus sit amet arcu. Curabitur hendrerit nunc id est laoreet, ut venenatis eros iaculis. Etiam placerat porttitor nisi id tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non dui in mi malesuada cursus. Nam sit amet ex risus. Sed in leo eleifend, suscipit augue sed, pretium libero.

Panel Function

Nunc a dui vitae odio condimentum dignissim. Nunc vel urna non nibh commodo vehicula at laoreet sem. Donec nisi purus, hendrerit eget eleifend vitae, mollis at justo. Nullam non sollicitudin diam, nec porta erat. Aliquam eget laoreet nisi. Sed orci ante, facilisis quis ornare a, iaculis ac enim. Donec fermentum nulla et sollicitudin viverra. Duis vulputate, dolor quis porttitor feugiat, odio urna semper odio, eu dictum magna lacus sit amet arcu. Curabitur hendrerit nunc id est laoreet, ut venenatis eros iaculis. Etiam placerat porttitor nisi id tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non dui in mi malesuada cursus. Nam sit amet ex risus. Sed in leo eleifend, suscipit augue sed, pretium libero.

Panel Alert

Nunc a dui vitae odio condimentum dignissim. Nunc vel urna non nibh commodo vehicula at laoreet sem. Donec nisi purus, hendrerit eget eleifend vitae, mollis at justo. Nullam non sollicitudin diam, nec porta erat. Aliquam eget laoreet nisi. Sed orci ante, facilisis quis ornare a, iaculis ac enim. Donec fermentum nulla et sollicitudin viverra. Duis vulputate, dolor quis porttitor feugiat, odio urna semper odio, eu dictum magna lacus sit amet arcu. Curabitur hendrerit nunc id est laoreet, ut venenatis eros iaculis. Etiam placerat porttitor nisi id tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non dui in mi malesuada cursus. Nam sit amet ex risus. Sed in leo eleifend, suscipit augue sed, pretium libero.

Panel Secure

Nunc a dui vitae odio condimentum dignissim. Nunc vel urna non nibh commodo vehicula at laoreet sem. Donec nisi purus, hendrerit eget eleifend vitae, mollis at justo. Nullam non sollicitudin diam, nec porta erat. Aliquam eget laoreet nisi. Sed orci ante, facilisis quis ornare a, iaculis ac enim. Donec fermentum nulla et sollicitudin viverra. Duis vulputate, dolor quis porttitor feugiat, odio urna semper odio, eu dictum magna lacus sit amet arcu. Curabitur hendrerit nunc id est laoreet, ut venenatis eros iaculis. Etiam placerat porttitor nisi id tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non dui in mi malesuada cursus. Nam sit amet ex risus. Sed in leo eleifend, suscipit augue sed, pretium libero.

Panel Warning

Nunc a dui vitae odio condimentum dignissim. Nunc vel urna non nibh commodo vehicula at laoreet sem. Donec nisi purus, hendrerit eget eleifend vitae, mollis at justo. Nullam non sollicitudin diam, nec porta erat. Aliquam eget laoreet nisi. Sed orci ante, facilisis quis ornare a, iaculis ac enim. Donec fermentum nulla et sollicitudin viverra. Duis vulputate, dolor quis porttitor feugiat, odio urna semper odio, eu dictum magna lacus sit amet arcu. Curabitur hendrerit nunc id est laoreet, ut venenatis eros iaculis. Etiam placerat porttitor nisi id tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non dui in mi malesuada cursus. Nam sit amet ex risus. Sed in leo eleifend, suscipit augue sed, pretium libero.

Panel Success

Nunc a dui vitae odio condimentum dignissim. Nunc vel urna non nibh commodo vehicula at laoreet sem. Donec nisi purus, hendrerit eget eleifend vitae, mollis at justo. Nullam non sollicitudin diam, nec porta erat. Aliquam eget laoreet nisi. Sed orci ante, facilisis quis ornare a, iaculis ac enim. Donec fermentum nulla et sollicitudin viverra. Duis vulputate, dolor quis porttitor feugiat, odio urna semper odio, eu dictum magna lacus sit amet arcu. Curabitur hendrerit nunc id est laoreet, ut venenatis eros iaculis. Etiam placerat porttitor nisi id tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non dui in mi malesuada cursus. Nam sit amet ex risus. Sed in leo eleifend, suscipit augue sed, pretium libero.

<div class="panel">
  <h2>Panel Default</h2>
  <p>Nunc a dui vitae odio condimentum dignissim. Nunc vel urna non nibh commodo vehicula at laoreet sem. Donec nisi purus, hendrerit eget eleifend vitae, mollis at justo. Nullam non sollicitudin diam, nec porta erat. Aliquam eget laoreet nisi. Sed orci ante, facilisis quis ornare a, iaculis ac enim. Donec fermentum nulla et sollicitudin viverra. Duis vulputate, dolor quis porttitor feugiat, odio urna semper odio, eu dictum magna lacus sit amet arcu. Curabitur hendrerit nunc id est laoreet, ut venenatis eros iaculis. Etiam placerat porttitor nisi id tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non dui in mi malesuada cursus. Nam sit amet ex risus. Sed in leo eleifend, suscipit augue sed, pretium libero.</p>
</div>
<div class="panel panel--with-border">
  <h2>Panel with border</h2>
  <p>Nunc a dui vitae odio condimentum dignissim. Nunc vel urna non nibh commodo vehicula at laoreet sem. Donec nisi purus, hendrerit eget eleifend vitae, mollis at justo. Nullam non sollicitudin diam, nec porta erat. Aliquam eget laoreet nisi. Sed orci ante, facilisis quis ornare a, iaculis ac enim. Donec fermentum nulla et sollicitudin viverra. Duis vulputate, dolor quis porttitor feugiat, odio urna semper odio, eu dictum magna lacus sit amet arcu. Curabitur hendrerit nunc id est laoreet, ut venenatis eros iaculis. Etiam placerat porttitor nisi id tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non dui in mi malesuada cursus. Nam sit amet ex risus. Sed in leo eleifend, suscipit augue sed, pretium libero.</p>
</div>
<div class="panel panel--primary">
  <h2>Panel Primary</h2>
  <p>Nunc a dui vitae odio condimentum dignissim. Nunc vel urna non nibh commodo vehicula at laoreet sem. Donec nisi purus, hendrerit eget eleifend vitae, mollis at justo. Nullam non sollicitudin diam, nec porta erat. Aliquam eget laoreet nisi. Sed orci ante, facilisis quis ornare a, iaculis ac enim. Donec fermentum nulla et sollicitudin viverra. Duis vulputate, dolor quis porttitor feugiat, odio urna semper odio, eu dictum magna lacus sit amet arcu. Curabitur hendrerit nunc id est laoreet, ut venenatis eros iaculis. Etiam placerat porttitor nisi id tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non dui in mi malesuada cursus. Nam sit amet ex risus. Sed in leo eleifend, suscipit augue sed, pretium libero.</p>
</div>
<div class="panel panel--secondary">
  <h2>Panel Secondary</h2>
  <p>Nunc a dui vitae odio condimentum dignissim. Nunc vel urna non nibh commodo vehicula at laoreet sem. Donec nisi purus, hendrerit eget eleifend vitae, mollis at justo. Nullam non sollicitudin diam, nec porta erat. Aliquam eget laoreet nisi. Sed orci ante, facilisis quis ornare a, iaculis ac enim. Donec fermentum nulla et sollicitudin viverra. Duis vulputate, dolor quis porttitor feugiat, odio urna semper odio, eu dictum magna lacus sit amet arcu. Curabitur hendrerit nunc id est laoreet, ut venenatis eros iaculis. Etiam placerat porttitor nisi id tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non dui in mi malesuada cursus. Nam sit amet ex risus. Sed in leo eleifend, suscipit augue sed, pretium libero.</p>
</div>
<div class="panel panel--function">
  <h2>Panel Function</h2>
  <p>Nunc a dui vitae odio condimentum dignissim. Nunc vel urna non nibh commodo vehicula at laoreet sem. Donec nisi purus, hendrerit eget eleifend vitae, mollis at justo. Nullam non sollicitudin diam, nec porta erat. Aliquam eget laoreet nisi. Sed orci ante, facilisis quis ornare a, iaculis ac enim. Donec fermentum nulla et sollicitudin viverra. Duis vulputate, dolor quis porttitor feugiat, odio urna semper odio, eu dictum magna lacus sit amet arcu. Curabitur hendrerit nunc id est laoreet, ut venenatis eros iaculis. Etiam placerat porttitor nisi id tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non dui in mi malesuada cursus. Nam sit amet ex risus. Sed in leo eleifend, suscipit augue sed, pretium libero.</p>
</div>
<div class="panel panel--alert">
  <h2>Panel Alert</h2>
  <p>Nunc a dui vitae odio condimentum dignissim. Nunc vel urna non nibh commodo vehicula at laoreet sem. Donec nisi purus, hendrerit eget eleifend vitae, mollis at justo. Nullam non sollicitudin diam, nec porta erat. Aliquam eget laoreet nisi. Sed orci ante, facilisis quis ornare a, iaculis ac enim. Donec fermentum nulla et sollicitudin viverra. Duis vulputate, dolor quis porttitor feugiat, odio urna semper odio, eu dictum magna lacus sit amet arcu. Curabitur hendrerit nunc id est laoreet, ut venenatis eros iaculis. Etiam placerat porttitor nisi id tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non dui in mi malesuada cursus. Nam sit amet ex risus. Sed in leo eleifend, suscipit augue sed, pretium libero.</p>
</div>
<div class="panel panel--secure">
  <h2>Panel Secure</h2>
  <p>Nunc a dui vitae odio condimentum dignissim. Nunc vel urna non nibh commodo vehicula at laoreet sem. Donec nisi purus, hendrerit eget eleifend vitae, mollis at justo. Nullam non sollicitudin diam, nec porta erat. Aliquam eget laoreet nisi. Sed orci ante, facilisis quis ornare a, iaculis ac enim. Donec fermentum nulla et sollicitudin viverra. Duis vulputate, dolor quis porttitor feugiat, odio urna semper odio, eu dictum magna lacus sit amet arcu. Curabitur hendrerit nunc id est laoreet, ut venenatis eros iaculis. Etiam placerat porttitor nisi id tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non dui in mi malesuada cursus. Nam sit amet ex risus. Sed in leo eleifend, suscipit augue sed, pretium libero.</p>
</div>
<div class="panel panel--warning">
  <h2>Panel Warning</h2>
  <p>Nunc a dui vitae odio condimentum dignissim. Nunc vel urna non nibh commodo vehicula at laoreet sem. Donec nisi purus, hendrerit eget eleifend vitae, mollis at justo. Nullam non sollicitudin diam, nec porta erat. Aliquam eget laoreet nisi. Sed orci ante, facilisis quis ornare a, iaculis ac enim. Donec fermentum nulla et sollicitudin viverra. Duis vulputate, dolor quis porttitor feugiat, odio urna semper odio, eu dictum magna lacus sit amet arcu. Curabitur hendrerit nunc id est laoreet, ut venenatis eros iaculis. Etiam placerat porttitor nisi id tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non dui in mi malesuada cursus. Nam sit amet ex risus. Sed in leo eleifend, suscipit augue sed, pretium libero.</p>
</div>
<div class="panel panel--success">
  <h2>Panel Success</h2>
  <p>Nunc a dui vitae odio condimentum dignissim. Nunc vel urna non nibh commodo vehicula at laoreet sem. Donec nisi purus, hendrerit eget eleifend vitae, mollis at justo. Nullam non sollicitudin diam, nec porta erat. Aliquam eget laoreet nisi. Sed orci ante, facilisis quis ornare a, iaculis ac enim. Donec fermentum nulla et sollicitudin viverra. Duis vulputate, dolor quis porttitor feugiat, odio urna semper odio, eu dictum magna lacus sit amet arcu. Curabitur hendrerit nunc id est laoreet, ut venenatis eros iaculis. Etiam placerat porttitor nisi id tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non dui in mi malesuada cursus. Nam sit amet ex risus. Sed in leo eleifend, suscipit augue sed, pretium libero.</p>
</div>

Panel Section

Nunc a dui vitae odio condimentum dignissim. Nunc vel urna non nibh commodo vehicula at laoreet sem. Donec nisi purus, hendrerit eget eleifend vitae, mollis at justo. Nullam non sollicitudin diam, nec porta erat. Aliquam eget laoreet nisi. Sed orci ante, facilisis quis ornare a, iaculis ac enim. Donec fermentum nulla et sollicitudin viverra. Duis vulputate, dolor quis porttitor feugiat, odio urna semper odio, eu dictum magna lacus sit amet arcu. Curabitur hendrerit nunc id est laoreet, ut venenatis eros iaculis. Etiam placerat porttitor nisi id tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non dui in mi malesuada cursus. Nam sit amet ex risus. Sed in leo eleifend, suscipit augue sed, pretium libero.

Panel Section

Nunc a dui vitae odio condimentum dignissim. Nunc vel urna non nibh commodo vehicula at laoreet sem. Donec nisi purus, hendrerit eget eleifend vitae, mollis at justo. Nullam non sollicitudin diam, nec porta erat. Aliquam eget laoreet nisi. Sed orci ante, facilisis quis ornare a, iaculis ac enim. Donec fermentum nulla et sollicitudin viverra. Duis vulputate, dolor quis porttitor feugiat, odio urna semper odio, eu dictum magna lacus sit amet arcu. Curabitur hendrerit nunc id est laoreet, ut venenatis eros iaculis. Etiam placerat porttitor nisi id tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non dui in mi malesuada cursus. Nam sit amet ex risus. Sed in leo eleifend, suscipit augue sed, pretium libero.

Panel Section

Nunc a dui vitae odio condimentum dignissim. Nunc vel urna non nibh commodo vehicula at laoreet sem. Donec nisi purus, hendrerit eget eleifend vitae, mollis at justo. Nullam non sollicitudin diam, nec porta erat. Aliquam eget laoreet nisi. Sed orci ante, facilisis quis ornare a, iaculis ac enim. Donec fermentum nulla et sollicitudin viverra. Duis vulputate, dolor quis porttitor feugiat, odio urna semper odio, eu dictum magna lacus sit amet arcu. Curabitur hendrerit nunc id est laoreet, ut venenatis eros iaculis. Etiam placerat porttitor nisi id tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non dui in mi malesuada cursus. Nam sit amet ex risus. Sed in leo eleifend, suscipit augue sed, pretium libero.

<div>
  <div class="panel panel--with-border panel--section">
    <h2>Panel Section</h2>
    <p>Nunc a dui vitae odio condimentum dignissim. Nunc vel urna non nibh commodo vehicula at laoreet sem. Donec nisi purus, hendrerit eget eleifend vitae, mollis at justo. Nullam non sollicitudin diam, nec porta erat. Aliquam eget laoreet nisi. Sed orci ante, facilisis quis ornare a, iaculis ac enim. Donec fermentum nulla et sollicitudin viverra. Duis vulputate, dolor quis porttitor feugiat, odio urna semper odio, eu dictum magna lacus sit amet arcu. Curabitur hendrerit nunc id est laoreet, ut venenatis eros iaculis. Etiam placerat porttitor nisi id tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non dui in mi malesuada cursus. Nam sit amet ex risus. Sed in leo eleifend, suscipit augue sed, pretium libero.</p>
  </div>
  <div class="panel panel--with-border panel--section">
    <h2>Panel Section</h2>
    <p>Nunc a dui vitae odio condimentum dignissim. Nunc vel urna non nibh commodo vehicula at laoreet sem. Donec nisi purus, hendrerit eget eleifend vitae, mollis at justo. Nullam non sollicitudin diam, nec porta erat. Aliquam eget laoreet nisi. Sed orci ante, facilisis quis ornare a, iaculis ac enim. Donec fermentum nulla et sollicitudin viverra. Duis vulputate, dolor quis porttitor feugiat, odio urna semper odio, eu dictum magna lacus sit amet arcu. Curabitur hendrerit nunc id est laoreet, ut venenatis eros iaculis. Etiam placerat porttitor nisi id tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non dui in mi malesuada cursus. Nam sit amet ex risus. Sed in leo eleifend, suscipit augue sed, pretium libero.</p>
  </div>
  <div class="panel panel--with-border panel--section">
    <h2>Panel Section</h2>
    <p>Nunc a dui vitae odio condimentum dignissim. Nunc vel urna non nibh commodo vehicula at laoreet sem. Donec nisi purus, hendrerit eget eleifend vitae, mollis at justo. Nullam non sollicitudin diam, nec porta erat. Aliquam eget laoreet nisi. Sed orci ante, facilisis quis ornare a, iaculis ac enim. Donec fermentum nulla et sollicitudin viverra. Duis vulputate, dolor quis porttitor feugiat, odio urna semper odio, eu dictum magna lacus sit amet arcu. Curabitur hendrerit nunc id est laoreet, ut venenatis eros iaculis. Etiam placerat porttitor nisi id tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non dui in mi malesuada cursus. Nam sit amet ex risus. Sed in leo eleifend, suscipit augue sed, pretium libero.</p>
  </div>
</div>

Panel Section

Nunc a dui vitae odio condimentum dignissim. Nunc vel urna non nibh commodo vehicula at laoreet sem. Donec nisi purus, hendrerit eget eleifend vitae, mollis at justo. Nullam non sollicitudin diam, nec porta erat. Aliquam eget laoreet nisi. Sed orci ante, facilisis quis ornare a, iaculis ac enim. Donec fermentum nulla et sollicitudin viverra. Duis vulputate, dolor quis porttitor feugiat, odio urna semper odio, eu dictum magna lacus sit amet arcu. Curabitur hendrerit nunc id est laoreet, ut venenatis eros iaculis. Etiam placerat porttitor nisi id tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non dui in mi malesuada cursus. Nam sit amet ex risus. Sed in leo eleifend, suscipit augue sed, pretium libero.

Panel Section

Nunc a dui vitae odio condimentum dignissim. Nunc vel urna non nibh commodo vehicula at laoreet sem. Donec nisi purus, hendrerit eget eleifend vitae, mollis at justo. Nullam non sollicitudin diam, nec porta erat. Aliquam eget laoreet nisi. Sed orci ante, facilisis quis ornare a, iaculis ac enim. Donec fermentum nulla et sollicitudin viverra. Duis vulputate, dolor quis porttitor feugiat, odio urna semper odio, eu dictum magna lacus sit amet arcu. Curabitur hendrerit nunc id est laoreet, ut venenatis eros iaculis. Etiam placerat porttitor nisi id tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non dui in mi malesuada cursus. Nam sit amet ex risus. Sed in leo eleifend, suscipit augue sed, pretium libero.

Panel Section

Nunc a dui vitae odio condimentum dignissim. Nunc vel urna non nibh commodo vehicula at laoreet sem. Donec nisi purus, hendrerit eget eleifend vitae, mollis at justo. Nullam non sollicitudin diam, nec porta erat. Aliquam eget laoreet nisi. Sed orci ante, facilisis quis ornare a, iaculis ac enim. Donec fermentum nulla et sollicitudin viverra. Duis vulputate, dolor quis porttitor feugiat, odio urna semper odio, eu dictum magna lacus sit amet arcu. Curabitur hendrerit nunc id est laoreet, ut venenatis eros iaculis. Etiam placerat porttitor nisi id tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non dui in mi malesuada cursus. Nam sit amet ex risus. Sed in leo eleifend, suscipit augue sed, pretium libero.

Panel Section

Nunc a dui vitae odio condimentum dignissim. Nunc vel urna non nibh commodo vehicula at laoreet sem. Donec nisi purus, hendrerit eget eleifend vitae, mollis at justo. Nullam non sollicitudin diam, nec porta erat. Aliquam eget laoreet nisi. Sed orci ante, facilisis quis ornare a, iaculis ac enim. Donec fermentum nulla et sollicitudin viverra. Duis vulputate, dolor quis porttitor feugiat, odio urna semper odio, eu dictum magna lacus sit amet arcu. Curabitur hendrerit nunc id est laoreet, ut venenatis eros iaculis. Etiam placerat porttitor nisi id tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non dui in mi malesuada cursus. Nam sit amet ex risus. Sed in leo eleifend, suscipit augue sed, pretium libero.

<div class="section section--half-padding section--with-border">
  <div class="panel panel--half-width">
    <h2>Panel Section</h2>
    <p>Nunc a dui vitae odio condimentum dignissim. Nunc vel urna non nibh commodo vehicula at laoreet sem. Donec nisi purus, hendrerit eget eleifend vitae, mollis at justo. Nullam non sollicitudin diam, nec porta erat. Aliquam eget laoreet nisi. Sed orci ante, facilisis quis ornare a, iaculis ac enim. Donec fermentum nulla et sollicitudin viverra. Duis vulputate, dolor quis porttitor feugiat, odio urna semper odio, eu dictum magna lacus sit amet arcu. Curabitur hendrerit nunc id est laoreet, ut venenatis eros iaculis. Etiam placerat porttitor nisi id tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non dui in mi malesuada cursus. Nam sit amet ex risus. Sed in leo eleifend, suscipit augue sed, pretium libero.</p>
  </div>
  <div class="panel panel--half-width">
    <h2>Panel Section</h2>
    <p>Nunc a dui vitae odio condimentum dignissim. Nunc vel urna non nibh commodo vehicula at laoreet sem. Donec nisi purus, hendrerit eget eleifend vitae, mollis at justo. Nullam non sollicitudin diam, nec porta erat. Aliquam eget laoreet nisi. Sed orci ante, facilisis quis ornare a, iaculis ac enim. Donec fermentum nulla et sollicitudin viverra. Duis vulputate, dolor quis porttitor feugiat, odio urna semper odio, eu dictum magna lacus sit amet arcu. Curabitur hendrerit nunc id est laoreet, ut venenatis eros iaculis. Etiam placerat porttitor nisi id tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non dui in mi malesuada cursus. Nam sit amet ex risus. Sed in leo eleifend, suscipit augue sed, pretium libero.</p>
  </div>
</div>
<div class="section section-bordered">
  <div class="panel panel--half-width">
    <h2>Panel Section</h2>
    <p>Nunc a dui vitae odio condimentum dignissim. Nunc vel urna non nibh commodo vehicula at laoreet sem. Donec nisi purus, hendrerit eget eleifend vitae, mollis at justo. Nullam non sollicitudin diam, nec porta erat. Aliquam eget laoreet nisi. Sed orci ante, facilisis quis ornare a, iaculis ac enim. Donec fermentum nulla et sollicitudin viverra. Duis vulputate, dolor quis porttitor feugiat, odio urna semper odio, eu dictum magna lacus sit amet arcu. Curabitur hendrerit nunc id est laoreet, ut venenatis eros iaculis. Etiam placerat porttitor nisi id tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non dui in mi malesuada cursus. Nam sit amet ex risus. Sed in leo eleifend, suscipit augue sed, pretium libero.</p>
  </div>
  <div class="panel panel--half-width">
    <h2>Panel Section</h2>
    <p>Nunc a dui vitae odio condimentum dignissim. Nunc vel urna non nibh commodo vehicula at laoreet sem. Donec nisi purus, hendrerit eget eleifend vitae, mollis at justo. Nullam non sollicitudin diam, nec porta erat. Aliquam eget laoreet nisi. Sed orci ante, facilisis quis ornare a, iaculis ac enim. Donec fermentum nulla et sollicitudin viverra. Duis vulputate, dolor quis porttitor feugiat, odio urna semper odio, eu dictum magna lacus sit amet arcu. Curabitur hendrerit nunc id est laoreet, ut venenatis eros iaculis. Etiam placerat porttitor nisi id tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non dui in mi malesuada cursus. Nam sit amet ex risus. Sed in leo eleifend, suscipit augue sed, pretium libero.</p>
  </div>
</div>

Radio Buttons

<ul class="ul list list--unstyled">
  <li class="list__item">
    <label class="label" for="filtercheck1">All Ideas (68)</label>
    <input class="radio" id="filtercheck1" name="radio-example" type="radio"></input>
  </li>
  <li class="list__item">
    <label class="label" for="filtercheck2">Completed (25)</label>
    <input class="radio" id="filtercheck2" name="radio-example" type="radio"></input>
  </li>
  <li class="list__item">
    <label class="label" for="filtercheck3">In Progress (35)</label>
    <input class="radio" id="filtercheck3" name="radio-example" type="radio"></input>
  </li>
  <li class="list__item">
    <label class="label" for="filtercheck4">Planned (7)</label>
    <input class="radio" id="filtercheck4" name="radio-example" type="radio"></input>
  </li>
  <li class="list__item">
    <label class="label" for="filtercheck5">Under Consideration (1)</label>
    <input class="radio" id="filtercheck5" name="radio-example" type="radio"></input>
  </li>
</ul>

Sections

Section Default

Nunc a dui vitae odio condimentum dignissim. Nunc vel urna non nibh commodo vehicula at laoreet sem. Donec nisi purus, hendrerit eget eleifend vitae, mollis at justo. Nullam non sollicitudin diam, nec porta erat. Aliquam eget laoreet nisi. Sed orci ante, facilisis quis ornare a, iaculis ac enim. Donec fermentum nulla et sollicitudin viverra. Duis vulputate, dolor quis porttitor feugiat, odio urna semper odio, eu dictum magna lacus sit amet arcu. Curabitur hendrerit nunc id est laoreet, ut venenatis eros iaculis. Etiam placerat porttitor nisi id tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non dui in mi malesuada cursus. Nam sit amet ex risus. Sed in leo eleifend, suscipit augue sed, pretium libero.

Section with border

Nunc a dui vitae odio condimentum dignissim. Nunc vel urna non nibh commodo vehicula at laoreet sem. Donec nisi purus, hendrerit eget eleifend vitae, mollis at justo. Nullam non sollicitudin diam, nec porta erat. Aliquam eget laoreet nisi. Sed orci ante, facilisis quis ornare a, iaculis ac enim. Donec fermentum nulla et sollicitudin viverra. Duis vulputate, dolor quis porttitor feugiat, odio urna semper odio, eu dictum magna lacus sit amet arcu. Curabitur hendrerit nunc id est laoreet, ut venenatis eros iaculis. Etiam placerat porttitor nisi id tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non dui in mi malesuada cursus. Nam sit amet ex risus. Sed in leo eleifend, suscipit augue sed, pretium libero.

Section Half-Width

Nunc a dui vitae odio condimentum dignissim. Nunc vel urna non nibh commodo vehicula at laoreet sem. Donec nisi purus, hendrerit eget eleifend vitae, mollis at justo. Nullam non sollicitudin diam, nec porta erat. Aliquam eget laoreet nisi. Sed orci ante, facilisis quis ornare a, iaculis ac enim. Donec fermentum nulla et sollicitudin viverra. Duis vulputate, dolor quis porttitor feugiat, odio urna semper odio, eu dictum magna lacus sit amet arcu. Curabitur hendrerit nunc id est laoreet, ut venenatis eros iaculis. Etiam placerat porttitor nisi id tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non dui in mi malesuada cursus. Nam sit amet ex risus. Sed in leo eleifend, suscipit augue sed, pretium libero.

Section Half Width

Nunc a dui vitae odio condimentum dignissim. Nunc vel urna non nibh commodo vehicula at laoreet sem. Donec nisi purus, hendrerit eget eleifend vitae, mollis at justo. Nullam non sollicitudin diam, nec porta erat. Aliquam eget laoreet nisi. Sed orci ante, facilisis quis ornare a, iaculis ac enim. Donec fermentum nulla et sollicitudin viverra. Duis vulputate, dolor quis porttitor feugiat, odio urna semper odio, eu dictum magna lacus sit amet arcu. Curabitur hendrerit nunc id est laoreet, ut venenatis eros iaculis. Etiam placerat porttitor nisi id tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non dui in mi malesuada cursus. Nam sit amet ex risus. Sed in leo eleifend, suscipit augue sed, pretium libero.

<div class="section">
  <div class="content">
    <h2>Section Default</h2>
    <p>Nunc a dui vitae odio condimentum dignissim. Nunc vel urna non nibh commodo vehicula at laoreet sem. Donec nisi purus, hendrerit eget eleifend vitae, mollis at justo. Nullam non sollicitudin diam, nec porta erat. Aliquam eget laoreet nisi. Sed orci ante, facilisis quis ornare a, iaculis ac enim. Donec fermentum nulla et sollicitudin viverra. Duis vulputate, dolor quis porttitor feugiat, odio urna semper odio, eu dictum magna lacus sit amet arcu. Curabitur hendrerit nunc id est laoreet, ut venenatis eros iaculis. Etiam placerat porttitor nisi id tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non dui in mi malesuada cursus. Nam sit amet ex risus. Sed in leo eleifend, suscipit augue sed, pretium libero.</p>
  </div>
</div>
<div class="section section--half-padding section--with-border">
  <div class="content">
    <h2>Section with border</h2>
    <p>Nunc a dui vitae odio condimentum dignissim. Nunc vel urna non nibh commodo vehicula at laoreet sem. Donec nisi purus, hendrerit eget eleifend vitae, mollis at justo. Nullam non sollicitudin diam, nec porta erat. Aliquam eget laoreet nisi. Sed orci ante, facilisis quis ornare a, iaculis ac enim. Donec fermentum nulla et sollicitudin viverra. Duis vulputate, dolor quis porttitor feugiat, odio urna semper odio, eu dictum magna lacus sit amet arcu. Curabitur hendrerit nunc id est laoreet, ut venenatis eros iaculis. Etiam placerat porttitor nisi id tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non dui in mi malesuada cursus. Nam sit amet ex risus. Sed in leo eleifend, suscipit augue sed, pretium libero.</p>
  </div>
</div>
<div class="section section--half-width">
  <div class="content">
    <h2>Section Half-Width</h2>
    <p>Nunc a dui vitae odio condimentum dignissim. Nunc vel urna non nibh commodo vehicula at laoreet sem. Donec nisi purus, hendrerit eget eleifend vitae, mollis at justo. Nullam non sollicitudin diam, nec porta erat. Aliquam eget laoreet nisi. Sed orci ante, facilisis quis ornare a, iaculis ac enim. Donec fermentum nulla et sollicitudin viverra. Duis vulputate, dolor quis porttitor feugiat, odio urna semper odio, eu dictum magna lacus sit amet arcu. Curabitur hendrerit nunc id est laoreet, ut venenatis eros iaculis. Etiam placerat porttitor nisi id tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non dui in mi malesuada cursus. Nam sit amet ex risus. Sed in leo eleifend, suscipit augue sed, pretium libero.</p>
  </div>
</div>
<div class="section section--half-width">
  <div class="content">
    <h2>Section Half Width</h2>
    <p>Nunc a dui vitae odio condimentum dignissim. Nunc vel urna non nibh commodo vehicula at laoreet sem. Donec nisi purus, hendrerit eget eleifend vitae, mollis at justo. Nullam non sollicitudin diam, nec porta erat. Aliquam eget laoreet nisi. Sed orci ante, facilisis quis ornare a, iaculis ac enim. Donec fermentum nulla et sollicitudin viverra. Duis vulputate, dolor quis porttitor feugiat, odio urna semper odio, eu dictum magna lacus sit amet arcu. Curabitur hendrerit nunc id est laoreet, ut venenatis eros iaculis. Etiam placerat porttitor nisi id tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non dui in mi malesuada cursus. Nam sit amet ex risus. Sed in leo eleifend, suscipit augue sed, pretium libero.</p>
  </div>
</div>

Table

Name Position Office Age Start date Salary
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700
Bruno Nash Software Engineer London 38 2011/05/03 $163,500
Sakura Yamamoto Support Engineer Tokyo 37 2009/08/19 $139,575
Thor Walton Developer New York 61 2013/08/11 $98,540
Finn Camacho Support Engineer San Francisco 47 2009/07/07 $87,500 
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td>2011/07/25</td>
      <td>$170,750</td>
    </tr>
    <tr>
      <td>Ashton Cox</td>
      <td>Junior Technical Author</td>
      <td>San Francisco</td>
      <td>66</td>
      <td>2009/01/12</td>
      <td>$86,000</td>
    </tr>
    <tr>
      <td>Cedric Kelly</td>
      <td>Senior Javascript Developer</td>
      <td>Edinburgh</td>
      <td>22</td>
      <td>2012/03/29</td>
      <td>$433,060</td>
    </tr>
    <tr>
      <td>Airi Satou</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>33</td>
      <td>2008/11/28</td>
      <td>$162,700</td>
    </tr>
    <tr>
      <td>Bruno Nash</td>
      <td>Software Engineer</td>
      <td>London</td>
      <td>38</td>
      <td>2011/05/03</td>
      <td>$163,500</td>
    </tr>
    <tr>
      <td>Sakura Yamamoto</td>
      <td>Support Engineer</td>
      <td>Tokyo</td>
      <td>37</td>
      <td>2009/08/19</td>
      <td>$139,575</td>
    </tr>
    <tr>
      <td>Thor Walton</td>
      <td>Developer</td>
      <td>New York</td>
      <td>61</td>
      <td>2013/08/11</td>
      <td>$98,540</td>
    </tr>
    <tr>
      <td>Finn Camacho</td>
      <td>Support Engineer</td>
      <td>San Francisco</td>
      <td>47</td>
      <td>2009/07/07</td>
      <td>$87,500</td>
    </tr>
  </tbody>
</table>

Responsive Table

Name Position Office Age Start date Salary
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700
Bruno Nash Software Engineer London 38 2011/05/03 $163,500
Sakura Yamamoto Support Engineer Tokyo 37 2009/08/19 $139,575
Thor Walton Developer New York 61 2013/08/11 $98,540
Finn Camacho Support Engineer San Francisco 47 2009/07/07 $87,500 
<table class="table--responsive">
  <thead class="table--responsive__head">
    <tr class="table--responsive__row">
      <th class="table--responsive__cell">Name</th>
      <th class="table--responsive__cell">Position</th>
      <th class="table--responsive__cell">Office</th>
      <th class="table--responsive__cell">Age</th>
      <th class="table--responsive__cell">Start date</th>
      <th class="table--responsive__cell">Salary</th>
    </tr>
  </thead>
  <tbody class="table--responsive__body">
    <tr class="table--responsive__row">
      <td class="table--responsive__cell">Tiger Nixon</td>
      <td class="table--responsive__cell">System Architect</td>
      <td class="table--responsive__cell">Edinburgh</td>
      <td class="table--responsive__cell">61</td>
      <td class="table--responsive__cell">2011/04/25</td>
      <td class="table--responsive__cell">$320,800</td>
    </tr>
    <tr class="table--responsive__row">
      <td class="table--responsive__cell">Garrett Winters</td>
      <td class="table--responsive__cell">Accountant</td>
      <td class="table--responsive__cell">Tokyo</td>
      <td class="table--responsive__cell">63</td>
      <td class="table--responsive__cell">2011/07/25</td>
      <td class="table--responsive__cell">$170,750</td>
    </tr>
    <tr class="table--responsive__row">
      <td class="table--responsive__cell">Ashton Cox</td>
      <td class="table--responsive__cell">Junior Technical Author</td>
      <td class="table--responsive__cell">San Francisco</td>
      <td class="table--responsive__cell">66</td>
      <td class="table--responsive__cell">2009/01/12</td>
      <td class="table--responsive__cell">$86,000</td>
    </tr>
    <tr class="table--responsive__row">
      <td class="table--responsive__cell">Cedric Kelly</td>
      <td class="table--responsive__cell">Senior Javascript Developer</td>
      <td class="table--responsive__cell">Edinburgh</td>
      <td class="table--responsive__cell">22</td>
      <td class="table--responsive__cell">2012/03/29</td>
      <td class="table--responsive__cell">$433,060</td>
    </tr>
    <tr class="table--responsive__row">
      <td class="table--responsive__cell">Airi Satou</td>
      <td class="table--responsive__cell">Accountant</td>
      <td class="table--responsive__cell">Tokyo</td>
      <td class="table--responsive__cell">33</td>
      <td class="table--responsive__cell">2008/11/28</td>
      <td class="table--responsive__cell">$162,700</td>
    </tr>
    <tr class="table--responsive__row">
      <td class="table--responsive__cell">Bruno Nash</td>
      <td class="table--responsive__cell">Software Engineer</td>
      <td class="table--responsive__cell">London</td>
      <td class="table--responsive__cell">38</td>
      <td class="table--responsive__cell">2011/05/03</td>
      <td class="table--responsive__cell">$163,500</td>
    </tr>
    <tr class="table--responsive__row">
      <td class="table--responsive__cell">Sakura Yamamoto</td>
      <td class="table--responsive__cell">Support Engineer</td>
      <td class="table--responsive__cell">Tokyo</td>
      <td class="table--responsive__cell">37</td>
      <td class="table--responsive__cell">2009/08/19</td>
      <td class="table--responsive__cell">$139,575</td>
    </tr>
    <tr class="table--responsive__row">
      <td class="table--responsive__cell">Thor Walton</td>
      <td class="table--responsive__cell">Developer</td>
      <td class="table--responsive__cell">New York</td>
      <td class="table--responsive__cell">61</td>
      <td class="table--responsive__cell">2013/08/11</td>
      <td class="table--responsive__cell">$98,540</td>
    </tr>
    <tr class="table--responsive__row">
      <td class="table--responsive__cell">Finn Camacho</td>
      <td class="table--responsive__cell">Support Engineer</td>
      <td class="table--responsive__cell">San Francisco</td>
      <td class="table--responsive__cell">47</td>
      <td class="table--responsive__cell">2009/07/07</td>
      <td class="table--responsive__cell">$87,500</td>
    </tr>
  </tbody>
</table>

Tags

Tag Default
Tag Black
Tag Silver
Tag Grey
Tag White
Tag Cerulean
Tag Blue
Tag Sky
Tag Red
Tag Yellow
Tag Orange
Tag Green
<div class="tag">Tag Default</div>
<div class="tag tag--black">Tag Black</div>
<div class="tag tag--silver">Tag Silver</div>
<div class="tag tag--grey">Tag Grey</div>
<div class="tag tag--white">Tag White</div>
<div class="tag tag--cerulean">Tag Cerulean</div>
<div class="tag tag--blue">Tag Blue</div>
<div class="tag tag--sky">Tag Sky</div>
<div class="tag tag--red">Tag Red</div>
<div class="tag tag--yellow">Tag Yellow</div>
<div class="tag tag--orange">Tag Orange</div>
<div class="tag tag--green">Tag Green</div>
Tag Default
Tag Black
Tag Silver
Tag Grey
Tag White
Tag Deep Blue
Tag Blue
Tag Red
Tag Yellow
Tag Orange
Tag Green
<div class="tag tag--selected">Tag Default</div>
<div class="tag tag--black tag--selected">Tag Black</div>
<div class="tag tag--silver tag--selected">Tag Silver</div>
<div class="tag tag--grey tag--selected">Tag Grey</div>
<div class="tag tag--white tag--selected">Tag White</div>
<div class="tag tag--deep-blue tag--selected">Tag Deep Blue</div>
<div class="tag tag--blue tag--selected">Tag Blue</div>
<div class="tag tag--red tag--selected">Tag Red</div>
<div class="tag tag--yellow tag--selected">Tag Yellow</div>
<div class="tag tag--orange tag--selected">Tag Orange</div>
<div class="tag tag--green tag--selected">Tag Green</div>

Type Selectors

Paragraphs - Nulla mollis nisl sed diam fermentum malesuada. Suspendisse commodo rhoncus ligula, eget commodo neque lacinia ac. Aliquam cursus id tortor nec efficitur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel ornare nisi, at ornare libero. Aenean accumsan sodales massa sit amet ultricies. Vivamus condimentum vehicula magna, eget aliquam ex hendrerit nec. Aenean congue ex orci, imperdiet ultricies justo cursus sed. Phasellus congue nulla et pharetra elementum. Nam sapien ex, pulvinar tempus eros maximus, pulvinar commodo erat. Sed id ipsum elit. Sed auctor turpis eget elit viverra egestas non in massa.

Paragraphs - Nulla mollis nisl sed diam fermentum malesuada. Suspendisse commodo rhoncus ligula, eget commodo neque lacinia ac. Aliquam cursus id tortor nec efficitur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel ornare nisi, at ornare libero. Aenean accumsan sodales massa sit amet ultricies. Vivamus condimentum vehicula magna, eget aliquam ex hendrerit nec. Aenean congue ex orci, imperdiet ultricies justo cursus sed. Phasellus congue nulla et pharetra elementum. Nam sapien ex, pulvinar tempus eros maximus, pulvinar commodo erat. Sed id ipsum elit. Sed auctor turpis eget elit viverra egestas non in massa.

<p>Paragraphs - Nulla mollis nisl sed diam fermentum malesuada. Suspendisse commodo rhoncus ligula, eget commodo neque lacinia ac. Aliquam cursus id tortor nec efficitur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel ornare nisi, at ornare libero. Aenean accumsan sodales massa sit amet ultricies. Vivamus condimentum vehicula magna, eget aliquam ex hendrerit nec. Aenean congue ex orci, imperdiet ultricies justo cursus sed. Phasellus congue nulla et pharetra elementum. Nam sapien ex, pulvinar tempus eros maximus, pulvinar commodo erat. Sed id ipsum elit. Sed auctor turpis eget elit viverra egestas non in massa.</p>

<p>Paragraphs - Nulla mollis nisl sed diam fermentum malesuada. Suspendisse commodo rhoncus ligula, eget commodo neque lacinia ac. Aliquam cursus id tortor nec efficitur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel ornare nisi, at ornare libero. Aenean accumsan sodales massa sit amet ultricies. Vivamus condimentum vehicula magna, eget aliquam ex hendrerit nec. Aenean congue ex orci, imperdiet ultricies justo cursus sed. Phasellus congue nulla et pharetra elementum. Nam sapien ex, pulvinar tempus eros maximus, pulvinar commodo erat. Sed id ipsum elit. Sed auctor turpis eget elit viverra egestas non in massa.</p>
Bold Text 
<b>Bold Text</b>
Strong Text 
<strong>Strong Text</strong>
Italic Text 
<i>Italic Text</i>
Emphasized Text 
<em>Emphasized Text</em>
Underlined Text 
<u>Underlined Text</u>
Strikethrough text 
<strike>Strikethrough text</strike>
This is an example of Superscript text 
This is an example of <sup>Superscript text</sup>
This is an example of Subscript text 
This is an example of <sub>Subscript text</sub>
This is small text 
This is <small>small text</small>
abbr is an abbreviation 
<abbr title="Abbreviation">abbr</abbr> is an abbreviation
To submit a form, press the key labeled enter 
To submit a form, press the key labeled <kbd>enter</kbd>
Quoted text 
<q cite="http://example.com">Quoted text</q>

Blockquote - Nunc mi urna, sodales eu varius tincidunt, gravida id nisl. Vestibulum at enim in tortor consectetur sagittis vitae nec tellus. Integer a gravida felis. Suspendisse pharetra elementum enim. Phasellus urna eros, accumsan at ante ut, sollicitudin sodales neque. Proin egestas vitae dui eget scelerisque. Nulla feugiat ex at erat porta, ac porttitor turpis sagittis.

William Shatner 
<blockquote>
  <p>Blockquote - Nunc mi urna, sodales eu varius tincidunt, gravida id nisl. Vestibulum at enim in tortor consectetur sagittis vitae nec tellus. Integer a gravida felis. Suspendisse pharetra elementum enim. Phasellus urna eros, accumsan at ante ut, sollicitudin sodales neque. Proin egestas vitae dui eget scelerisque. Nulla feugiat ex at erat porta, ac porttitor turpis sagittis.</p>
  <cite>
    <a>William Shatner</a>
  </cite>
</blockquote>
The definition is the word being defined 
<dfn>The definition</dfn>
is the word being defined
Mark text 
<mark>Mark text</mark>
Sample Text 
<samp>Sample Text</samp>
var = x 
var =
<var>x</var>
<time>20:00</time>
<time datetime="2001-05-15 19:00">May 15</time>