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.
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.
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 blockquote. "Do. Or do not. There is no try.”
Select each element in turn, then in the Selector panel style each class (not HTML tag).
Select each element in turn, then in the Selector panel style each class (not HTML tag).
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.
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.
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.
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.
Downside of this method: you can't clean up your styles as some might not be used yet.
Set all variations as a combo class to the base class.
Example: Add Section-S as a combo class to Section.
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.
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.
Combo classes to set text colours.
Adjust the default font weight of elements.
Combo classes to add background colours.
Combo classes to add or remove margin or padding.
Has-Margin 0
Has-Margin 4
Has-Margin 8
Has-Margin 16
Has-Margin 24
Has-Margin 32
Has-Margin 48
Has-Margin 64
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
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
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
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
Has-Padding 0
Has-Padding 4
Has-Padding 8
Has-Padding 16
Has-Padding 24
Has-Padding 32
Has-Padding 48
Has-Padding 64
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
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
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
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
Has-Text Align Left
Has-Text Align Center
Has-Text Align Right
Has-Text Align Justify
Has-Text Align Left Tablet
Has-Text Align Center Tablet
Has-Text Align Right Tablet
Has-Text Align Justify Tablet
Has-Text Align Left Landscape
Has-Text Align Center Landscape
Has-Text Align Right Landscape
Has-Text Align Justify Landscape
Has-Text Align Left Portrait
Has-Text Align Center Portrait
Has-Text Align Right Portrait
Has-Text Align Justify Portrait