3 Elements

3.1 Paragraphs

The p element is one of the most commonly used building blocks of HTML.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas odio tortor, sed vehicula nunc lobortis rutrum. Cras ultrices luctus purus non malesuada. Morbi accumsan, justo ut venenatis aliquet, risus elit sollicitudin tellus, eu vestibulum velit odio a justo.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas odio tortor, sed vehicula nunc lobortis rutrum. Cras ultrices luctus purus non malesuada. Morbi accumsan, justo ut venenatis aliquet, risus elit sollicitudin tellus, eu vestibulum velit odio a justo.</p>

3.2 Links

The a element is usually referred to as a link.

.ext

External Link

<a class="{$modifiers}" href="#" title="link title">Text link</a>

3.3 Blockquote

The blockquote element is a mechanism for marking up a block of text quoted from a person or another document or source.

Design is not just what it looks like and feels like. Design is how it works.

Steve Jobs
<blockquote>
  <p>Design is not just what it looks like and feels like. Design is how it works.</p>
  <footer>
    <cite>Steve Jobs</cite>
  </footer>
</blockquote>

3.4 Line Rule

The hr element creates in the document a highly visible break that renders as a slim horizontal line running the width of the area to which it’s applied.


<hr>

3.5 Lists

Element that groups related content together. They're part of everyday life and come in multiple formats.

3.5.1 Unordered List

The ul element, the name for which is an abbreviation of unordered list, is used to group a collection of items together in a list, but in a way that doesn’t suggest an order of precedence or importance.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<ul>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit</li>
  <li>Phasellus iaculis neque</li>
  <li>Purus sodales ultricies</li>
  <li>Vestibulum laoreet porttitor sem</li>
  <li>Ac tristique libero volutpat at</li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ul>

3.5.2 Ordered List

The ol element is similar to the ul element in that it’s used to group a collection of items together in a list.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
<ol>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit</li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ol>

3.5.3 Definition List

If you want to list a series of items that essentially have a title and a description of some kind (that is, each item has two parts), use the definition list dl element.

Definition List
A number of connected items or names written or printed consecutively, typically one below the other.
This is a term.
This is the definition of that term, which both live in a dl.
Here is another term.
And it gets a definition too, which is this line.
Here is term that shares a definition with the term below.
And it gets a definition too, which is this line.
<dl>
  <dt>Definition List</dt>
  <dd>A number of connected items or names written or printed consecutively, typically one below the other.</dd>
  <dt>This is a term.</dt>
  <dd>This is the definition of that term, which both live in a dl.</dd>
  <dt>Here is another term.</dt>
  <dd>And it gets a definition too, which is this line.</dd>
  <dt>Here is term that shares a definition with the term below.</dt>
  <dd>And it gets a definition too, which is this line.</dd>
</dl>

3.6 Call To Actions

A majority of buttons in the site are built from the same base class.

3.6.1 Buttons

Link Button
.accent

Solid style / accent color

Link Button
.ghost

Ghost style / core color

Link Button
.ghost.accent

Ghost style / accent color

Link Button
.ghost.inverted

Ghost style / inverted - white border

Link Button
.video

Video icon, left side

Link Button
.back

Back style / arrow is on left pointing left

Link Button
.ext

External link

Link Button

<a href="#" class="button {$modifiers}">Link Button</a>
<button class="button {$modifiers}">Button Element</button>
<input type="submit" class="button {$modifiers}" value="input[type='submit']"/>

3.6.2 Button Groups

<div class="button-group">
  <a href="#" class="button">Link Button</a>
  <a href="#" class="button ghost">Link Button</a>
</div>

3.7 Inputs

Common form element that allows users to enter data.

3.7.1 Input Text

This field is required
.invalid

Invalid state

This field is required
<div class="field {$modifiers}">
  <label for="name">Text Input:</label>
  <input type="text" name="name" id="name" placeholder="Your name" />
  <strong class="error-message">This field is required <span class="icon-error" aria-hidden="true"></span></strong>
</div>

3.7.2 Input Email

This field is required
<div class="field {$modifiers}">
  <label for="email">Email Input:</label>
  <input type="email" name="email" id="email" placeholder="someone@example.com" autocapitalize="off" />
  <strong class="error-message">This field is required <span class="icon-error" aria-hidden="true"></span></strong>
</div>

3.7.3 Input Password

This field is required
<div class="field {$modifiers}">
  <label for="password">Password Input:</label>
  <input type="password" name="password" id="password" placeholder="Password" autocapitalize="off" />
  <strong class="error-message">This field is required <span class="icon-error" aria-hidden="true"></span></strong>
</div>

3.7.4 Input Telephone

This field is required
<div class="field {$modifiers}">
  <label for="phone">Telephone Input:</label>
  <input type="tel" name="phone" id="phone" placeholder="(###) ###-####" />
  <strong class="error-message">This field is required <span class="icon-error" aria-hidden="true"></span></strong>
</div>

3.7.5 Email Signup Form

<div class="email-signup">
  <div class="field-group">
    <div class="field {$modifiers}">
      <label for="email">Email Input:</label>
      <input type="email" name="email" id="email" placeholder="someone@example.com" autocapitalize="off" />
      <strong class="error-message">This field is required <span class="icon-error" aria-hidden="true"></span></strong>
    </div>
    <input type="submit" class="button" value="Subscribe" />
  </div>
</div>

3.7.6 Textareas

<div class="field">
  <label for="comment">Comment:</label>
  <textarea id="comment" name="comment"></textarea>
</div>

3.8 Selections

Various form elements that allow the user to make selection(s).

3.8.1 Select Box

<div class="field select">
  <label for="select-choice">Select an option:</label>
  <select name="select-choice" id="select-choice">
    <option value="Choice 1">Choice 1</option>
    <option value="Choice 2">Choice 2</option>
    <option value="Choice 3">Choice 3</option>
  </select>
</div>

3.8.2 Single Select

Select an option:
<div class="fieldset radios">
  <fieldset>
    <legend><span>Select an option:</span></legend>
    <ul>
      <li class="field">
        <input type="radio" class="radio" name="options" id="single-option1" />
        <label for="single-option1">Option 1</label>
      </li>
      <li class="field">
        <input type="radio" class="radio" name="options" id="single-option2" />
        <label for="single-option2">Option 2</label>
      </li>
    </ul>
  </fieldset>
</div>

3.8.3 Multi Select

Checkboxes
<div class="fieldset checkboxes">
  <fieldset>
    <legend><span>Checkboxes</span></legend>
    <ul>
      <li class="field">
        <input type="checkbox" class="checkbox" name="option" value="option1" id="option1" />
        <label for="option1">Option 1</label>
      </li>
      <li class="field">
        <input type="checkbox" class="checkbox" name="option" value="option2" id="option2" />
        <label for="option2">Option 2</label>
      </li>
      <li class="field">
        <input type="checkbox" class="checkbox" name="option" value="option3" id="option3" />
        <label for="option3">Option 3</label>
      </li>
    </ul>
  </fieldset>
</div>

3.8.4 Drupal Form Error message

Error message

  • Contact Group field is required.
  • Contact Type field is required.
  • County / Facility / Company Name field is required.
  • Contact Name field is required.
  • Mailing Address field is required.
  • E-mail Address field is required.

3.9 Tables

A table displays a collections of data grouped into rows. It is NOT meant to be used for layout composition.

Shelly's Daughters
Name Age Birthday
Jackie 5 April 5
Beth 8 January 14
.equal-cols

Equal-width columns

Shelly's Daughters
Name Age Birthday
Jackie 5 April 5
Beth 8 January 14
<table class="{$modifiers}">
  <caption>Shelly's Daughters</caption>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Age</th>
      <th scope="col">Birthday</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Jackie</th>
      <td>5</td>
      <td>April 5</td>
    </tr>
    <tr>
      <th scope="row">Beth</th>
      <td>8</td>
      <td>January 14</td>
    </tr>
  </tbody>
</table>

3.9.1 Tables - DataTables

DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, and will add advanced interaction controls to any HTML table.

Shelly's Daughters
Name Age Birthday Birthday2 Birthday3
Jackie 5 April 5 April 5 April 5
Beth 8 January 14 April 5 April 5
<table class="enableDT display responsive">
  <caption>Shelly's Daughters</caption>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Age</th>
      <th scope="col">Birthday</th>
      <th scope="col">Birthday2</th>
      <th scope="col">Birthday3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td scope="row">Jackie</th>
      <td>5</td>
      <td>April 5</td>
      <td>April 5</td>
      <td>April 5</td>
    </tr>
    <tr>
      <td scope="row">Beth</th>
      <td>8</td>
      <td>January 14</td>
      <td>April 5</td>
      <td>April 5</td>
    </tr>
  </tbody>
</table>

3.10 Images

Display a photograph/graphic in the content. You can optionally configure image sources for multi-device support.

a cute kitten
<!-- Basic Image -->
<picture>
  <source media="(min-width: 650px)" srcset="img/kitten-large.png">
  <source media="(min-width: 465px)" srcset="img/kitten-medium.png">
  <!-- img tag for browsers that do not support picture element -->
  <img src="img/kitten-small.png" alt="a cute kitten">
</picture>

3.11 Video Embeds

Displays a video from an external source, such as YouTube or Vimeo, without forcing the user to leave the current web page.


<!-- YouTube -->
<iframe width="560" height="315" src="https://www.youtube.com/embed/jnk15Wf6xMU?rel=0" frameborder="0" allowfullscreen></iframe>
<br>
<!-- Vimeo -->
<iframe src="https://player.vimeo.com/video/105432007" width="560" height="315" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

3.12 Labels

Displays text that associates with an object. Useful for publish dates, author, categories, tags, etc.

Label name
.tag

Tag formatting

Label name
.category

Category formatting

Label name
.date

Date formatting

Label name
<span class="label {$modifiers}">Label name</span>