Structure Classes
Defined and flexible core structure we can use on all or most pages.
page-wrapper
main-wrapper
container-small
container-medium
container-large
padding-global
padding-section-small
padding-section-medium
padding-section-large
button-group
Headings
HTML tags define default Heading styles. Use Heading classes when the typography style doesn't match the default HTML tag.
heading-style-h1
Sample text helps you understand how real text may look. Sample text is being used as a placeholder.
heading-style-h2
Sample text helps you understand how real text may look. Sample text is being used as a placeholder.
heading-style-h3
Sample text helps you understand how real text may look. Sample text is being used as a placeholder.
heading-style-h4
Sample text helps you understand how real text may look. Sample text is being used as a placeholder.
heading-style-h5
Sample text helps you understand how real text may look. Sample text is being used as a placeholder.
heading-style-h6
Sample text helps you understand how real text may look. Sample text is being used as a placeholder.
Text Classes
Text classes when typography style doesn't match the default HTML tag.
Text Sizes
text-size-large
Here goes your text ... Select any part of your text to access the formatting toolbar.
text-size-medium
Here goes your text ... Select any part of your text to access the formatting toolbar.
text-size-regular
Here goes your text ... Select any part of your text to access the formatting toolbar.
text-size-small
Here goes your text ... Select any part of your text to access the formatting toolbar.
text-size-tiny
Here goes your text ... Select any part of your text to access the formatting toolbar.
Text Styles
text-style-strikethrough
text-style-strikethrough
text-style-italic
text-style-italic
text-style-muted
text-style-muted
text-style-allcaps
text-style-allcaps
text-style-nowrap
text-style-nowrap
text-style-link
text-style-link
text-style-quote
Here goes your text ... Select any part of your text to access the formatting toolbar.
text-style-2lines
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text text-style-2lines
text-style-3lines
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
Text Weights
text-weight-xbold
text-weight-xbold
text-weight-bold
text-weight-bold
text-weight-semibold
text-weight-semibold
text-weight-medium
text-weight-medium
text-weight-normal
text-weight-normal
text-weight-light
text-weight-light
Text Alignments
text-align-left
text-align-left
text-align-center
text-align-center
text-align-right
text-align-right
Buttons
Button combo class system.
button
Button Textbutton
is-small
button
is-large
button
is-secondary
button
is-text
button
is-icon
Colors
Manage recurring text and background colors.
Text Colors
text-color-primary
text-color-primary
text-color-secondary
text-color-secondary
text-color-alternate
text-color-alternate
Background Colors
background-color-primary
text-style-strikethrough
text-style-italic
text-style-italic
text-style-muted
text-style-muted
text-style-allcaps
text-style-allcaps
text-style-nowrap
text-style-nowrap
Max widths
Use the max-width CSS property to contain inner content to a maximum width.
max-width-full
max-width-full-tablet
max-width-full-mobile-portrait
max-width-full-mobile-landscape
max-width-xxlarge
max-width-xlarge
max-width-large
max-width-medium
max-width-small
max-width-xsmall
max-width-xxsmall
Paddings
Utility spacing system - padding classes. [padding-direction] + [padding-size].
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
padding-custom1
padding-custom2
padding-custom3
Margins
Utility spacing system - padding classes. [margin-direction] + [margin-size].
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
margin-custom1
margin-custom2
margin-custom3
Icons
Unify icons sizes. icon-height sets height of icons. icon-1x1 sets both height and width of icons.
icon-height-small
icon-height-medium
icon-height-large
icon-1x1-small
icon-1x1-medium
icon-1x1-large
Useful utility systems
Utility classes we like to use in most of our projects to build faster.
hide
This element is hidden
hide-tablet
hide-mobile-portrait
hide-mobile-landscape
overflow-visible
overflow-hidden
overflow-auto
overflow-scroll
pointer-events-auto
pointer-events-none
layer
spacing-clean
align-center
z-index-1
z-index-2
inherit-color
aspect-ratio-square
aspect-ratio-portrait
aspect-ratio-landscape
aspect-ratio-widescreen