Once you’ve mastered the foundations, these components are further patterns for building user interfaces
Action banner
Banner for highlighting, and giving context to, a call-to-action
Alpha & Beta
Alpha and beta beta banners clearly identify non-live services
Breadcrumbs
A breadcrumb trail is a secondary navigation, that displays as a series of links, situated below the header.
Card
A flexible component for displaying an item like news or guidance within a list
Hero
Introduce a site or sub-site with impact
In page nav
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
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