Elements are defined when an item adopts a combination of core styles in a basic form. It is the combination of elements that can be further utilised to create more complex components.
Buttons
Functional Patterns designed to entice interaction via a call to action or to serve as a function to submit an action.
Primary
Use a primary button for the main call to action, a single instance within a given interface. Having more than one main call to action reduces their impact, and makes it harder for users to know what to do next, however a primary beta button is a lesser impact option used for alternative choices of primary, for example: login or register or for multiple primary CTA instances of the same emphasis.
Secondary
Utilise the secondary button in a similar manner to primary, alpha version is not to be over-used with an optional outline version for multiple instances. These are to be used with creative discretion depending on the content, volume, and emphasis required.
Ghost
Designed as a third button option, use this for scenarios where there is an array of CTA’s such as Primary, Secondary and Ghost but less importance and emphasis is needed.
Utility
Available as versatile functions and utilities such as a ‘cancel’ option, they can also be used in larger quantity as an array for example: topics tags.
Action
Multiple variations of Icon Interaction elements have been created for designated functions, mainly for applications. Ensure these are applied consistently according to existing patterns, the icon shouldn’t be changed for the same existing function elsewhere.
Topics
Section Headings
headings and subheadings are an important usability and accessibility strategy to help readers both determine the overall outline of the document, and navigate to specific information on the page.
Section Heading
Utilise our section heading styles with decorative key lines to break down content, assist scanning and associate with new sections.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Section Heading Feature
When further spacing and emphasis is required for centred headings, particularly within feature components use this variation.
Lorem ipsum dolor sit amet
Strapline
Similar application to pull quotes but utilised mainly within promotional areas sucha as a final message. Use our strapline to promote short excerpts from the presented content.
Images
To ensure consistency of framing and proportion we have created fixed ratio’s for images, use them according to the emphasis and cropping required.
Letterbox
Ultra Widescreen
Widescreen
Standard 4 by 3
Standard 3 by 4
Widescreen Vertical 9:16
Pills
We use pills as a system identifier or tag to support content scanning. They can be used as identifiers for taxonomy or categorisation.
Flags
We use flags as an identifier to label items based on a user interaction. They can be used within components to display access levels or restriction access.