5 Components

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

Source: styles.scss, line 28

5.1 Accordion

Use content accordions if the user only needs a selection of the information on a page. @see http://guides.service.gov.au/design-guide/patterns/navigation.html#site-navigation

Examples
Default styling
:hover
Hover styling.
<details class="form-wrapper" aria-expanded="false">
  <summary role="button">1. Understand user needs</summary>
  <div class="accordion-panel">
    <p>Understand user needs. Research to develop a deep knowledge of the users
      and their context for the service.
    </p>
  </div>
</details>
Source: components/accordion/accordion.scss, line 4

5.2 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>
Source: components/box/box.scss, line 4
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"><i class="fa fa-bus"></i></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>
Source: components/box/box.scss, line 37
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"><i class="fa fa-bus"></i></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>
Source: components/box/box.scss, line 27

5.3 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

<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>
Source: components/button/button.scss, line 4

5.4 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>
Source: components/clearfix/clearfix.scss, line 4

5.5 Comments

The comments of page.

Example

Comments

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.

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

  <article class="comment">
    <div class="comment__inner-wrapper">
      <footer class="comment__meta">
        <span class="comment__submitted">
          <a title="View user profile." href="#">admin</a> - Wednesday 03 Jun, 2015
        </span>
        <span class="comment__permalink"><a href="#">Permalink</a></span>
      </footer>

      <div class="comment__content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </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">
      <div class="comment__inner-wrapper">
        <footer class="comment__meta">
          <span class="comment__submitted">
            <a title="View user profile." href="#">admin</a> - Wednesday 03 Jun, 2015
          </span>
          <span class="comment__permalink"><a href="#">Permalink</a></span>
        </footer>

        <div class="comment__content">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </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>
Source: components/comment/comment.scss, line 4

5.6 Date

Styling of date for pages. Emulates UI-Kit meta element.

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

Source: components/date/date.scss, line 4

5.7 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>
Source: components/divider/divider.scss, line 4
Source: components/__kss-categories.scss, line 5

5.10.1 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>
Source: components/autocomplete/autocomplete.scss, line 4

5.10.2 Form item

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

Examples
Default styling
Form item description.
Another form item description.
.form-item--inline
Inline form items.
Form item description.
Another form item description.
.form-item--tight
Packs groups of form items closer together.
Form item description.
Another form item description.
.is-error
Highlight the form elements that caused a form submission error.
Form item description.
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>
Source: components/form-item/form-item.scss, line 4

5.10.3 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
Form group description.
Form item description.
Form item description.
.is-error
Highlight the form elements that caused a form submission error.
Form group description.
Form item description.
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>
Source: components/form-item/form-item.scss, line 50

5.10.4 Resizable textarea

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

Example
<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>
Source: components/resizable-textarea/resizable-textarea.scss, line 4

5.11 Header

The header of page.

Example
<header role="banner" class="header">
  <div class="wrapper header__inner clearfix">
    <a class="header__logo" rel="home" title="Home" href="/"><img class="header__logo-image" alt="Home" src="/profiles/agov/themes/contrib/agov_base/logo.svg"></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>
Source: components/header/header.scss, line 4

5.12 Highlight mark

The "new" or "updated" marker.

Example
New
<mark class="highlight-mark">New</mark>
Source: components/highlight-mark/highlight-mark.scss, line 4

5.14 Messages

System alerts.

Source: components/messages/messages.scss, line 4
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>
Source: components/messages/messages.scss, line 10
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>
Source: components/messages/messages.scss, line 21

5.14.3 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>
Source: components/messages/messages.scss, line 30

5.15 Toggle nav

Toggle for the site-nav when the screen is too narrow to display it's horizontally.

Examples
Default styling
.active
The active state of the nav toggle
<a href="#" class="nav-toggle">Menu</a>
Source: components/nav-toggle/nav-toggle.scss, line 1
Source: components/__kss-categories.scss, line 9
Example
<nav class="breadcrumbs " role="navigation">
  <div class="wrapper">
    <h2 class="breadcrumb__title">You are here</h2>
    <ul 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>
    </ul>
  </div>
</nav>
Source: components/breadcrumb/breadcrumb.scss, line 4

5.16.3 Pager

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

Example
<ul class="pager ">
  <li class="pager__item pager__item--first">
    <a title="Go to first page" href="#">first</a>
  </li>
  <li class="pager__item pager__item--prev">
    <a title="Go to previous page" href="#">previous</a>
  </li>
  <li class="pager__item">
    <a title="Go to page 1" href="#">1</a>
  </li>
  <li class="pager__item">
    <a title="Go to page 2" href="#">2</a>
  </li>
  <li class="pager__item is-active">
    <a title="Current page" href="#">3</a>
  </li>
  <li class="pager__item">
    <a title="Go to page 4" href="#">4</a>
  </li>
  <li class="pager__item">
    <a title="Go to page 5" href="#">5</a>
  </li>
  <li class="pager__item pager__item--next">
    <a title="Go to next page" href="#">next</a>
  </li>
  <li class="pager__item pager__item--last">
    <a title="Go to last page" href="#">last</a>
  </li>
</ul>
Source: components/pager/pager.scss, line 4

5.16.4 Site navigation

Use site navigation to help the user to navigate between main sections. @see http://guides.service.gov.au/design-guide/patterns/navigation.html#site-navigation

<div class="site-nav">
  <nav class="site-nav__wrapper">
    <ul>
      <li>
        <a href="#">Home</a>
      </li>
      <li>
        <a href="#">What we do</a>
      </li>
      <li>
        <a href="#">News</a>
      </li>
      <li>
        <a href="#">Blog</a>
      </li>
      <li>
        <a href="#">Contact</a>
      </li>
    </ul>
  </nav>
</div>
Source: components/site-nav/site-nav.scss, line 4

5.16.6 Tabs

Use tab navigation to style a links list as horizontal tabs. Tabs wrap on top of each other for smaller breakpoints. @see http://guides.service.gov.au/design-guide/components/link-styles/index.html#in-page-tabs-experimental

<nav class="inline-tab-nav">
  <ul>
    <li><a class="is-active" href="#">View <span class="visually-hidden">(active tab)</span></a></li>
    <li><a href="#">Edit</a></li>
    <li><a href="#">Revisions</a></li>
  </ul>
</nav>
Source: components/tabs/tabs.scss, line 4
<nav class="inline-tab-nav inline-tab-nav--secondary">
  <ul>
    <li><a class="is-active" href="#">Content <span class="visually-hidden">(active tab)</span></a></li>
    <li><a href="#">Display</a></li>
    <li><a href="#">Settings</a></li>
  </ul>
</nav>
Source: components/tabs/tabs.scss, line 13

5.17 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>
Source: components/print-none/print-none.scss, line 4

5.18 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>
Source: components/progress-bar/progress-bar.scss, line 4

5.19 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>
Source: components/responsive-video/responsive-video.scss, line 4

5.21 Social

The social of page

Example
<h2>Stay up to date</h2>
<div class="social__item">
  <a href="#" class="social--twitter">
    <span class="social__text">Twitter</span>
  </a>
</div>
<div class="social__item">
  <a href="#" class="social--facebook">
    <span class="social__text">Facebook</span>
  </a>
</div>
<div class="social__item">
  <a href="#" class="social--contact">
    <span class="social__text">Contact us</span>
  </a>
</div>
Source: components/social/social.scss, line 4

5.22 Tags

Emulates tags from the UI-Kit.

<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>
Source: components/tags/tags.scss, line 4

5.23 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>
Source: components/teaser/teaser.scss, line 6
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/contrib/agov_base/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>
Source: components/teaser/teaser.scss, line 58

5.24 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>
Source: components/unstyled-list/unstyled-list.scss, line 4

5.25 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>
Source: components/visually-hidden/visually-hidden.scss, line 4

5.26 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>
Source: components/watermark/watermark.scss, line 4