• Action banner

    Banner for highlighting, and giving context to, a call-to-action

  • Breadcrumbs

    A breadcrumb trail is a secondary navigation, that displays as a series of links, situated below the header.

  • Callout


  • Card

    A flexible component for displaying an item like news or guidance within a list

  • Full Bleed

    Full viewport width component to accommodate background images for impact

  • Hero

    Introduce a site or sub-site with impact

  • Horizontal navigation

    A navigation menu to navigate to different high level pages or sections

  • In-page navigation

    Allows users to navigate to specific sections, within long pages of content, across any screen size.

  • Maintain ratio

    Embed media and maintain an aspect ratio across devices

  • Page header

    Main heading and intro copy to introduce a page

  • Panel

    Blocks to highlight or separate content

  • Phase banner

    Alpha and beta beta banners clearly identify non-live services

  • Previous and Next

    A way for users to navigate to previous or next pages in a sequence of content.

  • Stacked navigation

    Navigation to support sub-pages within a section

  • Tabs

    Content is separated into different panes, with only one pane viewable at a time.

  • Tag

    Tag component used for labelling items in a list