Chat with us, powered by LiveChat

Domain AcademyStyle Guide

Version: 1.0
Date: 16/05/23

Headings

The font for headlines is Poppins.

Class
Size
Line height
Sample
h1
48px / 3rem
56px / 3.5rem

Heading 1

h2
40px / 2.5rem
48px / 3rem

Heading 2

h3
32px / 2rem
40px / 2.5rem

Heading 3

h4
24px / 1.5rem
32px / 2rem

Heading 4

h5
20px / 1.25rem
24px / 1.5rem
Heading 5
h6
18px / 1.125rem
24px / 1.5rem
Heading 6
Heading 6

Body Copy

The font for headlines is Poppins.

Class
Size
Line height
Sample
text-lg
18px / 1.125rem
32px / 2rem
Large Paragraph
text-base
16px / 1rem
24px / 1.5rem
Default Paragraph
text-sm
14px / 0.875rem
21px / 1.3125rem
Small Paragraph
text-xs
12px / 0.75rem
20px / 1.25rem
Extra Small Paragraph

Type Modifiers

Class
What it does
font-bold
Makes the text bold
font-semibold
Makes the text semi-bold
font-medium
Makes the text medium
text-uppercase
Capitalizes all letters
text-italics
Italises all letters
text-underline
Makes the text underlined
text-link
text-left
Aligns the text to the left
text-center
Aligns the text to the center
text-right
Aligns the text to the right

Rich Text Area

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Heading 1

Heading 2

‍

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph dndkscns

  • Unordered List Item
  1. Ordered List Item
This is a Block Quote

This is more text

Colors

HEX
BG Class
Text Class
#1F1F1F
bg-orange
text-darkgrey
HEX
BG Class
Text Class
#adabb0
bg-lightgrey
text-lightgrey
BG Class
Text Class
HEX
#e6e6e6
bg-brightgrey
text-brightgrey
HEX
BG Class
Text Class
#e6e6e6
bg-white
text-brightgrey
HEX
BG Class
Text Class
#F2F2F2
bg-basegrey
text-basegrey
HEX
BG Class
Text Class
#64358c
bg-domainred
text-domainred

Buttons

Class
Sample
btn-primary
btn-secondary
btn-tertiary
splide_pagination

Form

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Containers

Container Full Width
12 Columns with a max-width of 1280px and 80px padding left and right
10 Columns with a max-width of 1064px and 188px padding left and right
8 Columns with a max-width of 848px and 296px padding left and right

Grids

grid--6--6
grid--8--4
grid--4--8
grid--4--4--4
grid--3--3--3--3
grid--2--2--2--2

Actual classes (margins)

is-margin-t-4
is-margin-b-4
is-margin-tb-4
is-margin-t-8
is-margin-b-8
is-margin-tb-8
is-margin-t-16
is-margin-b-16
is-margin-tb-16
is-margin-t-24
is-margin-b-24
is-margin-tb-24
is-margin-t-32
is-margin-b-32
is-margin-tb-32
is-margin-t-40
is-margin-b-40
is-margin-tb-40
is-margin-t-48
is-margin-b-48
is-margin-tb-48
is-margin-t-56
is-margin-b-56
is-margin-tb-56
is-margin-t-64
is-margin-b-64
is-margin-tb-64
is-margin-t-72
is-margin-b-72
is-margin-tb-72
is-margin-t-80
is-margin-b-80
is-margin-tb-80
is-margin-t-88
is-margin-b-88
is-margin-tb-88
is-margin-t-96
is-margin-b-96
is-margin-tb-96
is-margin-t-104
is-margin-b-104
is-margin-tb-104
is-margin-t-112
is-margin-b-112
is-margin-tb-112
is-margin-t-120
is-margin-b-120
is-margin-tb-120
is-margin-t-128
is-margin-b-128
is-margin-tb-128
is-margin-t-136
is-margin-b-136
is-margin-tb-136
is-margin-t-144
is-margin-b-144
is-margin-tb-144
is-margin-t-152
is-margin-b-152
is-margin-tb-152
is-margin-t-160
is-margin-b-160
is-margin-tb-160
is-margin-t-168
is-margin-b-168
is-margin-tb-168
is-margin-t-176
is-margin-b-176
is-margin-tb-176
is-margin-t-184
is-margin-b-184
is-margin-tb-184
is-margin-t-192
is-margin-b-192
is-margin-tb-192
is-margin-t-200
is-margin-b-200
is-margin-tb-200
is-margin-t-208
is-margin-b-208
is-margin-tb-208
is-margin-t-216
is-margin-b-216
is-margin-tb-216
is-margin-t-224
is-margin-b-224
is-margin-tb-224
is-margin-t-232
is-margin-b-232
is-margin-tb-232
is-margin-t-240
is-margin-b-240
is-margin-tb-240
is-margin-t-248
is-margin-b-248
is-margin-tb-248
is-margin-t-256
is-margin-b-256
is-margin-tb-256

Actual classes (paddings)

is-pad-t-4
is-pad-b-4
is-pad-tb-4
is-pad-t-8
is-pad-b-8
is-pad-tb-8
is-pad-t-16
is-pad-b-16
is-pad-tb-16
is-pad-t-24
is-pad-b-24
is-pad-tb-24
is-pad-t-32
is-pad-b-32
is-pad-tb-32
is-pad-t-40
is-pad-b-40
is-pad-tb-40
is-pad-t-48
is-pad-b-48
is-pad-tb-48
is-pad-t-56
is-pad-b-56
is-pad-tb-56
is-pad-t-64
is-pad-b-64
is-pad-tb-64
is-pad-t-72
is-pad-b-72
is-pad-tb-72
is-pad-t-80
is-pad-b-80
is-pad-tb-80
is-pad-t-88
is-pad-b-88
is-pad-tb-88
is-pad-t-96
is-pad-b-96
is-pad-tb-96
is-pad-t-104
is-pad-b-104
is-pad-tb-104
is-pad-t-112
is-pad-b-112
is-pad-tb-112
is-pad-t-120
is-pad-b-120
is-pad-tb-120
is-pad-t-128
is-pad-b-128
is-pad-tb-128
is-pad-tb-128
is-pad-t-136
is-pad-b-136
is-pad-tb-136
is-pad-t-144
is-pad-b-144
is-pad-tb-144
is-pad-t-152
is-pad-b-152
is-pad-tb-152
is-pad-t-160
is-pad-b-160
is-pad-tb-160
is-pad-t-168
is-pad-b-168
is-pad-tb-168
is-pad-t-176
is-pad-b-176
is-pad-tb-176
is-pad-t-184
is-pad-b-184
is-pad-tb-184
is-pad-t-192
is-pad-b-192
is-pad-tb-192
is-pad-t-200
is-pad-b-200
is-pad-tb-200
is-pad-t-208
is-pad-b-208
is-pad-tb-208
is-pad-t-216
is-pad-b-216
is-pad-tb-216
is-pad-t-224
is-pad-b-224
is-pad-tb-224
is-pad-t-232
is-pad-b-232
is-pad-tb-232
is-pad-t-240
is-pad-b-240
is-pad-tb-240
is-pad-t-248
is-pad-b-248
is-pad-tb-248
is-pad-t-256
is-pad-b-256
is-pad-tb-256