Style Guide
This style guide page contains styles and components used through the website. You can change any style from this page and it will be updated throughout the site.
Typography
The different text sizes used throughout the site.
H4 -30px-Semi Bold
H5 -25px-Semi Bold
P1 -22px-Semi Bold
P2 -20px-Semi Bold
P3 -18px-Semi Bold
P4 -16px-Semi Bold
Btn -16px-Semi Bold
H4 -30px-Regular
H5 -25px-Regular
P1 -22px-Regular
P2 -20px-Regular
P3 -18px-Regular
P4 -16px-Regular
Btn -16px-Regular
H4 -30px-Medium
H5 -25px-Medium
P1 -22px-Medium
P2 -20px-Medium
P3 -18px-Medium
P4 -16px-Medium
Btn -16px-Medium
LIST
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
LINK
Read more
FIGURE WITH CAPTION
An Image with caption
Rich Text
This is a Header
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!
Latest Updates
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
LINK
Read more
FIGURE WITH CAPTION
An Image with caption
Colors
The different weights of greys and colours used throughout the website.
Buttons
The different buttons used across the site.
PRIMARY
DARK GREY
LIGHT GREY
Cancel
SMALL PRIMARY
Sign Up
Cancel
LIGHT GREY
Columns
The 12 column grid system to make it easy to align sections across different screen sizes.
1 COL
2 COL
3 COL
4 COL
5 COL
6 COL
7 COL
8 COL
9 COL
10 COL
Grids
Different grid layouts to use across your site.
4 GRID
3 GRID
2 GRID
2-1 GRID
1-2 GRID
Spacers
Spacer elements using the 8-pt grid to give sections more room to breathe.
16 PX
24 PX
32 PX
64 PX
128 PX
Forms
The form elements that you can use for forms across the website.
Name
Enter your Name
Category
Select one
Message
Enter Message here
I’m a radio button
I’m a check box
Submit
Tabs
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
All Posts
Popular Posts
Rising Posts
UNITYROSTER. Build in