Buttons

Standard button

The standard button is used for general calls to action across the site

Standard button

<a class="button" href="buttons.html">Standard button</a>

Button text needs to be short and concise and linked to an action ("Apply for a service"). If possible, only one button per page should be used.

Pagination buttons

Pagination buttons are used to guide the user through a series of steps set out in pages. They are placed at the foot of the page at either side of the content area. Text should be retained as 'previous page' and 'next page' to ensure consistency.

<ul class="nav nav--pagination">
<li class="nav--pagination__first">
<a href="previous_page.html" class="button--warning">Previous page</a>
</li>
<li class="nav--pagination__last">
<a href="next_page.html" class="button button--primary">Next page</a>
</li>
</ul>