Heading sizing should be configured logically and flow smoothly. To achieve this, the HTML font size should be set to 100%, and the text on the website should go from 1rem (for body text) to 2rem (for H1).

These are the suggested settings for the Bricks ‘Typography’ section in the global theme:

HTML font-size: 100%
H1: 2rem
H2: 1.8rem
H3: 1.6rem
H4: 1.4rem
H5: 1.2rem
H6: 1.1rem
Body: 1rem

The ‘Hero’ and ‘Lead’ text types can be used for various things depending on the type of website, but overall it’s best to only change the text styles, not the colour. For example, ‘Hero’ could be set to:

text-transform: uppercase
font-weight: 700

And ‘Lead’ could be set to:

font-weight: 700

Using this setup, you can have bold text or bold and uppercase text easily, without needing to edit the individual element’s typography.

The ‘Style’ options are set under the ‘Colours’ tab in the theme settings, and this is where the default text colours should be set.

Below is a set of premade elements that show all the text and button combinations with the first four colour styles. This is handy to make sure that all the colours and sizes have been configured correctly.

Headings - Default Type

Primary

Secondary

Light

Dark

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraph

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraph

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraph

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraph

Headings - Hero Type

Primary

Secondary

Light

Dark

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraph

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraph

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraph

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraph

Headings - Lead Type

Primary

Secondary

Light

Dark

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraph

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraph

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraph

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraph

Buttons - Default Type

Primary

Secondary

Light

Dark

Extra Large ButtonLarge ButtonMedium ButtonSmall Button

Buttons - Circle & Outline Type

Primary

Secondary

Light

Dark

Extra Large ButtonLarge ButtonMedium ButtonSmall Button

Buttons - Circle Type

Primary

Secondary

Light

Dark

Extra Large ButtonLarge ButtonMedium ButtonSmall Button

Buttons - Outline Type

Primary

Secondary

Light

Dark

Extra Large ButtonLarge ButtonMedium ButtonSmall Button

Similar to text and button styling, the layout of ‘Section’, ‘Container’ and ‘Block’ elements is important to standardise, or else content may end up with strange formatting when individual sections are modified. These settings are going to change based on the type of website, but using these settings is a good starting point.

Section:
Padding: 40px to top and bottom
Column gap: 20
Row gap: 20

Container:
Width: 90%
Column gap: 20
Row gap: 20

Block:
Column gap: 10
Row gap: 10

Below is a premade layout showing how a collection of Sections, Containers and Blocks looks in the current theme. Various elements such as headings, rich text boxes, buttons and icons have been added to show spacing within blocks.

Red: Section
Green: Container
Blue: Block/Column
White: Text/Button
Black: Divider (between sections)

Elements have only been added to blocks, not directly into sections/containers.

Heading 1. Lorem ipsum dolor sit amet

Heading 3. Lorem ipsum dolor sit amet

Paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras faucibus diam in ipsum tristique malesuada. Ut feugiat ex eget arcu ullamcorper, varius tempor erat placerat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse sit amet rutrum ante. Aliquam venenatis magna ac massa consectetur porta. Aliquam erat volutpat. Proin volutpat, ante sit amet suscipit varius, leo tortor malesuada ex, a egestas lectus quam ac eros. Mauris rutrum vitae leo a blandit. Nullam odio nunc, fermentum ac blandit non, dignissim ac metus.

Suspendisse eu sem turpis. Morbi malesuada tincidunt lectus ut posuere. Sed lectus felis, tempus nec nulla ac, auctor auctor nisi. Phasellus id faucibus urna. Donec id dui sagittis, placerat velit vel, tincidunt nunc. Pellentesque lobortis et purus sed efficitur. Mauris ac magna a enim aliquam maximus.

BUTTON