Documentation / components
Components
Components are grouped by Atomic Design: atoms, molecules, organisms and templates. Each page shows a component in its modes, with code, the rules it follows and its accessibility notes. Colours, type and spacing are the foundations underneath, and the example screens at the end are the pages.
01
Atoms
The smallest parts. They cannot be broken down further and are used inside everything else.
02
Molecules
Small groups of atoms that work as one unit.
Form fields
A control with its label, hint and error, and grouped radios.
Links, tabs and breadcrumbs
The small pieces of navigation.
Date picker
A date field in the format DD/MM/YYYY, with a calendar that starts on Monday.
Notifications
Panels and toasts for info, success, warning and error messages.
Form progress and actions
Numbered steps and the buttons for a multi-step form.
03
Organisms
Larger sections built from molecules and atoms.
04
Templates
Page layouts without real content. They show where the organisms go.
05
Pages
Pages are templates filled with real content. They show how the components hold up with realistic content.