Utility Classes

Utility classes are commonly used as helper classes intended to reduce the need for custom styling.

Optional utility class modifiers are denoted by braces. If no option is specified, the style will apply to all variations. Only certain utilities have the option to be modified. Please refer to the modifier options section for more details.

Typography

Alignment

Class Name	Usage	Required
`.text-justify`	full justify a text block
`.text-align-left-{breakpoints}`	left align a text block
`.text-align-center-{breakpoints}`	center align a text block
`.text-align-right-{breakpoints}`	right align a text block
`.text-truncate`	truncate a text block (using an elipses)

Style

Class Name	Usage	Required
`.text-nowrap`	prevents text from wrapping to next line
`.text-wrap`	sets text to wrap to next line
`.text-neutral`	sets the text color to Gray 04
`.text-lowercase`	sets the text to all lowercase
`.text-uppercase`	sets the text to all uppercase
`.text-underline`	sets the text decoration to underline
`.text-capitalize`	sets the first character of each word to uppercase
`.font-weight-normal`	sets the font weight to normal
`.font-weight-medium`	sets the font weight to medium
`.font-weight-bold`	sets the font weight to bold
`.font-italic`	sets the font to italic

Borders

Class Name	Usage	Required
`.border-{sides}-{breakpoints}`	sets a Gray 02 1px border
`.border-dark-{sides}-{breakpoints}`	sets a Gray 03 1px border
`.border-dashed-{sides}-{breakpoints}`	sets a Gray 02 1px dashed border
`.border-dark-dashed-{sides}-{breakpoints}`	sets a Gray 03 1px border
`.bordered`	sets a Gray 03 1px border to the bottom of all children elements except last child
`.border-0-{sides}-{breakpoints}`	removes border

Layout

Flex

Class Name	Usage	Required
`.flex`	adds display flex
`.flex-inline`	adds display inline-flex
`.flex-align-stretch`	stretches children elements to fill container vertically	`.flex`
`.flex-align-center`	centers children elements vertically	`.flex`
`.flex-align-start`	aligns children elements to the top	`.flex`
`.flex-align-end`	aligns children elements to the bottom	`.flex`
`.flex-align-baseline`	children elements are aligned such as their baselines align	`.flex`
`.flex-align-content-start`	children elements are packed to the start of parent cross-axis	`.flex`
`.flex-align-content-end`	children elements are packed to the end of parent cross-axis	`.flex`
`.flex-align-content-center`	children elements are packed to the center of parent cross-axis	`.flex`
`.flex-align-content-between`	children elements are evenly distributed from start to end in parent cross-axis	`.flex`
`.flex-align-content-around`	children elements are evenly distributed with equal space in parent cross-axis	`.flex`
`.flex-align-content-stretch`	children elements are stretched in parent cross-axis	`.flex`
`.flex-align-items-center`	children elements are aligned to the center of parent cross-axis	`.flex`
`.flex-align-items-start`	children elements are aligned to the start of parent cross-axis	`.flex`
`.flex-align-items-end`	children elements are aligned to the end of parent cross-axis	`.flex`
`.flex-align-items-stretch`	children elements are aligned to stretch in parent cross-axis	`.flex`
`.flex-align-items-baseline`	children elements are aligned to the baseline in parent cross-axis	`.flex`
`.flex-align-self-center`	Element is aligned to the center of parent cross-axis	`.flex`
`.flex-align-self-start`	Element is aligned to the start of parent cross-axis	`.flex`
`.flex-align-self-end`	Element is aligned to the end of parent cross-axis	`.flex`
`.flex-align-self-stretch`	Element is aligned to stretch in parent cross-axis	`.flex`
`.flex-align-self-baseline`	Element is aligned to the baseline in parent cross-axis	`.flex`
`.flex-justify-center`	centers children elements horizontally	`.flex`
`.flex-justify-end`	children elements are packed towards the end line	`.flex`
`.flex-justify-between`	children elements are evenly distributed from start to end in parent main-axis	`.flex`
`.flex-justify-around`	children elements are evenly distributed with equal space in parent main-axis	`.flex`
`.flex-wrap`	flow direction that allows children elements to wrap	`.flex`
`.flex-no-wrap`	flow direction that prevents children elements from wrapping	`.flex`
`.flex-reverse-wrap`	flow direction that allows children elements to wrap in reverse	`.flex`
`.flex-item-grow`	allows flex child element to grow	parent with `.flex` class
`.flex-item-shrink`	shrinks flex child element	parent with `.flex` class
`.flex-row-{breakpoints}`	sets flex-direction to row	`.flex`
`.flex-column-{breakpoints}`	sets flex-direction to column	`.flex`
`.flex-row-reverse`	sets flex-direction to row-reverse	`.flex`
`.flex-column-reverse`	sets flex-direction to column-reverse	`.flex`
`.flex-basis-auto`	sets flex-basis property to auto	`.flex`

Display

Class Name	Usage	Required
`.display-none`	hides element with display none
`.display-block`	shows element with display block
`.display-inline-block`	shows element with display inline block
`.display-inline`	shows element with display inline
`.hidden-{breakpoints}`	hides element with display none
`.invisible-{breakpoints}`	hides element with visibility hidden and opacity 0
`.visible-{breakpoints}`	makes element visible and sets opacity to 1

Position

Class Name	Usage	Required
`.position-fixed`	positions element with position fixed
`.position-fixed-br`	positions element to bottom right of page with position fixed
`.position-fixed-tr`	positions element to top right of page with position fixed
`.position-fixed-bl`	positions element to bottom left of page with position fixed
`.position-fixed-tl`	positions to top left of page element with position fixed
`.position-relative`	positions element with position relative
`.position-absolute`	positions element with position absolute
`.position-absolute-br`	positions element to bottom right of page with position absolute
`.position-absolute-bl`	positions element to bottom left of page with position absolute
`.position-absolute-tr`	positions element to top right of page with position absolute
`.position-absolute-tl`	positions element to top left of page with position absolute

Alignment

Class Name	Usage	Required
`.valign-top`	vertically aligns inline element or cell content to the top
`.valign-middle`	vertically aligns inline element or cell content to the middle
`.valign-bottom`	vertically aligns inline element or cell content to the bottom

Float

Class Name	Usage	Required
`.float-left`	floats element left
`.float-right`	floats element right
`.pull-left-{breakpoints}`	floats element left at breakpoint
`.pull-right-{breakpoints}`	floats element right at breakpoint
`.pull-none-{breakpoints}`	prevents element from floating at breakpoint

Sizing

Class Name	Usage	Required
`.fluid-{breakpoints}`	sizes element to be fluid width at the specified breakpoint direction
`.width-auto`	sets container width to be automatic
`.width-full`	sets container width to be 100%
`.height-auto`	sets container height to be automatic
`.height-full`	sets container height to be 100%

Style

Class Name	Usage	Required
`.no-scroll`	sets element overflow to hidden
`.scroll-x-{breakpoints}`	sets element overflow-x to scroll at the specified breakpoint direction
`.scroll-y-{breakpoints}`	sets element overflow-y to scroll at the specified breakpoint direction
`.transparent`	sets element background to transparent and removes border
`.bg-none`	sets element background to none
`.inverted`	sets element text to white and background to Gray 06

Accessibility

Class Name	Usage	Required
`.sr-only`	for elements only intended for screen readers
`.speak-individual`	sets screen reader speak to spell-out

Padding

Default padding size is 20px (1.250rem)

Class Name	Usage	Required
`.pad-{sides}-{breakpoints}`	sets padding to default (20px)
`.pad-0-{sides}-{breakpoints}`	sets padding to 0
`.pad-1-{sides}-{breakpoints}`	sets padding to 10px
`.pad-2-{sides}-{breakpoints}`	sets padding to 20px
`.pad-3-{sides}-{breakpoints}`	sets padding to 30px
`.pad-4-{sides}-{breakpoints}`	sets padding to 40px

Responsive Padding

Class Name	Usage	Required
`.pad-responsive-{sides}`	sets padding to 10px at x-small breakpoint, 12px at small breakpoint, 18px at medium breakpoint, and 20px at large breakpoint
`.pad-responsive-extra-{sides}`	sets responsive padding to 12px at x-small breakpoint, 18px at small breakpoint, 36px at medium breakpoint, and 40px at large breakpoint

Margins

Default margin size is 20px (1.250rem)

Class Name	Usage	Required
`.margin-{sides}-{breakpoints}`	sets margin to default (20px)
`.margin-0-{sides}-{breakpoints}`	sets margin to 0
`.margin-1-{sides}-{breakpoints}`	sets margin to 10px
`.margin-2-{sides}-{breakpoints}`	sets margin to 20px
`.margin-3-{sides}-{breakpoints}`	sets margin to 30px
`.margin-4-{sides}-{breakpoints}`	sets margin to 40px
`.margin-auto-{sides}-{breakpoints}`	sets margins to auto
`.margin-center-{breakpoints}`	centers an element by adding margin: 0 auto
`.stack-{breakpoints}`	adds 20px margin-bottom to all child elements except for last
`.stack-1`	adds 10px margin-bottom to all child elements except for last
`.stack-3`	adds 30px margin-bottom to all child elements except for last
`.stack-a`	adds 20px margin-bottom to all child elements
`.stack-1-a`	adds 10px margin-bottom to all child elements
`.stack-3-a`	adds 30px margin-bottom to all child elements
`.stack-r`	adds 20px margin-right to all child elements except for last
`.stack-1-r`	adds 10px margin-right to all child elements except for last
`.stack-3-r`	adds 30px margin-right to all child elements except for last

Responsive Margin

Class Name	Usage	Required
`.margin-responsive-{sides}`	sets margin to 10px at x-small breakpoint, 12px at small breakpoint, 18px at medium breakpoint, and 20px at large breakpoint
`.stack-responsive`	adds responsive margin-bottom to all child elements except for last
`.stack-responsive-a`	adds responsive margin-bottom to all child elements
`.stack-responsive-r`	adds responsive margin-right to all child elements except for last

Focus

Focus outline

Class Name	Usage	Required
`.focus-light`	Style the outline of a focus-able element on dark backgrounds
`.focus-dark`	Style the outline of a focus-able element on light backgrounds
`.focus-light-inner`	Style the outline of a focus-able element on dark backgrounds to be inside the component
`.focus-dark-inner`	Style the outline of a focus-able element on light backgrounds
`a.link-white-focus`	Apply to an anchor element to style the outline on dark backgrounds	parent with `.inverted` class

Responsive Focus Outline

Class Name	Usage	Required
`.focus-light-{breakpoints}-up`	Style the outline of a focus-able element on dark backgrounds when above media breakpoint
`.focus-light-{breakpoints}-down`	Style the outline of a focus-able element on dark backgrounds when below media breakpoint

Shadows

Class Name	Usage	Required
`.shadow-1`	sets a box-shadow of 0 1px 1px 0 rgba(0, 0, 0, 0.1)
`.shadow-2`	sets a box-shadow of 0 5px 10px 0 rgba(0, 0, 0, 0.1)
`.shadow-3`	sets a box-shadow of 0 13px 26px 0 rgba(0, 0, 0, 0.1)

Animations

Class Name	Usage	Required
`.anim-fade-in`	fades the element in
`.anim-fade-out`	fades the element out
`.anim-slide-up`	fades the element in and slides it upwards
`.anim-slide-down`	fades the element in and slides it downwards
`.anim-slide-from-left`	fades the element in and slides from left to right
`.anim-slide-from-right`	fades the element in and slides from right to left
`.anim-delay-1`	Delays the animation by 100ms
`.anim-delay-2`	Delays the animation by 200ms
`.anim-delay-3`	Delays the animation by 300ms
`.anim-delay-4`	Delays the animation by 400ms
`.anim-delay-5`	Delays the animation by 500ms
`.anim-delay-6`	Delays the animation by 600ms
`.anim-delay-7`	Delays the animation by 700ms
`.anim-delay-8`	Delays the animation by 800ms
`.anim-delay-9`	Delays the animation by 900ms
`.anim-delay-10`	Delays the animation by 1000ms
`.anim-none`	Removes transition animations from element

React Animation Classes

Class Name	Usage	Required
`.anim-fade-enter`	Sets the element's initial opacity to 0	.anim-fade
`.anim-fade-enter-active`	Transitions the element from 0 opacity to 1 opacity	.anim-fade
`.anim-fade-leave`	Sets the element's initial opacity to 1	.anim-fade
`.ainm-fade-leave-active`	Transitions the element from 1 opacity to 0 opacity	.anim-fade
`.anim-slide-u-enter`	Sets the element's initial opacity to 0 and initial Y translation to 50	.anim-slide-u
`.anim-slide-u-enter-active`	Updates the element's initial opacity to 1 and initial Y translation to 0	.anim-slide-u
`.anim-slide-u-leave`	Sets the element's initial opacity to 1 and initial Y translation to 0	.anim-slide-u
`.anim-slide-u-leave-active`	Updates the element's initial opacity to 0 and initial Y translation to 50	.anim-slide-u
`.anim-slide-d-enter`	Sets the element's initial opacity to 0 and initial Y translation to -50	.anim-slide-d
`.anim-slide-d-enter-active`	Updates the element's initial opacity to 1 and initial Y translation to 0	.anim-slide-d
`.anim-slide-d-leave`	Sets the element's initial opacity to 1 and initial Y translation to 0	.anim-slide-d
`.anim-slide-d-leave-active`	Updates the element's initial opacity to 0 and initial Y translation to -50	.anim-slide-d
`.anim-slide-l-enter`	Sets the element's initial opacity to 0 and initial X translation to -50	.anim-slide-l
`.anim-slide-l-enter-active`	Updates the element's initial opacity to 1 and initial X translation to 0	.anim-slide-l
`.anim-slide-l-leave`	Sets the element's initial opacity to 1 and initial X translation to 0	.anim-slide-l
`.slide-l-leave-active`	Updates the element's initial opacity to 0 and initial X translation to -50	.anim-slide-l
`.anim-slide-r-enter`	Sets the element's initial opacity to 0 and initial X translation to 50	.anim-slide-r
`.anim-slide-r-enter-active`	Updates the element's initial opacity to 1 and initial X translation to 0	.anim-slide-r
`.anim-slide-r-leave`	Sets the element's initial opacity to 1 and initial X translation to 0	.anim-slide-r
`.anim-slide-r-leave-active`	Updates the element's initial opacity to 0 and initial X translation to 50	.anim-slide-r

Optional Modifiers for Utility Classes

Utility class modifiers allow you to customize where and when certain styles get applied. Note that only certain utilities have the option to be modified, please refer to the sections above as a guide.

Example

Class Name	Usage
`.margin`	Adds default margin (20px) to all sides at all breakpoints.
`.margin-l`	Adds default margin (20px) to the left at all breakpoints.
`.margin-md-up`	Adds margin (20px) to all sides at the medium breakpoint and larger.
`.margin-l-md-up`	Adds margin (20px) to the left at the medium breakpoint and larger.

All options

Breakpoint options	Usage
`-xs-up`	Applies style to xs breakpoint and up
`-xs-down`	Applies style to xs breakpoint and down
`-sm-up`	Applies style to sm breakpoint and up
`-sm-down`	Applies style to sm breakpoint and down
`-md-up`	Applies style to md breakpoint and up
`-md-down`	Applies style to md breakpoint and down
`-lg-up`	Applies style to lg breakpoint and up
`-lg-down`	Applies style to lg breakpoint and down
`-xl-up`	Applies style to xl breakpoint and up
`-xl-down`	Applies style to xl breakpoint and down

Side options	Usage
`-t`	Applies style to top side of element
`-b`	Applies style to bottom side of element
`-l`	Applies style to left side of element
`-r`	Applies style to right side of element
`-tb`	Applies style to top and bottom sides of element
`-lr`	Applies style to left and right sides of element