Base Styles & CSS
This is a reference page to see the application of available font and style classes. Reminder: fonts are applied by clicking on any text object, selecting the “style” tab, and clicking the globe icon beside “typography” for that element.
Design note: Blue is the primary action colors. For site-wide consistency, do not use blue-colored text unless it’s a link, otherwise it becomes less clear what is interactive vs not. Non-interactive text should be either text-black, dark-grey, OR a custom color that isn’t the primary, secondary or tertiary colors.
Headers
H1 Oversized: Header - Example multi lines
H1: Header
Example 2 lines
H2: Header
Example 2 lines
H3: Header
Example 2 lines
H4: Header
Example 2 lines
H5: Header
Example 2 lines
H6: Header
Example 2 lines
Paragraph Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Text & Paragraph
This is the default text size. Below are the incremental variants that can be applied beyond the default size.
Base XXL
Base XL
Base LG
Base MD
Base Font
Base SM
Base XS
Base XXS
Buttons
The default button widget will create the first button seen below. The three buttons below it can be created by:
a) adding a class of “button-primary”, “button-secondary” or “button-tertiary” respectively to the default button widget, or
b) using the global widgets “Button Primary”, “Button Secondary” or “Button Tertiary”
