turretcss

Utilities

Utility classes for typographic styles, display, positioning, floats and visibility of elements for rapid frontend development.

Contents

Utility Classes

For text and background color utility classes check out the color section. Text align utility classes are demonstrated in the typography section.

Class Description
clearfix Clears floats using .clearfix; mixin
cover Makes element cover it's container using .cover; mixin
circle Makes element a circle by applying border-radius: 50%;
center Makes element center using .center; mixin
full-height Sets height to 100%
fixed Sets position: fixed;
relative Sets position: relative;
absolute Sets position: absolute;
pointer Sets cursor: pointer;
no-border Removes borders (Note: !important is used to override specificity issues)

Visibility

Define content to be visible or hidden.

Class Description
hide Hides element display: none;
show Shows element display: block;
visible Sets visibility: visible;
hidden Sets visibility: hidden;
hidden-print Hides element for when @media print
visible-print Shows element for when @media print
hidden-screen Hides element for when @media screen
visible-screen Shows element for when @media screen
hide-visually Hide element but keep in DOM for Screen Readers @apply --hide-visually; mixin
text-hide Hides text @apply --text-hide; mixin

Visibile Breakpoint Classes

Define content to be visible at different breakpoints. Note: !important is used to override specificity issues.

Extra Small Devices
Phones (<767px)
Small Devices
Tablets (768px - 1023px)
Medium devices
Laptops (1024px - 1279px)
Large devices
Desktops (1280px - 1679px)
Extra Large devices
Large Desktops (≥1680px)
.visible-xs Visible Hidden Hidden Hidden Hidden
.visible-s Hidden Visible Hidden Hidden Hidden
.visible-s-up Hidden Visible Visible Visible Visible
.visible-s-down Visible Visible Hidden Hidden Hidden
.visible-m Hidden Hidden Visible Hidden Hidden
.visible-m-up Hidden Hidden Visible Visible Visible
.visible-m-down Visible Visible Visible Hidden Hidden
.visible-l Hidden Hidden Hidden Visible Hidden
.visible-l-up Hidden Hidden Hidden Visible Visible
.visible-l-down Visible Visible Visible Visible Hidden
.visible-xl Hidden Hidden Hidden Hidden Visible

Hidden Breakpoint Classes

Define content to be hidden at different breakpoints. Note: !important is used to override specificity issues.

Extra Small Devices
Phones (<767px)
Small Devices
Tablets (768px - 1023px)
Medium devices
Laptops (1024px - 1279px)
Large devices
Desktops (1280px - 1679px)
Extra Large devices
Large Desktops (≥1680px)
.hidden-xs Hidden Visible Visible Visible Visible
.hidden-s Visible Hidden Visible Visible Visible
.hidden-s-up Visible Hidden Hidden Hidden Hidden
.hidden-s-down Hidden Hidden Visible Visible Visible
.hidden-m Visible Visible Hidden Visible Visible
.hidden-m-up Visible Visible Hidden Hidden Hidden
.hidden-m-down Hidden Hidden Hidden Visible Visible
.hidden-l Visible Visible Visible Hidden Visible
.hidden-l-up Visible Visible Visible Hidden Hidden
.hidden-l-down Hidden Hidden Hidden Hidden Visible
.hidden-xl Visible Visible Visible Visible Hidden

Display

Class Description
display-block Sets display: block; on element
display-inline-block Sets display: inline-block; on element
display-table Sets display: table; on element
display-table-cell Sets display: table-cell; on element

Positioning

Utility classes can be used to position elements easily, each position utility class is position: absolute; and allows for either absolute positioning or using @gutter spacing by adding the gutter class to any position class

Class Description
position-top-left Positions element to the top left of it's container
position-top-right Positions element to the top right of it's container
position-bottom-left Positions element to the bottom left of it's container
position-bottom-right Positions element to the bottom right of it's container
position-left-center Positions element left and centered vertically of it's container
position-right-center Positions element right and centered vertically of it's container
position-center Positions element centered vertically and horizontally of it's container

Fill

<circle class="fill-white" ... />
<circle class="fill-black" ... />

Shades

Light

<circle class="fill-light" ... />
<circle class="fill-light-100" ... />
<circle class="fill-light-200" ... />
<circle class="fill-light-300" ... />
<circle class="fill-light-400" ... />
<circle class="fill-light-500" ... />
<circle class="fill-light-600" ... />
<circle class="fill-light-700" ... />
<circle class="fill-light-800" ... />
<circle class="fill-light-900" ... />

Grey

<circle class="fill-grey" ... />
<circle class="fill-grey-100" ... />
<circle class="fill-grey-200" ... />
<circle class="fill-grey-300" ... />
<circle class="fill-grey-400" ... />
<circle class="fill-grey-500" ... />
<circle class="fill-grey-600" ... />
<circle class="fill-grey-700" ... />
<circle class="fill-grey-800" ... />
<circle class="fill-grey-900" ... />

Dark

<circle class="fill-dark" ... />
<circle class="fill-dark-100" ... />
<circle class="fill-dark-200" ... />
<circle class="fill-dark-300" ... />
<circle class="fill-dark-400" ... />
<circle class="fill-dark-500" ... />
<circle class="fill-dark-600" ... />
<circle class="fill-dark-700" ... />
<circle class="fill-dark-800" ... />
<circle class="fill-dark-900" ... />

Palettes

Primary

<circle class="fill-primary" ... />
<circle class="fill-primary-100" ... />
<circle class="fill-primary-200" ... />
<circle class="fill-primary-300" ... />
<circle class="fill-primary-400" ... />
<circle class="fill-primary-500" ... />
<circle class="fill-primary-600" ... />
<circle class="fill-primary-700" ... />
<circle class="fill-primary-800" ... />
<circle class="fill-primary-900" ... />

Secondary

<circle class="fill-secondary" ... />
<circle class="fill-secondary-100" ... />
<circle class="fill-secondary-200" ... />
<circle class="fill-secondary-300" ... />
<circle class="fill-secondary-400" ... />
<circle class="fill-secondary-500" ... />
<circle class="fill-secondary-600" ... />
<circle class="fill-secondary-700" ... />
<circle class="fill-secondary-800" ... />
<circle class="fill-secondary-900" ... />

Tertiary

<circle class="fill-tertiary" ... />
<circle class="fill-tertiary-100" ... />
<circle class="fill-tertiary-200" ... />
<circle class="fill-tertiary-300" ... />
<circle class="fill-tertiary-400" ... />
<circle class="fill-tertiary-500" ... />
<circle class="fill-tertiary-600" ... />
<circle class="fill-tertiary-700" ... />
<circle class="fill-tertiary-800" ... />
<circle class="fill-tertiary-900" ... />

Indicators

Error

<circle class="fill-error" ... />
<circle class="fill-error-100" ... />
<circle class="fill-error-200" ... />
<circle class="fill-error-300" ... />
<circle class="fill-error-400" ... />
<circle class="fill-error-500" ... />
<circle class="fill-error-600" ... />
<circle class="fill-error-700" ... />
<circle class="fill-error-800" ... />
<circle class="fill-error-900" ... />

Warning

<circle class="fill-warning" ... />
<circle class="fill-warning-100" ... />
<circle class="fill-warning-200" ... />
<circle class="fill-warning-300" ... />
<circle class="fill-warning-400" ... />
<circle class="fill-warning-500" ... />
<circle class="fill-warning-600" ... />
<circle class="fill-warning-700" ... />
<circle class="fill-warning-800" ... />
<circle class="fill-warning-900" ... />

Success

<circle class="fill-success" ... />
<circle class="fill-success-100" ... />
<circle class="fill-success-200" ... />
<circle class="fill-success-300" ... />
<circle class="fill-success-400" ... />
<circle class="fill-success-500" ... />
<circle class="fill-success-600" ... />
<circle class="fill-success-700" ... />
<circle class="fill-success-800" ... />
<circle class="fill-success-900" ... />

Info

<circle class="fill-info" ... />
<circle class="fill-info-100" ... />
<circle class="fill-info-200" ... />
<circle class="fill-info-300" ... />
<circle class="fill-info-400" ... />
<circle class="fill-info-500" ... />
<circle class="fill-info-600" ... />
<circle class="fill-info-700" ... />
<circle class="fill-info-800" ... />
<circle class="fill-info-900" ... />

Flex

Class Description
flex Applies display: flex; to element
inline-flex Applies display: inline-flex; to element
flex-wrap Applies flex-wrap: wrap; to element
flex-nowrap Applies flex-wrap: nowrap; to element
flex-row Applies flex-direction: row; to element
flex-column Applies flex-direction: column; to element
flex-1 Applies flex: 1 1 0; to element
flex-1-1-auto Applies flex: 1 1 auto; to element
flex-1-0-auto Applies flex: 1 0 auto; to element
flex-0-1-auto Applies flex: 0 1 auto; to element
flex-0-0-auto Applies flex: 0 0 auto; to element
justify-content-flex-start Applies justify-content: flex-start; to element
justify-content-flex-end Applies justify-content: flex-end; to element
justify-content-center Applies justify-content: center; to element
justify-content-space-between Applies justify-content: space-between; to element
justify-content-space-around Applies justify-content: space-around; to element
align-content-flex-start Applies align-content: flex-start; to element
align-content-flex-end Applies align-content: flex-end; to element
align-content-center Applies align-content: center; to element
align-content-space-between Applies align-content: space-between; to element
align-content-space-around Applies align-content: space-around; to element
align-content-stretch Applies align-content: stretch; to element
align-items-flex-start Applies align-items: flex-start; to element
align-items-flex-end Applies align-items: flex-end; to element
align-items-center Applies align-items: center; to element
align-items-baseline Applies align-items: baseline; to element
align-items-stretch Applies align-items: stretch; to element
align-self-flex-start Applies align-self: flex-start; to element
align-self-flex-end Applies align-self: flex-end; to element
align-self-center Applies align-self: center; to element
align-self-baseline Applies align-self: baseline; to element
align-self-stretch Applies align-self: stretch; to element

Float

Class Description
left Floats element left
right Floats element right

Responsive Floats

Extra Small Devices
Phones (<767px)
Small Devices
Tablets (768px - 1023px)
Medium devices
Laptops (1024px - 1279px)
Large devices
Desktops (1280px - 1679px)
Extra Large devices
Large Desktops (≥1680px)
.right-xs Right None None None None
.right-s None Right None None None
.right-s-up None Right Right Right Right
.right-s-down Right Right None None None
.right-m None None Right None None
.right-m-up None None Right Right Right
.right-m-down Right Right Right None None
.right-l None None None Right None
.right-l-up None None None Right Right
.right-l-down Right Right Right Right None
.right-xl None None None None Right
.left-xs Left None None None None
.left-s None Left None None None
.left-s-up None Left Left Left Left
.left-s-down Left Left None None None
.left-m None None Left None None
.left-m-up None None Left Left Left
.left-m-down Left Left Left None None
.left-l None None None Left None
.left-l-up None None None Left Left
.left-l-down Left Left Left Left None
.left-xl None None None None Left

Max Width

Maecenas sed diam eget risus varius blandit sit amet non magna. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam id dolor id nibh ultricies vehicula ut id elit. Vestibulum id ligula porta felis euismod semper.

Maecenas sed diam eget risus varius blandit sit amet non magna. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam id dolor id nibh ultricies vehicula ut id elit. Vestibulum id ligula porta felis euismod semper.

Maecenas sed diam eget risus varius blandit sit amet non magna. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam id dolor id nibh ultricies vehicula ut id elit. Vestibulum id ligula porta felis euismod semper.

Maecenas sed diam eget risus varius blandit sit amet non magna. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam id dolor id nibh ultricies vehicula ut id elit. Vestibulum id ligula porta felis euismod semper.

Maecenas sed diam eget risus varius blandit sit amet non magna. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam id dolor id nibh ultricies vehicula ut id elit. Vestibulum id ligula porta felis euismod semper.

<p class="max-width-xl">...</p>
<p class="max-width-l">...</p>
<p class="max-width-m">...</p>
<p class="max-width-s">...</p>
<p class="max-width-xs">...</p>

Gutter

Class Description
no-gutter Removes padding from element
gutter Applies padding var(--gutter) to element
gutter-vertical Applies padding var(--gutter-l) to top and bottom of element
gutter-top Applies padding var(--gutter-l) to top of element
gutter-bottom Applies padding var(--gutter-l) to bottom of element
gutter-horizontal Applies padding var(--gutter-l) to left and right of element
gutter-left Applies padding var(--gutter-l) to left of element
gutter-right Applies padding var(--gutter-l) to right of element

Margin

Margin Sizes

Class Description
margin-xl Applies var(--margin-xl) to element
margin-l Applies var(--margin-l) to element
margin-m Applies var(--margin-m) to element
margin-s Applies var(--margin-s) to element
margin-xs Applies var(--margin-xs) to element

No Margin

Class Description
no-margin Removes margin (Note: !important is used to override specificity issues)
no-margin-vertical Removes margin top and bottom (Note: !important is used to override specificity issues)
no-margin-horizontal Removes margin left and right (Note: !important is used to override specificity issues)
no-margin-top Removes top margin (Note: !important is used to override specificity issues)
no-margin-right Removes right margin (Note: !important is used to override specificity issues)
no-margin-bottom Removes bottom margin (Note: !important is used to override specificity issues)
no-margin-left Removes left margin (Note: !important is used to override specificity issues)

Margin Auto

Class Description
margin-auto Adds margin auto
margin-vertical-auto Adds margin auto top and bottom
margin-horizontal-auto Adds margin auto left and right
margin-top-auto Adds top margin auto
margin-right-auto Adds right margin auto
margin-bottom-auto Adds bottom margin auto
margin-left-auto Adds left margin auto

Margin Vertical

Class Description
margin-vertical-xl Applies margin-top: var(--margin-xl); and margin-bottom: var(--margin-xl); to element
margin-vertical-l Applies margin-top: var(--margin-l); and margin-bottom: var(--margin-l); to element
margin-vertical-m Applies margin-top: var(--margin-m); and margin-bottom: var(--margin-m); to element
margin-vertical-s Applies margin-top: var(--margin-s); and margin-bottom: var(--margin-s); to element
margin-vertical-xs Applies margin-top: var(--margin-xs); and margin-bottom: var(--margin-xs); to element

Margin Horizontal

Class Description
margin-horizontal-xl Applies margin-left: var(--margin-xl); and margin-right: var(--margin-xl); to element
margin-horizontal-l Applies margin-left: var(--margin-l); and margin-right: var(--margin-l); to element
margin-horizontal-m Applies margin-left: var(--margin-m); and margin-right: var(--margin-m); to element
margin-horizontal-s Applies margin-left: var(--margin-s); and margin-right: var(--margin-s); to element
margin-horizontal-xs Applies margin-left: var(--margin-xs); and margin-right: var(--margin-xs); to element

Margin Top

Class Description
margin-top-xl Applies margin-top: var(--margin-xl); to element
margin-top-l Applies margin-top: var(--margin-l); to element
margin-top-m Applies margin-top: var(--margin-m); to element
margin-top-s Applies margin-top: var(--margin-s); to element
margin-top-xs Applies margin-top: var(--margin-xs); to element

Margin Bottom

Class Description
margin-bottom-xl Applies margin-bottom: var(--margin-xl); to element
margin-bottom-l Applies margin-bottom: var(--margin-l); to element
margin-bottom-m Applies margin-bottom: var(--margin-m); to element
margin-bottom-s Applies margin-bottom: var(--margin-s); to element
margin-bottom-xs Applies margin-bottom: var(--margin-xs); to element

Margin Left

Class Description
margin-left-xl Applies margin-left: var(--margin-xl); to element
margin-left-l Applies margin-left: var(--margin-l); to element
margin-left-m Applies margin-left: var(--margin-m); to element
margin-left-s Applies margin-left: var(--margin-s); to element
margin-left-xs Applies margin-left: var(--margin-xs); to element

Margin Right

Class Description
margin-right-xl Applies margin-right: var(--margin-xl); to element
margin-right-l Applies margin-right: var(--margin-l); to element
margin-right-m Applies margin-right: var(--margin-m); to element
margin-right-s Applies margin-right: var(--margin-s); to element
margin-right-xs Applies margin-right: var(--margin-xs); to element

Padding

Padding Sizes

Class Description
padding-xl Applies var(--padding-xl) to element
padding-l Applies var(--padding-l) to element
padding-m Applies var(--padding-m) to element
padding-s Applies var(--padding-s) to element
padding-xs Applies var(--padding-xs) to element

No Padding

Class Description
no-padding Removes padding (Note: !important is used to override specificity issues)
no-padding-vertical Removes padding top and bottom (Note: !important is used to override specificity issues)
no-padding-horizontal Removes padding left and right (Note: !important is used to override specificity issues)
no-padding-top Removes top padding (Note: !important is used to override specificity issues)
no-padding-right Removes right padding (Note: !important is used to override specificity issues)
no-padding-bottom Removes bottom padding (Note: !important is used to override specificity issues)
no-padding-left Removes left padding (Note: !important is used to override specificity issues)

Padding Vertical

Class Description
padding-vertical-xl Applies padding-top: var(--padding-xl); and padding-bottom: var(--padding-xl); to element
padding-vertical-l Applies padding-top: var(--padding-l); and padding-bottom: var(--padding-l); to element
padding-vertical-m Applies padding-top: var(--padding-m); and padding-bottom: var(--padding-m); to element
padding-vertical-s Applies padding-top: var(--padding-s); and padding-bottom: var(--padding-s); to element
padding-vertical-xs Applies padding-top: var(--padding-xs); and padding-bottom: var(--padding-xs); to element

Padding Horizontal

Class Description
padding-vertical-xl Applies padding-left: var(--padding-xl); and padding-right: var(--padding-xl); to element
padding-vertical-l Applies padding-left: var(--padding-l); and padding-right: var(--padding-l); to element
padding-vertical-m Applies padding-left: var(--padding-m); and padding-right: var(--padding-m); to element
padding-vertical-s Applies padding-left: var(--padding-s); and padding-right: var(--padding-s); to element
padding-vertical-xs Applies padding-left: var(--padding-xs); and padding-right: var(--padding-xs); to element

Padding Top

Class Description
padding-top-xl Applies padding-top: var(--padding-xl); to element
padding-top-l Applies padding-top: var(--padding-l); to element
padding-top-m Applies padding-top: var(--padding-m); to element
padding-top-s Applies padding-top: var(--padding-s); to element
padding-top-xs Applies padding-top: var(--padding-xs); to element

Padding Bottom

Class Description
padding-bottom-xl Applies padding-bottom: var(--padding-xl); to element
padding-bottom-l Applies padding-bottom: var(--padding-l); to element
padding-bottom-m Applies padding-bottom: var(--padding-m); to element
padding-bottom-s Applies padding-bottom: var(--padding-s); to element
padding-bottom-xs Applies padding-bottom: var(--padding-xs); to element

Padding Left

Class Description
padding-left-xl Applies padding-left: var(--padding-xl); to element
padding-left-l Applies padding-left: var(--padding-l); to element
padding-left-m Applies padding-left: var(--padding-m); to element
padding-left-s Applies padding-left: var(--padding-s); to element
padding-left-xs Applies padding-left: var(--padding-xs); to element

Padding Right

Class Description
padding-right-xl Applies padding-right: var(--padding-xl); to element
padding-right-l Applies padding-right: var(--padding-l); to element
padding-right-m Applies padding-right: var(--padding-m); to element
padding-right-s Applies padding-right: var(--padding-s); to element
padding-right-xs Applies padding-right: var(--padding-xs); to element

Headings

Heading 1 Heading 1 small

Heading 2 Heading 2 small

Heading 3 Heading 3 small

Heading 4 Heading 4 small

Heading 5 Heading 5 small

Heading 6 Heading 6 small

<p class="h1">Heading 1 <small>Heading 1 small</small></p>
<p class="h2">Heading 2 <small>Heading 2 small</small></p>
<p class="h3">Heading 3 <small>Heading 3 small</small></p>
<p class="h4">Heading 4 <small>Heading 4 small</small></p>
<p class="h5">Heading 5 <small>Heading 5 small</small></p>
<p class="h6">Heading 6 <small>Heading 6 small</small></p>

Font Family

Font Family System

Font Family Sans Serif

Font Family Serif

Font Family Monospace

<p class="font-family-system">...</p>
<p class="font-family-sans-serif">...</p>
<p class="font-family-serif">...</p>
<p class="font-family-monospace">...</p>

Font Weight

Font Weight Thin

Font Weight Light

Font Weight Regular

Font Weight Medium

Font Weight Semibold

Font Weight Bold

Font Weight Black

<p class="font-weight-thin">...</p>
<p class="font-weight-light">...</p>
<p class="font-weight-regular">...</p>
<p class="font-weight-medium">...</p>
<p class="font-weight-semibold">...</p>
<p class="font-weight-bold">...</p>
<p class="font-weight-black">...</p>

Font Size

Font Size Extra Large

Font Size Large

Font Size Medium

Font Size Small

Font Size Extra Small

<p class="font-size-xl">...</p>
<p class="font-size-l">...</p>
<p class="font-size-m">...</p>
<p class="font-size-s">...</p>
<p class="font-size-xs">...</p>

Line Height

Line Height Extra Large

Line Height Large

Line Height Medium

Line Height Small

Line Height Extra Small

<p class="line-height-xl">...</p>
<p class="line-height-l">...</p>
<p class="line-height-m">...</p>
<p class="line-height-s">...</p>
<p class="line-height-xs">...</p>

Letter Spacing

Letter Spacing Extra Large

Letter Spacing Large

Letter Spacing Medium

Letter Spacing Small

Letter Spacing Extra Small

<p class="letter-spacing-xl">...</p>
<p class="letter-spacing-l">...</p>
<p class="letter-spacing-m">...</p>
<p class="letter-spacing-s">...</p>
<p class="letter-spacing-xs">...</p>

Stroke

<circle class="stroke-white" ... />
<circle class="stroke-black" ... />

Shades

Light

<circle class="stroke-light" ... />
<circle class="stroke-light-100" ... />
<circle class="stroke-light-200" ... />
<circle class="stroke-light-300" ... />
<circle class="stroke-light-400" ... />
<circle class="stroke-light-500" ... />
<circle class="stroke-light-600" ... />
<circle class="stroke-light-700" ... />
<circle class="stroke-light-800" ... />
<circle class="stroke-light-900" ... />

Grey

<circle class="stroke-grey" ... />
<circle class="stroke-grey-100" ... />
<circle class="stroke-grey-200" ... />
<circle class="stroke-grey-300" ... />
<circle class="stroke-grey-400" ... />
<circle class="stroke-grey-500" ... />
<circle class="stroke-grey-600" ... />
<circle class="stroke-grey-700" ... />
<circle class="stroke-grey-800" ... />
<circle class="stroke-grey-900" ... />

Dark

<circle class="stroke-dark" ... />
<circle class="stroke-dark-100" ... />
<circle class="stroke-dark-200" ... />
<circle class="stroke-dark-300" ... />
<circle class="stroke-dark-400" ... />
<circle class="stroke-dark-500" ... />
<circle class="stroke-dark-600" ... />
<circle class="stroke-dark-700" ... />
<circle class="stroke-dark-800" ... />
<circle class="stroke-dark-900" ... />

Palettes

Primary

<circle class="stroke-primary" ... />
<circle class="stroke-primary-100" ... />
<circle class="stroke-primary-200" ... />
<circle class="stroke-primary-300" ... />
<circle class="stroke-primary-400" ... />
<circle class="stroke-primary-500" ... />
<circle class="stroke-primary-600" ... />
<circle class="stroke-primary-700" ... />
<circle class="stroke-primary-800" ... />
<circle class="stroke-primary-900" ... />

Secondary

<circle class="stroke-secondary" ... />
<circle class="stroke-secondary-100" ... />
<circle class="stroke-secondary-200" ... />
<circle class="stroke-secondary-300" ... />
<circle class="stroke-secondary-400" ... />
<circle class="stroke-secondary-500" ... />
<circle class="stroke-secondary-600" ... />
<circle class="stroke-secondary-700" ... />
<circle class="stroke-secondary-800" ... />
<circle class="stroke-secondary-900" ... />

Tertiary

<circle class="stroke-tertiary" ... />
<circle class="stroke-tertiary-100" ... />
<circle class="stroke-tertiary-200" ... />
<circle class="stroke-tertiary-300" ... />
<circle class="stroke-tertiary-400" ... />
<circle class="stroke-tertiary-500" ... />
<circle class="stroke-tertiary-600" ... />
<circle class="stroke-tertiary-700" ... />
<circle class="stroke-tertiary-800" ... />
<circle class="stroke-tertiary-900" ... />

Indicators

Error

<circle class="stroke-error" ... />
<circle class="stroke-error-100" ... />
<circle class="stroke-error-200" ... />
<circle class="stroke-error-300" ... />
<circle class="stroke-error-400" ... />
<circle class="stroke-error-500" ... />
<circle class="stroke-error-600" ... />
<circle class="stroke-error-700" ... />
<circle class="stroke-error-800" ... />
<circle class="stroke-error-900" ... />

Warning

<circle class="stroke-warning" ... />
<circle class="stroke-warning-100" ... />
<circle class="stroke-warning-200" ... />
<circle class="stroke-warning-300" ... />
<circle class="stroke-warning-400" ... />
<circle class="stroke-warning-500" ... />
<circle class="stroke-warning-600" ... />
<circle class="stroke-warning-700" ... />
<circle class="stroke-warning-800" ... />
<circle class="stroke-warning-900" ... />

Success

<circle class="stroke-success" ... />
<circle class="stroke-success-100" ... />
<circle class="stroke-success-200" ... />
<circle class="stroke-success-300" ... />
<circle class="stroke-success-400" ... />
<circle class="stroke-success-500" ... />
<circle class="stroke-success-600" ... />
<circle class="stroke-success-700" ... />
<circle class="stroke-success-800" ... />
<circle class="stroke-success-900" ... />

Info

<circle class="stroke-info" ... />
<circle class="stroke-info-100" ... />
<circle class="stroke-info-200" ... />
<circle class="stroke-info-300" ... />
<circle class="stroke-info-400" ... />
<circle class="stroke-info-500" ... />
<circle class="stroke-info-600" ... />
<circle class="stroke-info-700" ... />
<circle class="stroke-info-800" ... />
<circle class="stroke-info-900" ... />

Text

Text Align

Text Left

Text Center

Text Right

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed posuere consectetur est at lobortis. Nullam quis risus eget urna mollis ornare vel eu leo.

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas faucibus mollis interdum. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna.

<p class="text-left">...</p>
<p class="text-center">...</p>
<p class="text-right">...</p>
<p class="text-justify">...</p>
<p class="truncate">...</p>

Text Transform

Uppercase

Lowercase

capitalize

<p class="uppercase">Uppercase</p>
<p class="lowercase">Lowercase</p>
<p class="capitalize">capitalize</p>

Color

Color Inherit

Current Color

<p class="color-inherit">Color Inherit</p>
<p class="current-color">Current Color</p>

White

Black

<p class="color-white">...</p>
<p class="color-black">...</p>

Shades

Light

Light

Light 100

Light 200

Light 300

Light 400

Light 500

Light 600

Light 700

Light 800

Light 900

<p class="color-light">...</p>
<p class="color-light-100">...</p>
<p class="color-light-200">...</p>
<p class="color-light-300">...</p>
<p class="color-light-400">...</p>
<p class="color-light-500">...</p>
<p class="color-light-600">...</p>
<p class="color-light-700">...</p>
<p class="color-light-800">...</p>
<p class="color-light-900">...</p>

Grey

Grey

Grey 100

Grey 200

Grey 300

Grey 400

Grey 500

Grey 600

Grey 700

Grey 800

Grey 900

<p class="color-grey">...</p>
<p class="color-grey-100">...</p>
<p class="color-grey-200">...</p>
<p class="color-grey-300">...</p>
<p class="color-grey-400">...</p>
<p class="color-grey-500">...</p>
<p class="color-grey-600">...</p>
<p class="color-grey-700">...</p>
<p class="color-grey-800">...</p>
<p class="color-grey-900">...</p>

Dark

Dark

Dark 100

Dark 200

Dark 300

Dark 400

Dark 500

Dark 600

Dark 700

Dark 800

Dark 900

<p class="color-dark">...</p>
<p class="color-dark-100">...</p>
<p class="color-dark-200">...</p>
<p class="color-dark-300">...</p>
<p class="color-dark-400">...</p>
<p class="color-dark-500">...</p>
<p class="color-dark-600">...</p>
<p class="color-dark-700">...</p>
<p class="color-dark-800">...</p>
<p class="color-dark-900">...</p>

Palettes

Primary

Primary

Primary 100

Primary 200

Primary 300

Primary 400

Primary 500

Primary 600

Primary 700

Primary 800

Primary 900

<p class="color-primary">...</p>
<p class="color-primary-100">...</p>
<p class="color-primary-200">...</p>
<p class="color-primary-300">...</p>
<p class="color-primary-400">...</p>
<p class="color-primary-500">...</p>
<p class="color-primary-600">...</p>
<p class="color-primary-700">...</p>
<p class="color-primary-800">...</p>
<p class="color-primary-900">...</p>

Secondary

Secondary

Secondary 100

Secondary 200

Secondary 300

Secondary 400

Secondary 500

Secondary 600

Secondary 700

Secondary 800

Secondary 900

<p class="color-secondary">...</p>
<p class="color-secondary-100">...</p>
<p class="color-secondary-200">...</p>
<p class="color-secondary-300">...</p>
<p class="color-secondary-400">...</p>
<p class="color-secondary-500">...</p>
<p class="color-secondary-600">...</p>
<p class="color-secondary-700">...</p>
<p class="color-secondary-800">...</p>
<p class="color-secondary-900">...</p>

Tertiary

Tertiary

Tertiary 100

Tertiary 200

Tertiary 300

Tertiary 400

Tertiary 500

Tertiary 600

Tertiary 700

Tertiary 800

Tertiary 900

<p class="color-tertiary">...</p>
<p class="color-tertiary-100">...</p>
<p class="color-tertiary-200">...</p>
<p class="color-tertiary-300">...</p>
<p class="color-tertiary-400">...</p>
<p class="color-tertiary-500">...</p>
<p class="color-tertiary-600">...</p>
<p class="color-tertiary-700">...</p>
<p class="color-tertiary-800">...</p>
<p class="color-tertiary-900">...</p>

Indicators

Info

Info

Info 100

Info 200

Info 300

Info 400

Info 500

Info 600

Info 700

Info 800

Info 900

<p class="color-info">...</p>
<p class="color-info-100">...</p>
<p class="color-info-200">...</p>
<p class="color-info-300">...</p>
<p class="color-info-400">...</p>
<p class="color-info-500">...</p>
<p class="color-info-600">...</p>
<p class="color-info-700">...</p>
<p class="color-info-800">...</p>
<p class="color-info-900">...</p>

Error

Error

Error 100

Error 200

Error 300

Error 400

Error 500

Error 600

Error 700

Error 800

Error 900

<p class="color-error">...</p>
<p class="color-error-100">...</p>
<p class="color-error-200">...</p>
<p class="color-error-300">...</p>
<p class="color-error-400">...</p>
<p class="color-error-500">...</p>
<p class="color-error-600">...</p>
<p class="color-error-700">...</p>
<p class="color-error-800">...</p>
<p class="color-error-900">...</p>

Warning

Warning

Warning 100

Warning 200

Warning 300

Warning 400

Warning 500

Warning 600

Warning 700

Warning 800

Warning 900

<p class="color-warning">...</p>
<p class="color-warning-100">...</p>
<p class="color-warning-200">...</p>
<p class="color-warning-300">...</p>
<p class="color-warning-400">...</p>
<p class="color-warning-500">...</p>
<p class="color-warning-600">...</p>
<p class="color-warning-700">...</p>
<p class="color-warning-800">...</p>
<p class="color-warning-900">...</p>

Success

Success

Success 100

Success 200

Success 300

Success 400

Success 500

Success 600

Success 700

Success 800

Success 900

<p class="color-success">...</p>
<p class="color-success-100">...</p>
<p class="color-success-200">...</p>
<p class="color-success-300">...</p>
<p class="color-success-400">...</p>
<p class="color-success-500">...</p>
<p class="color-success-600">...</p>
<p class="color-success-700">...</p>
<p class="color-success-800">...</p>
<p class="color-success-900">...</p>

Background

White
Black
<div class="background-white">...</div>
<div class="background-black">...</div>

Shades

Light

Light
Light 100
Light 200
Light 300
Light 400
Light 500
Light 600
Light 700
Light 800
Light 900
<div class="background-light">...</div>
<div class="background-light-100">...</div>
<div class="background-light-200">...</div>
<div class="background-light-300">...</div>
<div class="background-light-400">...</div>
<div class="background-light-500">...</div>
<div class="background-light-600">...</div>
<div class="background-light-700">...</div>
<div class="background-light-800">...</div>
<div class="background-light-900">...</div>

Grey

Grey
Grey 100
Grey 200
Grey 300
Grey 400
Grey 500
Grey 600
Grey 700
Grey 800
Grey 900
<div class="background-grey">...</div>
<div class="background-grey-100">...</div>
<div class="background-grey-200">...</div>
<div class="background-grey-300">...</div>
<div class="background-grey-400">...</div>
<div class="background-grey-500">...</div>
<div class="background-grey-600">...</div>
<div class="background-grey-700">...</div>
<div class="background-grey-800">...</div>
<div class="background-grey-900">...</div>

Dark

Dark
Dark 100
Dark 200
Dark 300
Dark 400
Dark 500
Dark 600
Dark 700
Dark 800
Dark 900
<div class="background-dark">...</div>
<div class="background-dark-100">...</div>
<div class="background-dark-200">...</div>
<div class="background-dark-300">...</div>
<div class="background-dark-400">...</div>
<div class="background-dark-500">...</div>
<div class="background-dark-600">...</div>
<div class="background-dark-700">...</div>
<div class="background-dark-800">...</div>
<div class="background-dark-900">...</div>

Palettes

Primary

Primary
Primary 100
Primary 200
Primary 300
Primary 400
Primary 500
Primary 600
Primary 700
Primary 800
Primary 900
<div class="background-primary">...</div>
<div class="background-primary-100">...</div>
<div class="background-primary-200">...</div>
<div class="background-primary-300">...</div>
<div class="background-primary-400">...</div>
<div class="background-primary-500">...</div>
<div class="background-primary-600">...</div>
<div class="background-primary-700">...</div>
<div class="background-primary-800">...</div>
<div class="background-primary-900">...</div>

Secondary

Secondary
Secondary 100
Secondary 200
Secondary 300
Secondary 400
Secondary 500
Secondary 600
Secondary 700
Secondary 800
Secondary 900
<div class="background-secondary">...</div>
<div class="background-secondary-100">...</div>
<div class="background-secondary-200">...</div>
<div class="background-secondary-300">...</div>
<div class="background-secondary-400">...</div>
<div class="background-secondary-500">...</div>
<div class="background-secondary-600">...</div>
<div class="background-secondary-700">...</div>
<div class="background-secondary-800">...</div>
<div class="background-secondary-900">...</div>

Tertiary

Tertiary
Tertiary 100
Tertiary 200
Tertiary 300
Tertiary 400
Tertiary 500
Tertiary 600
Tertiary 700
Tertiary 800
Tertiary 900
<div class="background-tertiary">...</div>
<div class="background-tertiary-100">...</div>
<div class="background-tertiary-200">...</div>
<div class="background-tertiary-300">...</div>
<div class="background-tertiary-400">...</div>
<div class="background-tertiary-500">...</div>
<div class="background-tertiary-600">...</div>
<div class="background-tertiary-700">...</div>
<div class="background-tertiary-800">...</div>
<div class="background-tertiary-900">...</div>

Indicators

Error

Error
Error 100
Error 200
Error 300
Error 400
Error 500
Error 600
Error 700
Error 800
Error 900
<div class="background-error">...</div>
<div class="background-error-100">...</div>
<div class="background-error-200">...</div>
<div class="background-error-300">...</div>
<div class="background-error-400">...</div>
<div class="background-error-500">...</div>
<div class="background-error-600">...</div>
<div class="background-error-700">...</div>
<div class="background-error-800">...</div>
<div class="background-error-900">...</div>

Warning

Warning
Warning 100
Warning 200
Warning 300
Warning 400
Warning 500
Warning 600
Warning 700
Warning 800
Warning 900
<div class="background-warning">...</div>
<div class="background-warning-100">...</div>
<div class="background-warning-200">...</div>
<div class="background-warning-300">...</div>
<div class="background-warning-400">...</div>
<div class="background-warning-500">...</div>
<div class="background-warning-600">...</div>
<div class="background-warning-700">...</div>
<div class="background-warning-800">...</div>
<div class="background-warning-900">...</div>

Success

Success
Success 100
Success 200
Success 300
Success 400
Success 500
Success 600
Success 700
Success 800
Success 900
<div class="background-success">...</div>
<div class="background-success-100">...</div>
<div class="background-success-200">...</div>
<div class="background-success-300">...</div>
<div class="background-success-400">...</div>
<div class="background-success-500">...</div>
<div class="background-success-600">...</div>
<div class="background-success-700">...</div>
<div class="background-success-800">...</div>
<div class="background-success-900">...</div>

Info

Info
Info 100
Info 200
Info 300
Info 400
Info 500
Info 600
Info 700
Info 800
Info 900
<div class="background-info">...</div>
<div class="background-info-100">...</div>
<div class="background-info-200">...</div>
<div class="background-info-300">...</div>
<div class="background-info-400">...</div>
<div class="background-info-500">...</div>
<div class="background-info-600">...</div>
<div class="background-info-700">...</div>
<div class="background-info-800">...</div>
<div class="background-info-900">...</div>

Border

Border
<div class="border">...</div>

Border Directions

Vertical
Horizontal
Top
Right
Bottom
Left
<div class="border-vertical">...</div>
<div class="border-horizontal">...</div>
<div class="border-top">...</div>
<div class="border-right">...</div>
<div class="border-bottom">...</div>
<div class="border-left">...</div>

Border Radius

Border Radius
<div class="border-radius">...</div>

Border Color

White
Black
<div class="border border-color-white">...</div>
<div class="border border-color-black">...</div>

Shades

Light

Light
Light 100
Light 200
Light 300
Light 400
Light 500
Light 600
Light 700
Light 800
Light 900
<div class="border border-color-light">...</div>
<div class="border border-color-light-100">...</div>
<div class="border border-color-light-200">...</div>
<div class="border border-color-light-300">...</div>
<div class="border border-color-light-400">...</div>
<div class="border border-color-light-500">...</div>
<div class="border border-color-light-600">...</div>
<div class="border border-color-light-700">...</div>
<div class="border border-color-light-800">...</div>
<div class="border border-color-light-900">...</div>

Grey

Grey
Grey 100
Grey 200
Grey 300
Grey 400
Grey 500
Grey 600
Grey 700
Grey 800
Grey 900
<div class="border border-color-grey">...</div>
<div class="border border-color-grey-100">...</div>
<div class="border border-color-grey-200">...</div>
<div class="border border-color-grey-300">...</div>
<div class="border border-color-grey-400">...</div>
<div class="border border-color-grey-500">...</div>
<div class="border border-color-grey-600">...</div>
<div class="border border-color-grey-700">...</div>
<div class="border border-color-grey-800">...</div>
<div class="border border-color-grey-900">...</div>

Dark

Dark
Dark 100
Dark 200
Dark 300
Dark 400
Dark 500
Dark 600
Dark 700
Dark 800
Dark 900
<div class="border border-color-dark">...</div>
<div class="border border-color-dark-100">...</div>
<div class="border border-color-dark-200">...</div>
<div class="border border-color-dark-300">...</div>
<div class="border border-color-dark-400">...</div>
<div class="border border-color-dark-500">...</div>
<div class="border border-color-dark-600">...</div>
<div class="border border-color-dark-700">...</div>
<div class="border border-color-dark-800">...</div>
<div class="border border-color-dark-900">...</div>

Palettes

Primary

Primary
Primary 100
Primary 200
Primary 300
Primary 400
Primary 500
Primary 600
Primary 700
Primary 800
Primary 900
<div class="border border-color-primary">...</div>
<div class="border border-color-primary-100">...</div>
<div class="border border-color-primary-200">...</div>
<div class="border border-color-primary-300">...</div>
<div class="border border-color-primary-400">...</div>
<div class="border border-color-primary-500">...</div>
<div class="border border-color-primary-600">...</div>
<div class="border border-color-primary-700">...</div>
<div class="border border-color-primary-800">...</div>
<div class="border border-color-primary-900">...</div>

Secondary

Secondary
Secondary 100
Secondary 200
Secondary 300
Secondary 400
Secondary 500
Secondary 600
Secondary 700
Secondary 800
Secondary 900
<div class="border border-color-secondary">...</div>
<div class="border border-color-secondary-100">...</div>
<div class="border border-color-secondary-200">...</div>
<div class="border border-color-secondary-300">...</div>
<div class="border border-color-secondary-400">...</div>
<div class="border border-color-secondary-500">...</div>
<div class="border border-color-secondary-600">...</div>
<div class="border border-color-secondary-700">...</div>
<div class="border border-color-secondary-800">...</div>
<div class="border border-color-secondary-900">...</div>

Tertiary

Tertiary
Tertiary 100
Tertiary 200
Tertiary 300
Tertiary 400
Tertiary 500
Tertiary 600
Tertiary 700
Tertiary 800
Tertiary 900
<div class="border border-color-tertiary">...</div>
<div class="border border-color-tertiary-100">...</div>
<div class="border border-color-tertiary-200">...</div>
<div class="border border-color-tertiary-300">...</div>
<div class="border border-color-tertiary-400">...</div>
<div class="border border-color-tertiary-500">...</div>
<div class="border border-color-tertiary-600">...</div>
<div class="border border-color-tertiary-700">...</div>
<div class="border border-color-tertiary-800">...</div>
<div class="border border-color-tertiary-900">...</div>

Indicators

Info

Info
Info 100
Info 200
Info 300
Info 400
Info 500
Info 600
Info 700
Info 800
Info 900
<div class="border border-color-info">...</div>
<div class="border border-color-info-100">...</div>
<div class="border border-color-info-200">...</div>
<div class="border border-color-info-300">...</div>
<div class="border border-color-info-400">...</div>
<div class="border border-color-info-500">...</div>
<div class="border border-color-info-600">...</div>
<div class="border border-color-info-700">...</div>
<div class="border border-color-info-800">...</div>
<div class="border border-color-info-900">...</div>

Error

Error
Error 100
Error 200
Error 300
Error 400
Error 500
Error 600
Error 700
Error 800
Error 900
<div class="border border-color-error">...</div>
<div class="border border-color-error-100">...</div>
<div class="border border-color-error-200">...</div>
<div class="border border-color-error-300">...</div>
<div class="border border-color-error-400">...</div>
<div class="border border-color-error-500">...</div>
<div class="border border-color-error-600">...</div>
<div class="border border-color-error-700">...</div>
<div class="border border-color-error-800">...</div>
<div class="border border-color-error-900">...</div>

Warning

Warning
Warning 100
Warning 200
Warning 300
Warning 400
Warning 500
Warning 600
Warning 700
Warning 800
Warning 900
<div class="border border-color-warning">...</div>
<div class="border border-color-warning-100">...</div>
<div class="border border-color-warning-200">...</div>
<div class="border border-color-warning-300">...</div>
<div class="border border-color-warning-400">...</div>
<div class="border border-color-warning-500">...</div>
<div class="border border-color-warning-600">...</div>
<div class="border border-color-warning-700">...</div>
<div class="border border-color-warning-800">...</div>
<div class="border border-color-warning-900">...</div>

Success

Success
Success 100
Success 200
Success 300
Success 400
Success 500
Success 600
Success 700
Success 800
Success 900
<div class="border border-color-success">...</div>
<div class="border border-color-success-100">...</div>
<div class="border border-color-success-200">...</div>
<div class="border border-color-success-300">...</div>
<div class="border border-color-success-400">...</div>
<div class="border border-color-success-500">...</div>
<div class="border border-color-success-600">...</div>
<div class="border border-color-success-700">...</div>
<div class="border border-color-success-800">...</div>
<div class="border border-color-success-900">...</div>