Class systems
The Wave project classes are designed to be clear & descriptive in nature to ensure the designer can understand the purpose of the class without having to read lengthy documentation. There are two types of classes: Global classes and Custom classes.
Global classes
These classes generally cover structure, typography, spacing , other styles, and utility classes are covered extensively in this style guide.
- Structure: These classes are used to create the base of the pages in the project.
- Typography: A global system of classes for headings, text-styles, color, and typography customisations.
- Spacing: Classes covering both margins and padding, these classes allow you to set top, bottom, left, and right spacing across the site.
- Other Styles: the core color and button classes.
- Utility Classes: a sample of the main utility classes available.
Custom Classes
Whilst global classes give you a consistent base, custom classes deliver the unique Wave design across both pages and page components. These are not covered in the style guide.
heading-style-1
heading-style-2
heading-style-3
heading-style-4
heading-style-5
text-style-intro
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
text-style-body
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
text-style-body-small
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
text-size-eyebrow
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
text-size-eyebrow-small
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
text-style-strikethrough
text-style-italic
text-style-quote
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
text-style-2lines
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
text-style-3lines
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.dolor sit amet,
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
- The rich text element allows you to create and format headings,
- The rich text element allows you to create and format headings,
- The rich text element allows you to create and format headings,
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
margin: 0;
margin: 0.125rem;
margin: 0.25rem;
margin: 0.5rem;
margin: 1rem;
margin: 2rem;
margin: 3rem;
margin: 4rem;
margin: 5rem;
margin: 6rem;
margin: 8rem;
margin: 12rem;
width: 100%
tablet > width: 100%
mobile-landscape > width: 100%
mobile-portrait > width: 100%