Style Guide

A central place to set and manage consistent global styles.

Body · Typography · Colours · Buttons · Layout · Helpers

Body Styles

First set your base body font, font size, font line height and body text colour.

Click the Body element in the Navigator, then in the style Selector choose 'Body (All Pages)'.

Use this sample text as a guide. You may need to first add your chosen font in the Font panel of your project settings.

Default HTML

Select each element in turn, then in the Selector panel, choose to style the HTML tag (e.g. All H1 Headings).

Remember styles in the Body will trickle down to these elements, but you can override those styles if you wish.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

This is a paragraph. You'll likely leave this alone to inherit the Body tag styles. But you can override the paragraph styling by choosing the All Paragraphs HTML tag. This is a link. Style me please—including hover etc states. Nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

  • I am a bulleted list.
  • Check out my bullety listiness. It's brilliant.
  • My list is better than your list.
  1. Check one.
  2. Check two.
  3. Check three.
  4. Check yourself before you wreck yourself.
I am a blockquote. "Do. Or do not. There is no try.”

Additional Heading Typography

Select each element in turn, then in the Selector panel style each class (not HTML tag).

Heading 2XL
Heading XL
Looks like H1
Looks like H2
Looks like H3
Looks like H4
Looks like H5
Looks like H6
Heading S
Heading PREHEADER

Additional Body Text Typography

Select each element in turn, then in the Selector panel style each class (not HTML tag).

This is text size 2XL. Lorem ipsum dolor sit amet, consectetur adipiscing elit. This is some text inside a text block.
This is text size XL. Lorem ipsum dolor sit amet, consectetur adipiscing elit. This is some text inside a text block.
This is text size Large. Lorem ipsum dolor sit amet, consectetur adipiscing elit. This is some text inside a text block.
This is the same text size as Body copy. This is handy to apply to elements like headings etc that you want to look like body copy.
This is the text size Small. This is handy if you need text one step smaller than body copy. I find this useful for things like sidebar copy, or example.
This is text size XS. Slightly smaller than body copy. I find this size useful for sidebar copy, to provide a bit of contrast with the main body copy. This is some text inside a text block.

Rich Text Typography

Style content inside rich text blocks with a class of 'Rich Text'. Use this for articles.

Select each element, choose to style its HTML tag then click 'Nest selector inside...'

I typically add top margin to Headings 2 and below.

Rich Text Heading 1

Rich Text Heading 2

Here's a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Rich Text Heading 3

Rich Text Heading 4

Rich Text Heading 1

Rich Text Heading 2

Here's a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Rich Text Heading 3

  • evgsrhdrh

Rich Text Heading 4

btrhnbtrnbtrn
Block Quote

Colours

Set and edit sitewide colours here.

Click each swatch to select the nested 'Colour--Colour Name' element... edit the background colour style... edit (or create) the swatch in the colour panel. Click the pencil icon to edit an existing swatch.

Feel free to add more colours to suit yours needs (e.g. background colours, additional text colours).

See Helper Classes further down the page for applying these colours.

Body BG
Body Text
Light Text
Headings
Links
Link Hover
Link Visited
Links Dark BG
Primary 1
Primary 2
Primary 3
Button
Button Hover
Button Text
Button Text Hover
Alt Button
Alt Button Hover
Alt Button Text
Alt Button Text Hover
Nav Text
Nav Text Hover
Nav Text Current
Nav Text BG Hover
BG Color Body
BG Color Light
BG Color 1
BG Color 2
BG Color 3
Borders
White
Neutral 1
Neutral 2
Neutral 3
Neutral 4

Buttons

Set and edit button styles here. Note the use of combo classes.

Badges & Pills

Useful for meta data or smaller heading style.

'Primary' is the base class. Adjust the styling on that first. Then edit the colours of the alt versions if needed.

Badge Default
Badge ALT 1
Badge ALT 2
Pill Primary
Pill ALT 1
Pill ALT 2

Aspect ratio images

Copy and paste 'Image Ratio Wrap'. The padding top % sets the aspect ratio.

Example 16:9
9/16*100 = 56.25%

(If wrapping Image Ratio Wrap in a Link Block, make sure the Link Block is set to Display: Block)

16:9 (default)
3:2
4:3
8:5
1:1
2:1
2:1

Layout Classes

Non-editable reference for various layout styles.

To edit any style: add an empty div to any page, name it the class you want to edit, make your edit, then delete the placeholder div.

Important: don't 'clean up' unused styles in the style manager!

Sections & Containers

Set all variations as a combo class to the base class. They don't exist as independent base classes to use anywhere.

Example: Add Section-S as a combo class to Section.

Page Wrapper

Page Wrapper
Wraps the entire page. Sets overflow: hidden to stop horizontal wiggle on mobile, and allows you to copy/paste an entire page.

Sections

Section
Base class. Default section with 5rem (80px) top/bottom padding.
Section-XS
Section with 2.5 rem (40px) top/bottom padding.
Section-S
Section with 3.75 rem (60px) top/bottom padding.
Section-L
Section with 7.5 rem (120px) top/bottom padding.
Section-XL
Section with 10 rem (160px) top/bottom padding.

Containers

Container
Base class. Default content container (80 rem - 1280px). Sets left/right padding and centers the content to a max-width
Container-480
Container with 30rem (480px) max-width.
Container-640
Container with 40rem (640px) max-width.
Container-768
Container with 48rem (768px) max-width.
Container-1024
Container with 64rem (1024px) max-width.
Container-1120
Container with 70rem (1120px) max-width.
Container-1440
Container with 90rem (1440px) max-width.
Container-Full
Container with 100% width.

Grids

All grids have default column and row gaps of 2.5rem (40px) on Desktop, 2rem (32px) on Tablet.

Need to alter responsive column stacking, column/row gaps or alignments? Add your own combo class and set the precise adjustments you require.

1 Col

Each container should contain at least a 1 column grid.

Grid 1 Col
1 Col 100%.

2 Cols

Collapses to 1 column on Landscape.

Grid 2 Cols
2 Cols 50% + 50%.
Grid 2 Cols 33/66
2 Cols 33% + 66%.
Grid 2 Cols 66/33
2 Cols 66% + 33%.
Grid 2 Cols 25/75
2 Cols 25% + 75%.
Grid 2 Cols 75/25
2 Cols 75% + 25%.

3 Cols

Collapses to 1 column on Landscape

Grid 3 Cols
3 Cols 33% + 33% + 33%.

4 Cols

Collapses to 2 column on Tablet, 1 column on Landscape.

Grid 4 Cols
4 Cols 25% + 25% + 25% + 25%

Column Styles

Styles for individual columns.

White background

Col White 24
White BG with 24px padding (desktop)
Col White 40
White BG with 40px padding (desktop)

Helper Classes

Non-editable reference for various utility and helper styles.

To edit any style: add an empty div to any page, name it the class you want to edit, make your edit, then delete the placeholder div.

Downside of this method: you can't clean up your styles as some might not be used yet.

Text colours

Combo classes to set text colours.

Is-Text Color White
Text color of 'white' in the palette.
Is-Text Color Body
Text color of 'Body Text' in the palette.
Is-Text Color Primary 1
Text color of Primary 1.
Is-Text Color Primary 2
Text color of Primary 2.
Is-Text Color Primary 3
Text color of Primary 3.

Font weight

Adjust the default font weight of elements.

Has-Font Weight Normal
Sets font weight normal (usually 400).
Has-Font Weight Bold
Sets font weight bold (usually 700).

Background colours

Combo classes to add background colours.

Has-BG Color 1
Background colour 1 from the palette
Has-BG Color 2
Background colour 2 from the palette.
Has-BG Color 3
Background colour 3 from the palette.
Has-BG Light
Light background colour from the palette.
Has-BG Color Body
Set to the same as the body background colour in the palette.

Spacing

Combo classes to add or remove margin or padding.

Margin

Margin all sides

Has-Margin 0
Has-Margin 4
Has-Margin 8
Has-Margin 16
Has-Margin 24
Has-Margin 32
Has-Margin 48
Has-Margin 64

Margin top only

Has-Margin Top 0
Has-Margin Top 4
Has-Margin Top 8
Has-Margin Top 16
Has-Margin Top 24
Has-Margin Top 32
Has-Margin Top 48
Has-Margin Top 64

Margin bottom only

Has-Margin Bottom 0
Has-Margin Bottom 4
Has-Margin Bottom 8
Has-Margin Bottom 16
Has-Margin Bottom 24
Has-Margin Bottom 32
Has-Margin Bottom 48
Has-Margin Bottom 64

Margin left and right (X axis)

Has-Margin X Auto (centers like a container)
Has-Margin X 0
Has-Margin X 4
Has-Margin X 8
Has-Margin X 16
Has-Margin X 24
Has-Margin X 32
Has-Margin X 48
Has-Margin X 64

Margin top and bottom (Y axis)

Has-Margin Y 0
Has-Margin Y 4
Has-Margin Y 8
Has-Margin Y 16
Has-Margin Y 24
Has-Margin Y 32
Has-Margin Y 48
Has-Margin Y 64

Padding

Padding all sides

Has-Padding 0
Has-Padding 4
Has-Padding 8
Has-Padding 16
Has-Padding 24
Has-Padding 32
Has-Padding 48
Has-Padding 64

Padding top only

Has-Padding Top 0
Has-Padding Top 4
Has-Padding Top 8
Has-Padding Top 16
Has-Padding Top 24
Has-Padding Top 32
Has-Padding Top 48
Has-Padding Top 64

Padding bottom only

Has-Padding Bottom 0
Has-Padding Bottom 4
Has-Padding Bottom 8
Has-Padding Bottom 16
Has-Padding Bottom 24
Has-Padding Bottom 32
Has-Padding Bottom 48
Has-Padding Bottom 64

Padding left and right (X axis)

Has-Padding X 0
Has-Padding X 4
Has-Padding X 8
Has-Padding X 16
Has-Padding X 24
Has-Padding X 32
Has-Padding X 48
Has-Padding X 64

Padding top and bottom (Y axis)

Has-Padding Y 0
Has-Padding Y 4
Has-Padding Y 8
Has-Padding Y 16
Has-Padding Y 24
Has-Padding Y 32
Has-Padding Y 48
Has-Padding Y 64

Max width

Has-Max Width 480
Max width 30rem (480px)
Has-Max Width 640
Max width 40rem (640px)
Has-Max Width 768
Max width 48rem (768px)

Text alignment

Applies to Desktop and below

Has-Text Align Left
Has-Text Align Center
Has-Text Align Right
Has-Text Align Justify

Applies to Tablet and below

Has-Text Align Left Tablet
Has-Text Align Center Tablet
Has-Text Align Right Tablet
Has-Text Align Justify Tablet

Applies to Landscape and below

Has-Text Align Left Landscape
Has-Text Align Center Landscape
Has-Text Align Right Landscape
Has-Text Align Justify Landscape

Applies to Portrait only

Has-Text Align Left Portrait
Has-Text Align Center Portrait
Has-Text Align Right Portrait
Has-Text Align Justify Portrait

Layout alignment

Centered content

Is-Flex Center XY
Apply to parent div to vertically centre its contents (like in a hero header). Centres align and justify (X and Y axis).
Is-Flex Center X
Apply to parent div to vertically centre its contents (like in a hero header). Centres align (X axis) only.
Is-Flex Center Y
Apply to parent div to for left-aligned content, centered vertically on the Y axis.

Left/right aligned

Is-Flex Horiz Space Between
Apply to parent div to distribute child elements evenly horizontally.

Display and Positioning

Display

Display Block
Sets display: block
Display Inline
Sets display: inline
Display Inline Block
Sets display: inline-block

Hidden

Display Hidden
Sets display: none for all responsive views.
Display Hidden Tablet
Sets display: none on Tablet and below.
Display Hidden Landscape
Sets display: none on Landscape and below.
Display Hidden Portrait
Sets display: none on Portrait.

Positioning

Position Relative
Applies Position: Relative.
Position Absolute
Applies Position: Absolute

Miscellaneous

Rounded

Has-Rounded 8
Applies 8px rounded corners.
Is-Circle
Apply to square images to make them circular.

Boxes

Is-Boxed
Apply to div to apply light rounded border with internal padding.