Style guide
Contents
Typography
Heading classes
heading-style-h1
This is a sample text to help you understand how real text may look.
heading-style-h2
This is a sample text to help you understand how real text may look.
heading-style-h2
font-pixel
This is a sample text to help you understand how real text may look.
heading-style-h2
heading-small-small
This is a sample text to help you understand how real text may look.
heading-style-h3
This is a sample text to help you understand how real text may look.
heading-style-h4
This is a sample text to help you understand how real text may look.
Text classes
Text sizes
text-size-big
Sample text is being used as a placeholder for real text that is normally present.
text-size-regular
Sample text is being used as a placeholder for real text that is normally present.
text-size-small
Sample text is being used as a placeholder for real text that is normally present.
text-size-tiny
Sample text is being used as a placeholder for real text that is normally present.
Text weights
text-weight-400
Sample text is being used as a placeholder for real text that is normally present.
text-weight-300
Sample text is being used as a placeholder for real text that is normally present.
text-weight-200
Sample text is being used as a placeholder for real text that is normally present.
Text styles
text-style-allcaps
Sample text is being used as a placeholder for real text that is normally present.
text-style-itallic
Sample text is being used as a placeholder for real text that is normally present.
text-style-strikethrough
Sample text is being used as a placeholder for real text that is normally present.
text-style-link
Sample text is being used as a placeholder for real text that is normally present.
text-align-indent
Sample text is being used as a placeholder for real text that is normally present.
Text alignments
text-align-left
Sample text is being used as a placeholder for real text that is normally present.
text-align-center
Sample text is being used as a placeholder for real text that is normally present.
text-align-right
Sample text is being used as a placeholder for real text that is normally present.
Text components
blog_rte
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.
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.
Colors
Color palette
#220d2c
#220d2c
#220d2c
#fbfbfb
#cfd8d7
#ff6e4e
#fb6341
#fb6341
#6c0362
#6c0362
#6c0362
#fcff52
#565656
#cccccc
#ffffff
Text colors
text-color-violet
Sample text is being used as a placeholder for real text that is normally present.
text-color-magenta
Sample text is being used as a placeholder for real text that is normally present.
text-color-grey
Sample text is being used as a placeholder for real text that is normally present.
text-color-grey-50
Sample text is being used as a placeholder for real text that is normally present.
text-color-white
Sample text is being used as a placeholder for real text that is normally present.
text-color-light-grey
Sample text is being used as a placeholder for real text that is normally present.
text-color-platinum
Sample text is being used as a placeholder for real text that is normally present.
text-color-orange-accessible
Sample text is being used as a placeholder for real text that is normally present.
text-color-orange
Sample text is being used as a placeholder for real text that is normally present.
text-color-orange-80
Sample text is being used as a placeholder for real text that is normally present.
text-color-magenta-50
Sample text is being used as a placeholder for real text that is normally present.
Background colors
background-color-violet
background-color-violet-80
background-color-violet-50
background-color-it-white
background-color-it-platinum
background-color-it-orange
background-color-it-orange-80
background-color-it-orange-50
background-color-it-orange-accessible
background-color-it-magenta
background-color-it-magenta-80
background-color-it-magenta-50
background-color-it-yellow
background-color-it-web-grey
background-color-it-web-light-grey
background-color-it-web-white
Arrow backgrounds
background-arrow-violet
background-arrow-platinum
top-arrow
arrow-color-white
top-arrow
arrow-color-platinum
Arrow top
arrow-top
text-color-white
Components
Structure classes
page-wrapper
main-wrapper
container-xxsmall
container-xsmall
container-small
container-medium
container-large
padding-global
padding-section-global
padding-section-small
padding-section-medium
padding-section-large
Spacing
Margins
Direction classes
margin-bottom
margin-top
margin-vertical
margin-horizontal
margin-left
margin-right
Size classes
margin-0
margin-tiny
margin-xxsmall
margin-xsmall
margin-small
margin-medium
margin-large
margin-xlarge
margin-xxlarge
margin-huge
margin-xhuge
margin-xxhuge
Paddings
Direction classes
padding-bottom
padding-top
padding-vertical
padding-horizontal
padding-left
padding-right
Size classes
padding-0
padding-tiny
padding-xxsmall
padding-xsmall
padding-small
padding-medium
padding-large
padding-xlarge
padding-xxlarge
padding-huge
padding-xhuge
padding-xxhuge