# 5 #components Components

Design components are reusable designs that can be applied using just the CSS class names specified in the component.

## 5.1 #components.box Box

A simple box styling.

A Drupal block is often styled as a box. However, this design component is not applied to any blocks by default; it is used as an example of how to build and document a CSS component.

Examples
Default styling

## Box title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
:hover
The hover/focus styling.

## Box title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.box--highlight
The "highlight" box variant.

## Box title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    <div class="box [modifier class]">
      <h2 class="box__title">Box title</h2>
      <div class="box__content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </div>
    </div>

## 5.2 #components.clearfix Clearfix

Allows the bottom of an element to extend to the bottom of all floated child elements. See http://nicolasgallagher.com/micro-clearfix-hack/

Example
A floated item.

    <div class="clearfix">
      <div style="float: left; height: 50px; width: 50%;">A floated item.</div>
    </div>

## 5.3 #components.comments Comment

A single comment in a thread of comments.

Examples
Default styling

Jane A. User replied on Wed, 08/19/2015 - 17:51 Permalink

### The comment's title

Conventio facilisis nutus. Distineo lucidus olim ut. Huic illum olim quadrum usitas. Bene ex pecus pneum uxor. Brevitas diam hos persto tincidunt virtus. Consequat dignissim distineo eros exerci huic ludus sino turpis.

.comment--preview
Preview version of comment.

Jane A. User replied on Wed, 08/19/2015 - 17:51 Permalink

### The comment's title

Conventio facilisis nutus. Distineo lucidus olim ut. Huic illum olim quadrum usitas. Bene ex pecus pneum uxor. Brevitas diam hos persto tincidunt virtus. Consequat dignissim distineo eros exerci huic ludus sino turpis.

.comment--nested
A nested comment.

Jane A. User replied on Wed, 08/19/2015 - 17:51 Permalink

### The comment's title

Conventio facilisis nutus. Distineo lucidus olim ut. Huic illum olim quadrum usitas. Bene ex pecus pneum uxor. Brevitas diam hos persto tincidunt virtus. Consequat dignissim distineo eros exerci huic ludus sino turpis.

    <div class="comment__section">
      <article class="comment [modifier class]">
        <header>
          <p><a href="#">Jane A. User</a> replied on <time>Wed, 08/19/2015 - 17:51</time>
            <a href="#" class="comment__permalink">Permalink</a>
          </p>

          <h3 class="comment__title">
            <a href="#">The comment's title</a>
          </h3>
        </header>

        <p>Conventio facilisis nutus. Distineo lucidus olim ut. Huic illum olim quadrum usitas. Bene ex pecus pneum uxor. Brevitas diam hos persto tincidunt virtus. Consequat dignissim distineo eros exerci huic ludus sino turpis.</p>
      </article>
    </div>

## 5.4 #components.divider Divider

Can be used as an `<hr>`, an empty `<div>` or as a container.

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    <div class="divider "></div>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

    <div class="divider ">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>

    <hr class="divider ">

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

## 5.5 #components.header Branding header

Example

# Site Name

Slogan
[Header region]

    <header class="header " role="banner">
      <a href="/" title="Home" rel="home" class="header__logo">
        <img src="public/sample-inline.png" alt="Home" class="header__logo-image">
      </a>

      <div class="header__name-and-slogan">
        <h1 class="header__site-name">
          <a href="/" title="Home" class="header__site-link" rel="home">Site Name</a>
        </h1>
        <div class="header__site-slogan">Slogan</div>
      </div>

      <nav class="header__secondary-menu" role="navigation">
        <h2 class="visually-hidden">User menu</h2>
        <ul class="links inline clearfix">
          <li class="menu-2 first"><a href="/user">My account</a></li>
          <li class="menu-15 last"><a href="/user/logout">Log out</a></li>
        </ul>
      </nav>

      <div class="header__region">
        [Header region]
      </div>
    </header>

## 5.6 #components.hidden Hidden

Hide elements from all users. Compare to the visually-hidden component.

Used for elements which should not be immediately displayed to any user. An example would be a collapsible fieldset that will be expanded with a click from a user.

For anything you want to hide on page load when JavaScript is enabled, use the `.js-hidden` class.

Example
This content is hidden.

    <div class="hidden ">
      This content is hidden.
    </div>

## 5.7 #components.highlight-mark Highlight mark

The "new" or "updated" marker.

Example
New

    <mark class="highlight-mark">New</mark>

## 5.8 #components.inline-links Inline links

A list of links that are inline with each other.

Example

- Read more
- Comment

    <ul class="inline-links ">
      <li class="inline-links__item"><a href="#">Read more</a></li>
      <li class="inline-links__item"><a href="#">Comment</a></li>
    </ul>

## 5.9 #components.inline-sibling Inline sibling

An element that needs to appear inline with the content that follows.

Example

#### A Heading

A normal paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    <h4 class="inline-sibling ">A Heading</h4>
    <p>A normal paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

## 5.10 #components.messages Messages

System alerts.

### 5.10.1 #components.messages.single Single Message

Examples
Default styling

## Status message

This is a single system message.
.messages--warning
Warning messages.

## Status message

This is a single system message.
.messages--error
Error messages.

## Status message

This is a single system message.

    <div class="messages [modifier class]">
      <h2 class="visually-hidden">Status message</h2>

      This is a single system message.
    </div>

### 5.10.2 #components.messages.multiple Multiple Messages

Examples
Default styling

## Status message

- This is a system message.
- And this is another system message.
- Message received: Unknown input.

.messages--warning
Warning messages.

## Status message

- This is a system message.
- And this is another system message.
- Message received: Unknown input.

.messages--error
Error messages.

## Status message

- This is a system message.
- And this is another system message.
- Message received: Unknown input.

    <div class="messages [modifier class]">
      <h2 class="visually-hidden">Status message</h2>

      <ul class="messages__list">
        <li class="messages__item">This is a system message.</li>
        <li class="messages__item">And this is another system message.</li>
        <li class="messages__item">Message received: <span class="messages__highlighted-text">Unknown input</span>.</li>
      </ul>
    </div>

### 5.10.3 #components.messages.status Message colors

Drupal system status reports use just the message colors and no other styling.

Examples
Default styling
This is a system status report message.
.messages--ok-color
"Ok" status.
This is a system status report message.
.messages--warning-color
Warning status.
This is a system status report message.
.messages--error-color
Error status.
This is a system status report message.

    <div class="[modifier class]">
      This is a system status report message.
    </div>

## 5.11 #components.navigation Navigation

### 5.11.1 #components.navigation.breadcrumb Breadcrumb navigation

The path to the current page in the form of a list of links.

Example

    <nav class="breadcrumb " role="navigation">
      <h2 class="breadcrumb__title">You are here</h2>

      <ol class="breadcrumb__list">
        <li class="breadcrumb__item"><a href="#">Home</a> › </li>
        <li class="breadcrumb__item"><a href="#">Level 1</a> › </li>
        <li class="breadcrumb__item"><a href="#">Level 2</a> › </li>
        <li class="breadcrumb__item">Current item</li>
      </ol>
    </nav>

### 5.11.2 #components.navigation.more-link "More" link

Styles the "Read more…" and "Help" links common in Drupal.

Example
Read more…
Help

    <div class="more-link ">
      <a href="#">Read more…</a>
    </div>

    <div class="more-link ">
      <a class="more-link__help-icon" href="#">Help</a>
    </div>

### 5.11.3 #components.navigation.nav-menu Nav menu

A "nav menu" is secondary, hierarchical navigation which can be displayed to the side or below the main content.

Example

    <ul class="side-menu ">
      <li class="side-menu__item">
        <a href="/" class="side-menu__link">Home</a>
      </li>
      <li class="side-menu__item is-collapsed">
        <a href="#" class="side-menu__link">Blandit Jugis Sudo</a>
      </li>
      <li class="side-menu__item is-expanded is-active-trail">
        <a href="#" class="side-menu__link is-active-trail">Causa Diam Jumentum Wisi</a>
        <ul class="side-menu">
          <li class="side-menu__item">
            <a href="#" class="side-menu__link">Dolor Huic Oppeto</a>
          </li>
          <li class="side-menu__item is-active-trail is-active">
            <a href="#" class="side-menu__link is-active">Decet</a>
          </li>
          <li class="side-menu__item is-collapsed">
            <a href="#" class="side-menu__link">Aliquip Similis</a>
          </li>
        </ul>
      </li>
      <li class="side-menu__item is-collapsed">
        <a href="#" class="side-menu__link">Abigo Caecus Causa Illum</a>
      </li>
      <li class="side-menu__item is-collapsed">
        <a href="#" class="side-menu__link">Ibidem Sudo</a>
      </li>
    </ul>

### 5.11.4 #components.navigation.navbar Navbar

A simple method to get navigation links to appear in one line.

Example

    <ul class="navbar clearfix">
      <li class="navbar__item"><a href="#">Home</a></li>
      <li class="navbar__item"><a href="#">Blandit Jugis</a></li>
      <li class="navbar__item"><a href="#">Causa Diam</a></li>
      <li class="navbar__item"><a href="#">Abigo Caecus</a></li>
      <li class="navbar__item"><a href="#">Ibidem Sudo</a></li>
      <li class="navbar__item"><a href="#">Luctus Luptatum</a></li>
      <li class="navbar__item"><a href="#">Ut</a></li>
    </ul>

### 5.11.5 #components.navigation.pager Pager

Paged navigation is a list of page numbers when more than 1 page of content is available.

Example

- « first
- ‹ previous
- 1
- 2
- 3
- 4
- 5
- next ›
- last »

    <ul class="pager ">
      <li class="pager__item">
        <a title="Go to first page" href="/admin/content">« first</a>
      </li>
      <li class="pager__item">
        <a title="Go to previous page" href="/admin/content?page=1">‹ previous</a>
      </li>
      <li class="pager__item">
        <a title="Go to page 1" href="/admin/content">1</a>
      </li>
      <li class="pager__item">
        <a title="Go to page 2" href="/admin/content?page=1">2</a>
      </li>
      <li class="pager__current-item">3</li>
      <li class="pager__item">
        <a title="Go to page 4" href="/admin/content?page=3">4</a>
      </li>
      <li class="pager__item">
        <a title="Go to page 5" href="/admin/content?page=4">5</a>
      </li>
      <li class="pager__item">
        <a title="Go to next page" href="/admin/content?page=3">next ›</a>
      </li>
      <li class="pager__item">
        <a title="Go to last page" href="/admin/content?page=4">last »</a>
      </li>
    </ul>

### 5.11.6 #components.navigation.skip-link Skip link

To make the link completely hidden until a user tabs to the link, combine it with the `visually-hidden` component.

Examples
Default styling

Jump to navigation

:focus
Focus styling.

Jump to navigation

    <p class="skip-link__wrapper">
      <a href="#main-menu" class="skip-link visually-hidden--focusable [modifier class]">Jump to navigation</a>
    </p>

### 5.11.7 #components.navigation.tabs Tabs

Example

- View (active tab)
- Edit
- Revisions

- Content (active tab)
- Display
- Settings

    <ul class="tabs ">
      <li class="tabs__tab is-active"><a href="#" class="tabs__tab-link is-active">View <span class="visually-hidden">(active tab)</span></a></li>
      <li class="tabs__tab"><a href="#" class="tabs__tab-link">Edit</a></li>
      <li class="tabs__tab"><a href="#" class="tabs__tab-link">Revisions</a></li>
    </ul>
    <ul class="tabs--secondary">
      <li class="tabs--secondary__tab is-active"><a href="#" class="tabs--secondary__tab-link is-active">Content <span class="visually-hidden">(active tab)</span></a></li>
      <li class="tabs--secondary__tab"><a href="#" class="tabs--secondary__tab-link">Display</a></li>
      <li class="tabs--secondary__tab"><a href="#" class="tabs--secondary__tab-link">Settings</a></li>
    </ul>

#### 5.11.7.1 #components.navigation.tabs.primary Tabs (primary)

Example

- View (active tab)
- Edit
- Revisions

    <ul class="tabs ">
      <li class="tabs__tab is-active"><a href="#" class="tabs__tab-link is-active">View <span class="visually-hidden">(active tab)</span></a></li>
      <li class="tabs__tab"><a href="#" class="tabs__tab-link">Edit</a></li>
      <li class="tabs__tab"><a href="#" class="tabs__tab-link">Revisions</a></li>
    </ul>

#### 5.11.7.2 #components.navigation.tabs.secondary Secondary tabs

Example

- Content (active tab)
- Display
- Settings

    <ul class="tabs--secondary">
      <li class="tabs--secondary__tab is-active"><a href="#" class="tabs--secondary__tab-link is-active">Content <span class="visually-hidden">(active tab)</span></a></li>
      <li class="tabs--secondary__tab"><a href="#" class="tabs--secondary__tab-link">Display</a></li>
      <li class="tabs--secondary__tab"><a href="#" class="tabs--secondary__tab-link">Settings</a></li>
    </ul>

## 5.12 #components.print-none Do not print

Removes an element from the print version of the web site.

By importing these CSS rules in a file marked as media "all", we allow these print rules to be aggregated with other stylesheets, for improved front-end performance.

Example

This item will not be printed.

    <p class="print-none">
      This item will not be printed.
    </p>

## 5.13 #components.responsive-video Responsive video

Using a wrapper div, embedded videos can be made responsive so that their intrinsic aspect ratio is preserved at any screen width. The `responsive-video__embed` class is optional if the embed is an `iframe`.

Examples
Default styling
.responsive-video--4-3
A video with a 4:3 aspect ratio instead of the default 16:9 one.

    <div class="responsive-video [modifier class]">
      <iframe class="responsive-video__embed" width="560" height="315" src="https://www.youtube.com/embed/8N_tupPBtWQ" frameborder="0" allowfullscreen></iframe>
    </div>

## 5.14 #components.visually-hidden Visually hidden

Make an element visually hidden, but accessible to screen readers, etc.

Examples
Default styling
This text will be read by screen readers, but will be visually hidden.
.visually-hidden--off
Turns off the visually-hidden effect.
This text will be read by screen readers, but will be visually hidden.
.visually-hidden--focusable
Makes an element visually hidden by default, but visible when receiving focus.
This text will be read by screen readers, but will be visually hidden.
.visually-hidden--focusable:focus
A focused, and visible, element.
This text will be read by screen readers, but will be visually hidden.

    <div class="visually-hidden [modifier class]">
      This text will be read by screen readers, but will be visually hidden.
    </div>

## 5.15 #components.watermark Watermark

Make the element appear beneath sibling elements, like a watermark.

Example
Unpublished

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    <div>
      <mark class="watermark ">Unpublished</mark>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p><p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

## 5.16 #components.wireframe Wireframe

Add wireframes around main layout elements. Wireframes are useful when prototyping a website.

This design is not applied to the site unless you set the following Sass variable: `$with-wireframes: true;`

Example

An item inside a wireframe.

    <div class="wireframe">
      <p>An item inside a wireframe.</p>
    </div>