Mine Shaft
Heading Styles
heading-jumbo
heading-jumbo
heading-style-h1
heading-style-h1
heading-style-h2
heading-style-h2
heading-style-h3
heading-style-h3
heading-style-h4
heading-style-h4
heading-style-h5
heading-style-h5
heading-style-h6
heading-style-h6
Heading Styles
(Body Text)
heading-jumbo
heading-jumbo
heading-style-h1
heading-style-h1
heading-style-h2
heading-style-h2
heading-style-h3
heading-style-h3
heading-style-h4
heading-style-h4
heading-style-h5
heading-style-h5
heading-style-h6
heading-style-h6
SubHeading Classes
text-style-subheader
Text Style Subheader (H2)
text-style-subheader
Text Style Subheader (Text)
Text Sizes
text-size-xxlarge
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.
text-size-xlarge
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-size-large
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-size-medium
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-size-regular
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-size-small
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-size-tiny
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-bold
text-weight-bold (700)
text-weight-semibold
text-weight-semibold (600)
text-weight-medium
text-weight-medium (500)
text-weight-normal
text-weight-normal (400)
text-weight-light
text-weight-light (300)
text-weight-xlight
text-weight-xlight (200)
Text Styles
body-font
body-font
text-style-mono
text-style-mono
text-style-italic
text-style-italic
text-style-strikethrough
text-style-strikethrough
text-style-underline
text-style-underline
text-style-allcaps
text-style-allcaps
text-style-muted
text-style-muted
text-style-quote
The details are not the details.
They make the design.
They make the design.
– Charles Eames, The Elements of User Experience
Text Helper Classes
text-style-nowrap
text-style-nowrap
break-word
break-word
font-alternative
font-alternative (system-ui)
(eg. for special characters like → ©)
(eg. for special characters like → ©)
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-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.dolor sit amet,
Text Alignments
text-align-left
text-align-left
text-align-center
text-align-center
text-align-right
text-align-right
Flex Alignments
flex-vertical-center
This is some text inside of a div block.
Button Text
flex-horizontal-center
This is some text inside of a div block.
Button Text
flex-column
This is some text inside of a div block.
This is some text inside of a div block.
flex-row
This is some text inside of a div block.
This is some text inside of a div block.
flex-row-centered
This is some text inside of a div block.
flex-wrapper
This is some text inside of a div block.
Color Palette
Body BG
Silver
Body Text
Headings
Mine Shaft
Primary / Brand
Lime
Secondary
Ultramarine Blue
Background1
Black
Background2
White
Background3
White Smoke
Background4
Glaucous
Others
Invert (Black)
Background Colors
background-color-black
background-color-white
background-color-grey
Text Colors
text-color-black
text-color-black
text-color-white
text-color-white
text-color-grey
text-color-grey
text-color-primary
text-color-primary
text-color-secondary
text-color-secondary
text-shadow
text-shadow
text-color-1
text-color-1 (Black)
text-color-2
text-color-2 (White)
text-color-3
text-color-3
text-color-4
text-color-4
Text Links & Link Blocks
Images
Default
default_image-wrapper
→
default_image
Cover
default_image-wrapper
→
default_image-cover
Contain
default_image-wrapper
→
default_image-contain
Aspect Ratio
image_mask
1:1
→
image_cover
All Figures
This is an image caption
Icons
Unify icons sizes. icon-height sets height of icons. icon-1x1 sets both height and width of icons.
Icons
icon-height-xxsmall
icon-height-xsmall
icon-height-small
icon-height-medium
icon-height-large
icon-height-xlarge
icon-height-custom
Icons 1x1
icon-1x1-xxsmall
icon-1x1-xsmall
icon-1x1-small
icon-1x1-medium
icon-1x1-large
icon-1x1-xlarge
icon-1x1-custom
Icons Embed
icon-embed-xxsmall
icon-embed-xsmall
icon-embed-small
icon-embed-medium
icon-embed-large
icon-embed-xlarge
icon-embed-custom
Social Media
Rich Text
text-rich-text
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
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.
- Type: Unordered – Style: No Bullets
- Type: Unordered – Style: No Bullets
- Type: Unordered – Style: No Bullets
- Type: Unordered – Style: Bullets
- Type: Unordered – Style: Bullets
- Type: Unordered – Style: Bullets
- Type: Ordered – Style: Bullets
- Type: Ordered – Style: Bullets
- Type: Ordered – Style: Bullets
This is bold text
This is italic text
This is a link
The details are not the details.
They make the design.
– Charles Eames, The Elements of User Experience
Image – Position: Normal
Rich Text Images & Video
text-rich-text
Images
Position: Centered
Position: Full Width
Position: Normal
Position: Float Left
Heading 2
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.
Video
Position: Centered
Position: Full Width
Position: Normal
Position: Float Left
Heading 2
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.
Form Elements
form_component
form_form
No items found.
No items available at the moment. Please check back later or contact us for more information.
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
button-group
align-center
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
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-on
pointer-events-off
layer
div-square
spacing-clean
align-center
z-index-1
z-index-2
display-inlineflex
has-border
is-icon
has-tooltip
Tooltip
blur-on-hover
Do NOT remove this block!