Skip to main content
Last updated: 07 November 2014
Menu
ONS
Components
Buttons
Primary
Primary, with icon
Sizes
Primary, block
Secondary
Secondary, active
Button bar
Global
Footer
Header with breadcrumb
Header
Hero banner
Hero banner with extra large stat
Page header
Charts
Chart Controls
Horizontal Bar Chart
Multi Series Chart
Population Pyramid
Stacked Bar Chart
Line Chart
Data Tables
Data Table with Toggle
Data Table with Mode Switcher
Data Table with Swipe Control
Bare Data Table
Responsive table
Misc
Tooltips
Patterns
Boxes
Standard box
Padded box
Sectioned box
Lifted box
Combinations
Vertically sectioned box
Box with border
Orange box
Orange box with large left border
Orange-coloured box with icon
Negative offset
Dark lifted box
Navs
Nav
Nav inline-block
Nav, block
Nav, block spaced
Nav dark
Nav heavy
Simple breadcrumb nav
Breadcrumb
General
Actionable header
Actionable header, tight
Content reveal class
Stacked date microcomponent
Divider
Lozenges
Table of Contents
Standard tabbed UI
Stats
Hero stat headline
Basic
Basic, with unit
Basic, with unit and description
Small
Headline stat
XL Headline stat
Panels
Nav panel with stats
Nav panel without stats
Panel
Panel, separated
Panel, with padding
Panel, with margin
Lists
Standard unordered list
Standard ordered list
Neutral list
Stacking definition list
Inline definition list
Inline, split definition list
Slates
Light grey slate
Off-white slate
Mid grey slate
Grey slate
Media
Content image
Media object
Media object with reverse image
Type
Complex link
Visual Language
Forms
Text input
Text input with supporting text
Input with error
Input with button
Textarea
Checkboxes
Selectbox
Grid
Desktop grid
Tablet (and up) grid
Mobile (and up) grid
Mixed Mobile/Tablet/Desktop grid
Push pull grid
Nested grid
Type
Headings
Paragraph
Links
Colors
Primary
Global
Accent
Graphical elements
Icons
Templates
Templates
Homepage Template (T1)
Product Page (T3)
Stat Bulletin Page (T4-1)
Expert Analysis Page (T4-2)
Time Series Page (T5)
Examples
Desktop Grid
Basic starter
Templates
Examples
Desktop Grid
View
Desktop Grid
Usage notes
An example showing how a basic grid is used to layout content.