4 #components Components

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

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

Example

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>

4.2 #components.button Button

Buttons built with the <button> tag are the most flexible for styling purposes. But <a> tags and <input> tags with type set to submit, image, reset, or button are also supported.

Example

Link button

Disabled link button

<p>
  <button class="[modifier class]" type="button">A normal button</button>
  <button class="[modifier class]" type="submit">A submit button</button>
  <button class="[modifier class]" type="reset">A reset button</button>
</p>
<p>
  <input class="[modifier class]" type="button" value="Input button">
  <input class="[modifier class]" type="submit" value="Input submit button">
  <input class="[modifier class]" type="reset" value="Input reset button">
</p>
<p>
  <a class="button [modifier class]" href="#">Link button</a>
</p>
<p>
  <button class="[modifier class]" type="button" disabled>A disabled button</button>
  <button class="[modifier class]" type="submit" disabled>A disabled submit button</button>
  <button class="[modifier class]" type="reset" disabled>A disabled reset button</button>
</p>
<p>
  <input class="[modifier class]" type="button" value="Disabled input button" disabled>
  <input class="[modifier class]" type="submit" value="Disabled input submit button" disabled>
  <input class="[modifier class]" type="reset" value="Disabled input reset button" disabled>
</p>
<p>
  <a class="button [modifier class]" disabled href="#">Disabled link button</a>
</p>

4.3 #components.clearfix Clearfix

Allows the bottom of an element to extend to the bottom of all floated children 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>

4.5 #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.

<div class="divider [modifier class]"></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 [modifier class]">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

4.6.1 #components.forms.autocomplete Autocomplete field

As the user starts to type a value, a selection list appears below the form item allowing them to choose an option.

Examples
Default styling
  • guwatif
  • hichiuasl

 

.is-throbbing
Waiting for search result.
  • guwatif
  • hichiuasl

 

<input type="text" value="" class="autocomplete [modifier class]">
<div class="autocomplete__list-wrapper">
  <ul class="autocomplete__list">
  <li class="autocomplete__list-item">guwatif</li>
  <li class="autocomplete__list-item is-selected">hichiuasl</li>
  </ul>
</div>
<p>&nbsp;</p>

4.6.3 #components.forms.form-item Form item

  • .form-item--grouped
    Pack groups of checkboxes and radio buttons closer together.
  • .form-item--error
    Highlight the form elements that caused a form submission error.
  • .form-item--inline
    Inline form items.

Wrapper for a form element (or group of form elements) and its label.

4.6.5 #components.forms.resizable-textarea Resizable textarea

A textarea that can be resized with a "grippie" widget.

Example
<textarea class="resizable-textarea [modifier class]" rows="5">
  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.
</textarea>
<div class="resizable-textarea__grippie"></div>
Example
FieldLabelFormat
No field is displayed.
 
Image
Image style: Large (480x480)
 
Body*
 
Tags
Hidden
No field is hidden.
<table class="tabledrag-processed">
<thead><tr><th>Field</th><th>Label</th><th colspan="3">Format</th></tr></thead>
<tbody>
  <tr class="region-message region-visible-message region-populated">
    <td colspan="7">No field is displayed.</td>
  </tr>
  <tr class="draggable tabledrag-leaf odd" id="field-image">
    <td><a href="#" class="tabledrag-handle" title="Drag to re-order"><div class="handle">&nbsp;</div></a>Image</td>
    <td class="tabledrag-hide" style="display: none;">
      <div class="form-item form-type-textfield form-item-fields-field-image-weight">
        <label class="visually-hidden" for="edit-fields-field-image-weight">Weight for Image</label>
        <input class="field-weight form-text" type="text" id="edit-fields-field-image-weight" name="fields[field_image][weight]" value="-1" size="3" maxlength="128">
      </div>
    </td>
    <td class="tabledrag-hide" style="display: none;">
      <div class="form-item form-type-select form-item-fields-field-image-parent">
        <label class="visually-hidden" for="edit-fields-field-image-parent">Label display for Image</label>
        <select class="field-parent form-select" id="edit-fields-field-image-parent" name="fields[field_image][parent]"><option value="" selected="selected">- None -</option></select>
      </div>
      <input class="field-name" type="hidden" name="fields[field_image][parent_wrapper][hidden_name]" value="field_image">
    </td>
    <td>
      <div class="form-item form-type-select form-item-fields-field-image-label">
        <label class="visually-hidden" for="edit-fields-field-image-label">Label display for Image</label>
        <select id="edit-fields-field-image-label" name="fields[field_image][label]" class="form-select"><option value="above">Above</option><option value="inline">Inline</option><option value="hidden" selected="selected">&lt;Hidden&gt;</option></select>
      </div>
    </td>
    <td>
      <div class="form-item form-type-select form-item-fields-field-image-type">
        <label class="visually-hidden" for="edit-fields-field-image-type">Formatter for Image</label>
        <select class="field-formatter-type form-select" id="edit-fields-field-image-type" name="fields[field_image][type]"><option value="image" selected="selected">Image</option><option value="hidden">&lt;Hidden&gt;</option></select>
      </div>
    </td>
    <td class="field-formatter-summary-cell">
      <div class="field-formatter-summary">Image style: Large (480x480)</div>
    </td>
    <td>
      <div class="field-formatter-settings-edit-wrapper">
        <input class="field-formatter-settings-edit form-submit ajax-processed" alt="Edit" type="image" id="edit-fields-field-image-settings-edit" name="field_image_formatter_settings_edit" src="http://drupal7x.dev/misc/configure.png">
      </div>
    </td>
  </tr>
  <tr class="draggable tabledrag-leaf even drag-previous" id="body">
    <td>
      <a href="#" class="tabledrag-handle" title="Drag to re-order"><div class="handle">&nbsp;</div></a>Body<span class="warning tabledrag-changed">*</span>
    </td>
    <td class="tabledrag-hide" style="display: none;">
      <div class="form-item form-type-textfield form-item-fields-body-weight">
        <label class="visually-hidden" for="edit-fields-body-weight">Weight for Body</label>
        <input class="field-weight form-text" type="text" id="edit-fields-body-weight" name="fields[body][weight]" value="0" size="3" maxlength="128">
      </div>
    </td>
    <td class="tabledrag-hide" style="display: none;">
      <div class="form-item form-type-select form-item-fields-body-parent">
        <label class="visually-hidden" for="edit-fields-body-parent">Label display for Body</label>
        <select class="field-parent form-select" id="edit-fields-body-parent" name="fields[body][parent]"><option value="" selected="selected">- None -</option></select>
      </div>
      <input class="field-name" type="hidden" name="fields[body][parent_wrapper][hidden_name]" value="body">
    </td>
    <td>
      <div class="form-item form-type-select form-item-fields-body-label">
        <label class="visually-hidden" for="edit-fields-body-label">Label display for Body</label>
        <select id="edit-fields-body-label" name="fields[body][label]" class="form-select"><option value="above">Above</option><option value="inline">Inline</option><option value="hidden" selected="selected">&lt;Hidden&gt;</option></select>
      </div>
    </td>
    <td>
      <div class="form-item form-type-select form-item-fields-body-type">
        <label class="visually-hidden" for="edit-fields-body-type">Formatter for Body</label>
        <select class="field-formatter-type form-select" id="edit-fields-body-type" name="fields[body][type]"><option value="text_default" selected="selected">Default</option><option value="text_plain">Plain text</option><option value="text_trimmed">Trimmed</option><option value="text_summary_or_trimmed">Summary or trimmed</option><option value="hidden">&lt;Hidden&gt;</option></select>
      </div>
    </td>
    <td></td>
    <td></td>
  </tr>
  <tr class="draggable tabledrag-leaf odd" id="field-tags">
    <td>
      <a href="#" class="tabledrag-handle" title="Drag to re-order"><div class="handle">&nbsp;</div></a>Tags
    </td>
    <td class="tabledrag-hide" style="display: none;">
      <div class="form-item form-type-textfield form-item-fields-field-tags-weight">
        <label class="visually-hidden" for="edit-fields-field-tags-weight">Weight for Tags</label>
        <input class="field-weight form-text" type="text" id="edit-fields-field-tags-weight" name="fields[field_tags][weight]" value="10" size="3" maxlength="128">
      </div>
    </td>
    <td class="tabledrag-hide" style="display: none;">
      <div class="form-item form-type-select form-item-fields-field-tags-parent">
        <label class="visually-hidden" for="edit-fields-field-tags-parent">Label display for Tags</label>
        <select class="field-parent form-select" id="edit-fields-field-tags-parent" name="fields[field_tags][parent]"><option value="" selected="selected">- None -</option></select>
      </div>
      <input class="field-name" type="hidden" name="fields[field_tags][parent_wrapper][hidden_name]" value="field_tags">
    </td>
    <td>
      <div class="form-item form-type-select form-item-fields-field-tags-label">
        <label class="visually-hidden" for="edit-fields-field-tags-label">Label display for Tags</label>
        <select id="edit-fields-field-tags-label" name="fields[field_tags][label]" class="form-select"><option value="above" selected="selected">Above</option><option value="inline">Inline</option><option value="hidden">&lt;Hidden&gt;</option></select>
      </div>
    </td>
    <td>
      <div class="form-item form-type-select form-item-fields-field-tags-type">
        <label class="visually-hidden" for="edit-fields-field-tags-type">Formatter for Tags</label>
          <select class="field-formatter-type form-select" id="edit-fields-field-tags-type" name="fields[field_tags][type]"><option value="taxonomy_term_reference_link" selected="selected">Link</option><option value="taxonomy_term_reference_plain">Plain text</option><option value="taxonomy_term_reference_rss_category">RSS category</option><option value="hidden">&lt;Hidden&gt;</option></select>
      </div>
    </td>
    <td></td>
    <td></td>
  </tr>
  <tr class="region-title region-hidden-title"><td colspan="7">Hidden</td></tr>
  <tr class="region-message region-hidden-message region-empty"><td colspan="7">No field is hidden.</td></tr>
</tbody>
</table>
Example
<header class="header [modifier class]" 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>

4.8 #components.hidden Hidden elements

Hide elements from all users.

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. The effect of this class can be toggled with the jQuery show() and hide() functions.

@TODO

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

4.11 #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 [modifier class]">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>
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>
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>

4.12.3 #components.messages.status Status report

Drupal system status reports use a simple styling.

Examples
Default styling
This is a system status report message.
.status--ok
"Ok" status.
This is a system status report message.
.status--warning
Warning status.
This is a system status report message.
.status--error
Error status.
This is a system status report message.
<div class="status [modifier class]">
  This is a system status report message.
</div>

4.13.1 #components.navigation.breadcrumb Breadcrumb navigation

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

Example
<nav class="breadcrumb [modifier class]" 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>

4.13.4 #components.navigation.pager Pager

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

<ul class="pager [modifier class]">
  <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>

4.13.5 #components.navigation.side-menu Side menu

A "side menu" is secondary, hierarchical navigation to be displayed to the side of the main content.

<ul class="side-menu [modifier class]">
  <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>
<ul class="tabs [modifier class]">
  <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>
<ul class="tabs [modifier class]">
  <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>

4.14 #components.print-none Do not print

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

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

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

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

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

4.18 #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 [modifier class]">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>

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