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

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
Hover styling.

### Box title

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

    <div class="box box--with-hover">
      <h3 class="box__title">Box title</h3>
      <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.1.1 #components.box.box--icon Icon box

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--icon">
      <div class="box--icon__left"><span class="fa fa-bus" aria-hidden="true"></span></div>
        <div class="box--icon__right">
        <h3 class="box__title"><a href="#">Box title</a></h3>
        <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>
    </div>

#### 4.1.2.1 #components.box.box--icon-with-border.hbs Icon box - with border

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--icon box--with-border">
      <div class="box--icon__left"><span class="fa fa-bus" aria-hidden="true"></span></div>
        <div class="box--icon__right">
        <h3 class="box__title"><a href="#">Box title</a></h3>
        <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>
    </div>

#### 4.1.3.1 #components.box.box--icon-with-hover.hbs Icon box - with hover

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--icon box--with-hover box--with-border">
      <div class="box--icon__left"><span class="fa fa-bus" aria-hidden="true"></span></div>
        <div class="box--icon__right">
        <h3 class="box__title"><a href="#">Box title</a></h3>
        <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>
    </div>

## 4.2 #components.button Button

In addition to the default styling of `<button>` and `<input type="submit|image|reset|button">` elements, the `.button` class and its variants can apply buttons styles to various elements (like an `<a>` link).

Examples
Default styling

Link button

Disabled link button

:hover
Hover styling.

Link button

Disabled link button

.button--large
Large button styling.

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.4 #components.comment Comments

The comments of page.

Example

## 2 Comments

admin - Wednesday 03 Jun, 2015

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

- delete
- edit
- reply

admin - Wednesday 03 Jun, 2015

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

- delete
- edit
- reply

    <section class="comment__section comment-wrapper">
      <h2 class="comment__section-title">2 Comments</h2>

      <article class="comment comment-by-node-author comment-by-viewer first odd clearfix ">
        <div class="comment--inner-wrapper">
          <header>
            <p class="submitted">
              <span><span class="field author"><a class="username" title="View user profile." href="#">admin</a></span> - <span class="field date-month">Wednesday 03 Jun, 2015</span></span>
            </p>
          </header>

          <div class="field field-name-comment-body field-type-text-long field-label-hidden">
            <div class="field-items">
              <div class="field-item even">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
              </div>
            </div>
          </div>

          <ul class="links inline">
            <li class="comment-delete first"><a href="/comment/1/delete">delete</a></li>
            <li class="comment-edit"><a href="/comment/1/edit">edit</a></li>
            <li class="comment-reply last"><a href="/comment/reply/10/1">reply</a></li>
          </ul>
        </div>
      </article>

      <div class="indented"><a id="comment-2"></a>
        <article class="comment comment-new comment-by-node-author comment-by-viewer last even clearfix ">
          <div class="comment--inner-wrapper">
            <header>
              <p class="submitted">
                <span><span class="field author"><a class="username" title="View user profile." href="#">admin</a></span> - <span class="field date-month">Wednesday 03 Jun, 2015</span></span>
              </p>
            </header>

            <div class="field field-name-comment-body field-type-text-long field-label-hidden">
              <div class="field-items">
                <div class="field-item even">
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
              </div>
            </div>

            <ul class="links inline">
              <li class="comment-delete first"><a href="/comment/1/delete">delete</a></li>
              <li class="comment-edit"><a href="/comment/1/edit">edit</a></li>
              <li class="comment-reply last"><a href="/comment/reply/10/1">reply</a></li>
            </ul>
          </div>
        </article>
      </div>
    </section>

## 4.5 #components.comment-picture Comments picture

The comments of page.

Example

## 2 Comments

admin - Wednesday 03 Jun, 2015

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

- delete
- edit
- reply

admin - Wednesday 03 Jun, 2015

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

- delete
- edit
- reply

    <section class="comment__section comment-wrapper">
      <h2 class="comment__section-title">2 Comments</h2>

      <article class="comment comment-by-node-author comment-by-viewer odd clearfix  with-picture">
        <span class="user-picture">
          <a title="View user profile." href="#"><img title="admin's picture" alt="admin's picture" src="../../profiles/agov/themes/agov/agov_whitlam/sass/components/comment/author.png"></a>
        </span>
        <div class="comment--inner-wrapper">
          <header>
            <p class="submitted">
              <span><span class="field author"><a class="username" title="View user profile." href="#">admin</a></span> - <span class="field date-month">Wednesday 03 Jun, 2015</span></span>
            </p>
          </header>

          <div class="field field-name-comment-body field-type-text-long field-label-hidden">
            <div class="field-items">
              <div class="field-item even">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
              </div>
            </div>
          </div>

          <ul class="links inline">
            <li class="comment-delete first"><a href="/comment/1/delete">delete</a></li>
            <li class="comment-edit"><a href="/comment/1/edit">edit</a></li>
            <li class="comment-reply last"><a href="/comment/reply/10/1">reply</a></li>
          </ul>
        </div>
      </article>

      <div class="indented"><a id="comment-2"></a>
        <article class="comment comment-new comment-by-node-author comment-by-viewer last even clearfix with-picture ">
          <span class="user-picture">
            <a title="View user profile." href="#"><img title="admin's picture" alt="admin's picture" src="../../profiles/agov/themes/agov/agov_whitlam/sass/components/comment/author.png"></a>
          </span>
          <div class="comment--inner-wrapper">
            <header>
              <p class="submitted">
                <span><span class="field author"><a class="username" title="View user profile." href="#">admin</a></span> - <span class="field date-month">Wednesday 03 Jun, 2015</span></span>
              </p>
            </header>

            <div class="field field-name-comment-body field-type-text-long field-label-hidden">
              <div class="field-items">
                <div class="field-item even">
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
              </div>
            </div>

            <ul class="links inline">
              <li class="comment-delete first"><a href="/comment/1/delete">delete</a></li>
              <li class="comment-edit"><a href="/comment/1/edit">edit</a></li>
              <li class="comment-reply last"><a href="/comment/reply/10/1">reply</a></li>
            </ul>
          </div>
        </article>
      </div>
    </section>

## 4.6 #components.date Date

Styling of date for pages.

Example
Date of publication:5 November 2015

    <label class="inline-sibling">Date of publication:</label><span class="date">5 November 2015</span>

### 4.6.1 #components.date.date--without-label Date without label

This is how a date is displayed without label.

Example
5 November 2015

    <span class="date date--without-label">5 November 2015</span>

## 4.7 #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 "></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>

## 4.8 #components.fa FontAwesome Icons

Icons are provided by the Fontawesome icon library. Standard icons can be modified using additional classes.

Examples
Default styling
Icon
.fa-lg
Larger Icons.
Icon

    <span class="fa fa-twitter [modifier class]" aria-hidden="true"></span> Icon

## 4.9 #components.footer-bottom Footer Bottom

The footer bottom region of page

Example

    <footer class="footer-bottom">
      <div class="layout-center clearfix <?php print $classes; ?>">
        <div class="footer-bottom__left">
          <p>© Copyright 2015 aGov.</p>
        </div>
        <div class="footer-bottom__right">
          <p>
            <span class="fa fa-chevron-circle-up fa-lg" aria-hidden="true"></span>
            <a class="footer-bottom__link" href="#skip-link">Back to top</a>
          </p>
        </div>
      </div>
    </footer>

## 4.10 #components.footer-top Footer Top

The footer top region of page

Example

    <div class="footer-top ">
      <div class="layout-center">
        <div class="footer-top__menu">
          <h2>Footer Sub Menu</h2>
          <ul>
            <li><a href="#">Disclaimer</a></li>
            <li><a href="#">Privacy</a></li>
            <li><a href="#">Accessibility Notice</a></li>
            <li><a href="#">Feedback</a></li>
            <li><a href="#">Sitemap and Feeds</a></li>
          </ul>
        </div>
      </div>
    </div>

## 4.11 #components.forms Forms

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

@TODO: The current icon is broken. We will need to replace the old throbber.gif with an icon from the icon library.

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.11.2 #components.forms.form-item Form item

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

Examples
Default styling
Label *
Form item description.
Another label *
Another form item description.
.form-item--inline
Inline form items.
Label *
Form item description.
Another label *
Another form item description.
.form-item--tight
Packs groups of form items closer together.
Label *
Form item description.
Another label *
Another form item description.
.is-error
Highlight the form elements that caused a form submission error.
Label *
Form item description.
Another label *
Another form item description.

    <div class="form-item [modifier class]">
      <label class="form-item__label" for="form-item-input">Label <span class="form-item__required" title="This field is required.">*</span></label>
      <input class="form-item__widget" type="text" id="form-item-input" value="Text value">
      <div class="form-item__description">
        Form item description.
      </div>
    </div>
    <div class="form-item [modifier class]">
      <label class="form-item__label" for="form-item-input-2">Another label <span class="form-item__required" title="This field is required.">*</span></label>
      <input class="form-item__widget" type="text" id="form-item-input-2" value="Text value">
      <div class="form-item__description">
        Another form item description.
      </div>
    </div>

### 4.11.3 #components.forms.form-item--radio Form item (radio)

Checkboxes and radios require slightly different markup; their label is after their widget instead of before. Uses the `.form-item--radio` class variant of the normal form item and is placed on each of the nested form items.

Examples
Default styling
Label for the group
Form group description.
Option 1
Form item description.
Option 2
Form item description.
.is-error
Highlight the form elements that caused a form submission error.
Label for the group
Form group description.
Option 1
Form item description.
Option 2
Form item description.

    <div class="form-item">
      <label class="form-item__label" for="group">Label for the group</label>
      <div class="form-item__description">
        Form group description.
      </div>
      <div class="form-item__group" id="group">
        <div class="form-item--radio [modifier class]">
          <input class="form-item__widget" type="checkbox" id="option-1" value="1">
          <label class="form-item__label" for="option-1">Option 1</label>
          <div class="form-item__description">
            Form item description.
          </div>
        </div>
        <div class="form-item--radio [modifier class]">
          <input class="form-item__widget" type="checkbox" id="option-2" value="2">
          <label class="form-item__label" for="option-2">Option 2</label>
          <div class="form-item__description">
            Form item description.
          </div>
        </div>
      </div>
    </div>

### 4.11.4 #components.forms.resizable-textarea Resizable textarea

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

Example
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 class="resizable-textarea " 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>

## 4.12 #components.header Header

The header of page.

Example

# aGov

    <header role="banner" class="header">
      <div class="layout-center header__inner clearfix">
        <a class="header__logo" rel="home" title="Home" href="/"><img class="header__logo-image" alt="Home" src="../../profiles/agov/themes/agov/agov_whitlam/logo.png"></a>

        <div class="header__name-and-slogan">
          <h1 class="header__site-name visually-hidden">
            <a rel="home" class="header__site-link" title="Home" href="/"><span>aGov</span></a>
          </h1>
        </div>
        <div class="header__region region region-header"></div>
      </div>
    </header>

## 4.13 #components.highlight-mark Highlight mark

The "new" or "updated" marker.

Example
New

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

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

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

## 4.16 #components.lede Lede

The lede is introductory text that is given special prominent styling.

Example
Intro text style praesent quis dolor justo vestibulum sit amet porta felis, proin interdum finibus ligula id tincidunt. Phasellus finibus pretium erat at alique natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

    <div class="lede">
      Intro text style praesent quis dolor justo vestibulum sit amet porta felis, proin interdum finibus ligula id tincidunt. Phasellus finibus pretium erat at alique natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
    </div>

## 4.17 #components.messages Messages

System alerts.

### 4.17.1 #components.messages.single Messages

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>

### 4.17.2 #components.messages.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>

### 4.17.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.18 #components.navbar Navbar menu

Navbar menu is available.

Example

    <div class="demo-bg">
      <div class="navbar block-superfish ">
        <ul id="demo" class="menu sf-menu sf-main-menu">
          <li class="active-trail first"><a class="active" href="#">Home</a></li>
          <li class="middle menuparent">
            <a class="menuparent" href="#">About Us</a>
            <ul class="sf-hidden">
              <li><a href="#">News &amp; Media</a></li>
              <li><a href="#">News &amp; Media</a></li>
              <li class="last menuparent">
                <a class="menuparent" href="#" >Services</a>
                <ul class="sf-hidden">
                  <li><a href="#">Publications</a></li>
                  <li><a href="#">Publications</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li class="middle"><a href="#">Resources</a></li>
          <li class="last"><a href="#">Contact</a></li>
        </ul>
      </div>
    </div>

## 4.19 #components.navigation Navigation

### 4.19.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>
          <span class="breadcrumb__separator"> › </span>
        </li>
        <li class="breadcrumb__item">
          <a href="#">Level 1</a>
          <span class="breadcrumb__separator"> › </span>
        </li>
        <li class="breadcrumb__item">
          <a href="#">Level 2</a>
          <span class="breadcrumb__separator"> › </span>
        </li>
        <li class="breadcrumb__item">Current item</li>
      </ol>
    </nav>

### 4.19.2 #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="nav-menu ">
      <li><a href="/">Home</a></li>
      <li><a href="#">Blandit Jugis Sudo</a></li>
      <li>
        <a href="#">Causa Diam Jumentum Wisi</a>
        <ul>
          <li><a href="#">Dolor Huic Oppeto</a></li>
          <li><a href="#" class="is-active">Decet</a></li>
          <li><a href="#">Aliquip Similis</a></li>
        </ul>
      </li>
      <li><a href="#">Abigo Caecus Causa Illum</a></li>
      <li><a href="#">Ibidem Sudo</a></li>
    </ul>

### 4.19.3 #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 class="pager__link" title="Go to first page" href="#"><span class="fa fa-angle-double-left" aria-hidden="true"></span> first</a>
      </li>
      <li class="pager__item">
        <a class="pager__link" title="Go to previous page" href="#"><span class="fa fa-angle-left" aria-hidden="true"></span> previous</a>
      </li>
      <li class="pager__item">
        <a class="pager__link" title="Go to page 1" href="#">1</a>
      </li>
      <li class="pager__item">
        <a class="pager__link" title="Go to page 2" href="#">2</a>
      </li>
      <li class="pager__current-item">3</li>
      <li class="pager__item">
        <a class="pager__link" title="Go to page 4" href="#">4</a>
      </li>
      <li class="pager__item">
        <a class="pager__link" title="Go to page 5" href="#">5</a>
      </li>
      <li class="pager__item">
        <a class="pager__link" title="Go to next page" href="#">next <span class="fa fa-angle-right" aria-hidden="true"></span></a>
      </li>
      <li class="pager__item">
        <a class="pager__link" title="Go to last page" href="#">last <span class="fa fa-angle-double-right" aria-hidden="true"></span></a>
      </li>
    </ul>

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

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

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

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

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

This item will not be printed.

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

## 4.21 #components.progress-bar Progress bar

The Progress bar.

Example
60%
Installing...

    <div id="progress" class="progress">
      <div class="bar"><div class="filled" style="width: 60%"></div></div>
      <div class="percentage">60%</div>
      <div class="message">Installing...</div>
    </div>

## 4.22 #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.23 #components.search Search

A simple search styling.

Example

## Search form

Search

    <div class="wrap-demo search__wrapper">
      <form class="search search-form ">
        <h2 class="element-invisible">Search form</h2>
        <div class="search__input-wrapper search__inner-wrapper">
          <label class="element-invisible">Search </label>
          <input type="text" value="" class="search__input" placeholder="Enter your keywords">
        </div>
        <div class="search__button-wrapper">
          <span class="fa fa-search search__icon" aria-hidden="true"></span>
          <input type="submit" value="Search" class="search__button">
        </div>
      </form>
    </div>

## 4.24 #components.social Social

The social of page

Example

## Stay up to date

- Twitter
- Facebook
- Contact us

    <div class="social">
      <h2 class="social__title">Stay up to date</h2>

      <ul class="social__list">
        <li class="social__item" first>
          <a href="#"><span class="fa fa-twitter" aria-hidden="true"></span><span class="element-invisible">Twitter</span></a>
        </li>
        <li class="social__item">
          <a href="#"><span class="fa fa-facebook" aria-hidden="true"></span><span class="element-invisible">Facebook</span></a>
        </li>
        <li class="social__item" last>
          <a href="#"><span class="fa fa-envelope" aria-hidden="true"></span><span class="element-invisible">Contact us</span></a>
        </li>
      </ul>
    </div>

## 4.25 #components.tags Tags

tags.

Example
Tags:

- ponderum
- ipsum
- enim lenis
- secundum suscipere

    <div class="tags">
      <label class="inline-sibling">Tags:</label>
      <ul class="tags__items">
        <li class="tags__item"><a href="#">ponderum</a></li>
        <li class="tags__item"><a href="#">ipsum</a></li>
        <li class="tags__item"><a href="#">enim lenis</a></li>
        <li class="tags__item"><a href="#">secundum suscipere</a></li>
      </ul>
    </div>

## 4.26 #components.teaser Teaser

Teaser of page

Example

### Lorem ipsum dolor sit amet

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

    <div class="teaser ">
      <h3 class="teaser__title"><a href="#">Lorem ipsum dolor sit amet</a></h3>
      <div class="teaser__content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>

### 4.26.1 #components.teaser.teaser-image Teaser has image

Teaser of page

Examples
Default styling

### Lorem ipsum dolor sit amet

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

.teaser--wide
Teaser Wide.

### Lorem ipsum dolor sit amet

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

    <div class="teaser [modifier class]">
      <div class="teaser__image">
        <a href="#">
          <img title="text image" alt="text image" src="../../profiles/agov/themes/agov/agov_whitlam/sass/components/teaser/teaser--image.png"/>
        </a>
      </div>

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

## 4.27 #components.unstyled-list Unstyled list

A list with all styles removed.

Example

- 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 class="unstyled-list ">
      <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
        <ul>
          <li>Phasellus iaculis neque</li>
          <li>Purus sodales ultricies</li>
          <li>Vestibulum laoreet porttitor sem</li>
          <li>Ac tristique libero volutpat at</li>
        </ul>
      </li>
      <li>Faucibus porta lacus fringilla vel</li>
      <li>Aenean sit amet erat nunc</li>
      <li>Eget porttitor lorem</li>
    </ul>

## 4.28 #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.29 #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>