A collection of utility classes to aid in development, and help keep custom widgets and development consistent with global tokens
.text-deep-red
.bg-deep-red
.border-deep-red
.text-pale-pink
.bg-pale-pink
.border-pale-pink
.text-navy
.bg-navy
.border-navy
.text-chalk
.bg-chalk
.border-chalk
.text-white
.bg-white
.border-white
Large containers used to seperate major sections of a webpage. Used in multiple top level components, including banners, media sections and text-sections.
Gap: 50px
Blocks sit within regions and wrap content. They can be seen represented as columns, cards, sidebars, quotes and groupings. The inner layout of a region is made up of an arrangement of blocks.
Gap: 25px
Inline content that sits within a block, including text, lists, buttons and links, and icons. Spacing between paragraphs, not line-height.
Gap: 25px
A block used to arrange other blocks in a grid-based layout. Used in components such as icon grids and loop grids.
Gap: 20px
padding-x padding-top-md padding-bottom-md
When stacking components with the same background colour, remove one of the padding classes to avoid doubling up on spacing.
Example:
Container 1 [ padding-x padding-top-md ]
Container 2 [ padding-x padding-top-md padding-bottom-md ]
padding-top: 120px;
padding-bottom: 120px;
padding-left: 70px;
padding-right: 70px;
padding-top: 100px;
padding-bottom: 100px;
padding-left: 50px;
padding-right: 50px;
padding-top: 70px;
padding-bottom: 70px;
padding-left: 25px;
padding-right: 25px;
These containers are used for major sections that divide up a page, and are also used as the top-level wrapper for the majority of components, including: Banners, Media Sections, Text Sections, etc.
Adding the above classes will translate into the following values.
padding-x-sm padding-top-sm padding-bottom-sm
When stacking components with the same background colour, remove one of the padding classes to avoid doubling up on spacing.
Example:
Container 1 [ padding-x-sm padding-top-sm ]
Container 2 [ padding-x-sm padding-top-sm padding-bottom-sm ]
padding-top: 80px;
padding-bottom: 80px;
padding-left: 50px;
padding-right: 50px;
padding-top: 80px;
padding-bottom: 80px;
padding-left: 50px;
padding-right: 50px;
padding-top: 60px;
padding-bottom: 60px;
padding-left: 25px;
padding-right: 25px;
These containers are used to provide variety in page layout by seperating large containers, and are also used as the top-level wrappers for the following components: Footer Callout, Page Meta, Quote, Section Title.
Adding the above classes will translate into the following values.
Some basic guidelines to help with consistency