List of supported UI elements

Grid system

You can create, two, three and four column grids by adding the appropriate class to a container element:

• .grid-2-columns
• .grid-3-columns
• .grid-4-columns

If you want an element inside a grid to span two columns rather than one (eg. for a main content area and sidebar), give it the class .main-content.

Button

Add the class of button to a link or button element.

<a href="#" class="button">
    Start now
</a>

Also add the modifier class button--start for a button that stands out more, intended to be the primary call to action on a page:

<a href="#" class="button button--start">
    Start now
</a>

Page context

A small subtitle for above the main page title

<p class="page-context">Welcome</p>

Page title

Give the first heading on a page extra emphasis

<h1 class="page-title">Running a branch</h1>

Pagination

Previous and next buttons, plus page numbers.

<section class="pagination">
    <a class="pagination__previous" href="#" >Previous page</a>
    <ul class="pagination__numbers">
        <li><span  href="#" class="pagination__number pagination__number--current">1</span></li>
        <li><a  href="#" class="pagination__number">2</a></li>
        <li><a  href="#" class="pagination__number">3</a></li>
        <li><a  href="#" class="pagination__number">4</a></li>
        ...
    </ul>
    <a class="pagination__next" href="#" >Next page</a>
</section>

Card

A clickable card with an image, headline and description.

<div class="card">
    <img class="card__image" src="http://placehold.it/300x200"/>
    <a class="card__link" href="#">
        <h3 class="card__title">Page title</h3>
        <p class="card__description">All about service on that page</p>
    </a>
</div>

Download

A call to action for a downloadable file.

<div class="download">
    <a class="download__link" href="#">Full list of Samaritans branches</a>
    <p class="download__details">182kb - PDF</p>
</div>

Accordion

Native HTML5 accordion with collapsible sections.

<div class="accordion">
    <details class="accordion__item">
        <summary class="accordion__summary"><h4 class="accordion__title">Lacking energy or feeling tired</h4></summary>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et risus mauris.</p> 
    </details>
    <details class="accordion__item">
        <summary class="accordion__summary"><h4 class="accordion__title">Feeling restless or agitated</h4></summary>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et risus mauris.</p>
    </details>
</div>

Panel

Emphasise content on a page by putting it in a panel.

<div class="panel">
    <h2>Panel title</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et risus mauris.</p>
</div>

Breadcrumbs

Help users navigate by showing their position in the site hierarchy.

<ul class="breadcrumbs">
    <li class="breadcrumbs__list-item"><a href="/" class="breadcrumbs__link"><i class="fas fa-home"></i></a></li>
    <li class="breadcrumbs__list-item"><a href="#" class="breadcrumbs__link">Support and information</a></li>
    <li class="breadcrumbs__list-item">If you're having a difficult time</li>
</ul>

Inset text

Emphasise important text by insetting it

<blockquote class="inset">
    <p>You have chosen to volunteer in Birmingham, but you can choose where and when you do your training.</p>
</blockquote>

Useful page widget

Collect quick feedback from users.

<section class="useful-page">
    <p class="useful-page__message">Was this page useful?</p>
    <form class="useful-page__buttons">
        <button class="useful-page__button" type="submit">Yes</button>
        <button class="useful-page__button" type="submit">No</button>
    </form>
</section>

Lede

Add the class .lede to a parapgraph element to make it larger. Ideal for an introductory paragraph.