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

### 5.1.1 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"><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

### 5.1.2 components.box.box--icon-with-border

#### 5.1.2.1 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"><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.2 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.3 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.4 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.

- delete
- edit
- reply

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__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.5 Date

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

Example
Date of publication: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.6 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

## 5.7 Footer Bottom

The footer bottom region of page

Example

    <footer role="contentinfo">
      <div class="footer-bottom">
        <div class="wrapper clearfix">
          <div class="footer-bottom__left">
            <p>© Copyright 2015 aGov.</p>
          </div>
          <div class="footer-bottom__right">
            <p><a class="footer-bottom__link" href="#skip-link">Back to top</a></p>
          </div>
        </div>
      </div>
    </footer>

Source: `components/footer-bottom/footer-bottom.scss`, line 4

## 5.8 Footer Top

The footer top region of page

Example

    <footer role="contentinfo">
    <div class="footer-top ">
      <div class="wrapper">
        <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>
    </footer>

Source: `components/footer-top/footer-top.scss`, line 6

## 5.9 Forms

Source: `components/__kss-categories.scss`, line 5

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

Source: `components/form-item/form-item.scss`, line 4

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

Source: `components/form-item/form-item.scss`, line 50

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

Source: `components/resizable-textarea/resizable-textarea.scss`, line 4

## 5.10 Header

The header of page.

Example

# aGov

    <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.11 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.12 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>

Source: `components/inline-links/inline-links.scss`, line 4

## 5.13 Messages

System alerts.

Source: `components/messages/messages.scss`, line 4

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

Source: `components/messages/messages.scss`, line 10

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

Source: `components/messages/messages.scss`, line 21

### 5.13.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.14 Toggle nav

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

Examples
Default styling
Menu
.active
The active state of the nav toggle
Menu

    <a href="#" class="nav-toggle">Menu</a>

Source: `components/nav-toggle/nav-toggle.scss`, line 1

## 5.15 Navigation

Source: `components/__kss-categories.scss`, line 9

### 5.15.1 Breadcrumb navigation

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

@see http://guides.service.gov.au/design-guide/patterns/navigation/index.html#breadcrumbs

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.15.2 More link

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

Example

See more

    <p class="more-link">
      <a href="#">See more</a>
    </p>

Source: `components/more-link/more-link.scss`, line 4

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

Example

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

Source: `components/skip-link/skip-link.scss`, line 4

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

Example

    <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

#### 5.15.6.1 Tabs (secondary)

Example

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

Source: `components/print-none/print-none.scss`, line 4

## 5.17 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.18 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.19 Search

A simple search styling.

Example

## Search form

Search

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

Source: `components/search/search.scss`, line 4

## 5.20 Social

The social of page

Example

## Stay up to date

Twitter
Facebook
Contact us

    <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.21 Tags

Emulates tags from the UI-Kit.

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>

Source: `components/tags/tags.scss`, line 4

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

### 5.22.1 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/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.23 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.24 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.25 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