Utilities

# Loading Utility Classes

Cedar utility classes are compiled into multiple files that must be loaded before they can be used. See Getting Started as a Developer Guide for more information.

Alignment

.cdr-align-text-left

Sets text alignment to left. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: text-align: left !important;

.cdr-align-text-center

Sets text alignment to center. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: text-align: center !important;

.cdr-align-text-right

Sets text alignment to right. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: text-align: right !important;

.cdr-align-text-justify

Sets text alignment to justify. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: text-align: justify !important;

.cdr-align-center-block

Sets element to block display and centers it. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: display: block; margin-left: auto; margin-right: auto;

Spacing

Inset

.cdr-space-inset-eighth-x

Adds inset padding. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding: 0.2rem !important;

.cdr-space-inset-quarter-x

Adds inset padding. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding: 0.4rem !important;

.cdr-space-inset-half-x

Adds inset padding. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding: 0.8rem !important;

.cdr-space-inset-three-quarter-x

Adds inset padding. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding: 1.2rem !important;

.cdr-space-inset-one-x

Adds inset padding. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding: 1.6rem !important;

.cdr-space-inset-one-and-a-half-x

Adds inset padding. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding: 2.4rem !important;

.cdr-space-inset-two-x

Adds inset padding. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding: 3.2rem !important;

.cdr-space-inset-four-x

Adds inset padding. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding: 6.4rem !important;

.cdr-space-inset-eighth-x-squish

Adds inset padding. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding: 0 0.2rem !important;

.cdr-space-inset-eighth-x-stretch

Adds inset padding. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding: 0.4rem 0.2rem !important;

.cdr-space-inset-quarter-x-squish

Adds inset padding. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding: 0.2rem 0.4rem !important;

.cdr-space-inset-quarter-x-stretch

Adds inset padding. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding: 0.6rem 0.4rem !important;

.cdr-space-inset-half-x-squish

Adds inset padding. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding: 0.4rem 0.8rem !important;

.cdr-space-inset-half-x-stretch

Adds inset padding. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding: 1.2rem 0.8rem !important;

.cdr-space-inset-three-quarter-x-squish

Adds inset padding. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding: 0.6rem 1.2rem !important;

.cdr-space-inset-three-quarter-x-stretch

Adds inset padding. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding: 1.8rem 1.2rem !important;

.cdr-space-inset-one-x-squish

Adds inset padding. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding: 0.8rem 1.6rem !important;

.cdr-space-inset-one-x-stretch

Adds inset padding. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding: 2.4rem 1.6rem !important;

.cdr-space-inset-one-and-a-half-x-squish

Adds inset padding. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding: 1.2rem 2.4rem !important;

.cdr-space-inset-one-and-a-half-x-stretch

Adds inset padding. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding: 3.6rem 2.4rem !important;

.cdr-space-inset-two-x-squish

Adds inset padding. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding: 1.6rem 3.2rem !important;

.cdr-space-inset-two-x-stretch

Adds inset padding. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding: 4.8rem 3.2rem !important;

.cdr-space-inset-four-x-squish

Adds inset padding. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding: 3.2rem 6.4rem !important;

.cdr-space-inset-four-x-stretch

Adds inset padding. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding: 9.6rem 6.4rem !important;

Margin

Bottom

.cdr-mb-space-eighth-x

Adds margin to bottom. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: margin-bottom: 0.2rem !important;

.cdr-mb-space-quarter-x

Adds margin to bottom. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: margin-bottom: 0.4rem !important;

.cdr-mb-space-half-x

Adds margin to bottom. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: margin-bottom: 0.8rem !important;

.cdr-mb-space-three-quarter-x

Adds margin to bottom. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: margin-bottom: 1.2rem !important;

.cdr-mb-space-one-x

Adds margin to bottom. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: margin-bottom: 1.6rem !important;

.cdr-mb-space-one-and-a-half-x

Adds margin to bottom. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: margin-bottom: 2.4rem !important;

.cdr-mb-space-two-x

Adds margin to bottom. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: margin-bottom: 3.2rem !important;

.cdr-mb-space-four-x

Adds margin to bottom. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: margin-bottom: 6.4rem !important;

Left

.cdr-ml-space-eighth-x

Adds margin to left. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: margin-left: 0.2rem !important;

.cdr-ml-space-quarter-x

Adds margin to left. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: margin-left: 0.4rem !important;

.cdr-ml-space-half-x

Adds margin to left. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: margin-left: 0.8rem !important;

.cdr-ml-space-three-quarter-x

Adds margin to left. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: margin-left: 1.2rem !important;

.cdr-ml-space-one-x

Adds margin to left. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: margin-left: 1.6rem !important;

.cdr-ml-space-one-and-a-half-x

Adds margin to left. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: margin-left: 2.4rem !important;

.cdr-ml-space-two-x

Adds margin to left. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: margin-left: 3.2rem !important;

.cdr-ml-space-four-x

Adds margin to left. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: margin-left: 6.4rem !important;

Right

.cdr-mr-space-eighth-x

Adds margin to right. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: margin-right: 0.2rem !important;

.cdr-mr-space-quarter-x

Adds margin to right. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: margin-right: 0.4rem !important;

.cdr-mr-space-half-x

Adds margin to right. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: margin-right: 0.8rem !important;

.cdr-mr-space-three-quarter-x

Adds margin to right. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: margin-right: 1.2rem !important;

.cdr-mr-space-one-x

Adds margin to right. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: margin-right: 1.6rem !important;

.cdr-mr-space-one-and-a-half-x

Adds margin to right. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: margin-right: 2.4rem !important;

.cdr-mr-space-two-x

Adds margin to right. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: margin-right: 3.2rem !important;

.cdr-mr-space-four-x

Adds margin to right. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: margin-right: 6.4rem !important;

Top

.cdr-mt-space-eighth-x

Adds margin to top. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: margin-top: 0.2rem !important;

.cdr-mt-space-quarter-x

Adds margin to top. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: margin-top: 0.4rem !important;

.cdr-mt-space-half-x

Adds margin to top. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: margin-top: 0.8rem !important;

.cdr-mt-space-three-quarter-x

Adds margin to top. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: margin-top: 1.2rem !important;

.cdr-mt-space-one-x

Adds margin to top. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: margin-top: 1.6rem !important;

.cdr-mt-space-one-and-a-half-x

Adds margin to top. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: margin-top: 2.4rem !important;

.cdr-mt-space-two-x

Adds margin to top. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: margin-top: 3.2rem !important;

.cdr-mt-space-four-x

Adds margin to top. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: margin-top: 6.4rem !important;

X

.cdr-mx-space-eighth-x

Adds margin to left and right. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: margin-left: 0.2rem !important; margin-right: 0.2rem !important;

.cdr-mx-space-quarter-x

Adds margin to left and right. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: margin-left: 0.4rem !important; margin-right: 0.4rem !important;

.cdr-mx-space-half-x

Adds margin to left and right. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: margin-left: 0.8rem !important; margin-right: 0.8rem !important;

.cdr-mx-space-three-quarter-x

Adds margin to left and right. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: margin-left: 1.2rem !important; margin-right: 1.2rem !important;

.cdr-mx-space-one-x

Adds margin to left and right. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: margin-left: 1.6rem !important; margin-right: 1.6rem !important;

.cdr-mx-space-one-and-a-half-x

Adds margin to left and right. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: margin-left: 2.4rem !important; margin-right: 2.4rem !important;

.cdr-mx-space-two-x

Adds margin to left and right. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: margin-left: 3.2rem !important; margin-right: 3.2rem !important;

.cdr-mx-space-four-x

Adds margin to left and right. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: margin-left: 6.4rem !important; margin-right: 6.4rem !important;

Y

.cdr-my-space-eighth-x

Adds margin to top and bottom. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: margin-top: 0.2rem !important; margin-bottom: 0.2rem !important;

.cdr-my-space-quarter-x

Adds margin to top and bottom. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: margin-top: 0.4rem !important; margin-bottom: 0.4rem !important;

.cdr-my-space-half-x

Adds margin to top and bottom. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: margin-top: 0.8rem !important; margin-bottom: 0.8rem !important;

.cdr-my-space-three-quarter-x

Adds margin to top and bottom. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: margin-top: 1.2rem !important; margin-bottom: 1.2rem !important;

.cdr-my-space-one-x

Adds margin to top and bottom. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: margin-top: 1.6rem !important; margin-bottom: 1.6rem !important;

.cdr-my-space-one-and-a-half-x

Adds margin to top and bottom. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: margin-top: 2.4rem !important; margin-bottom: 2.4rem !important;

.cdr-my-space-two-x

Adds margin to top and bottom. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: margin-top: 3.2rem !important; margin-bottom: 3.2rem !important;

.cdr-my-space-four-x

Adds margin to top and bottom. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: margin-top: 6.4rem !important; margin-bottom: 6.4rem !important;

Padding

Bottom

.cdr-pb-space-eighth-x

Adds padding to bottom. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding-bottom: 0.2rem !important;

.cdr-pb-space-quarter-x

Adds padding to bottom. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding-bottom: 0.4rem !important;

.cdr-pb-space-half-x

Adds padding to bottom. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding-bottom: 0.8rem !important;

.cdr-pb-space-three-quarter-x

Adds padding to bottom. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding-bottom: 1.2rem !important;

.cdr-pb-space-one-x

Adds padding to bottom. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding-bottom: 1.6rem !important;

.cdr-pb-space-one-and-a-half-x

Adds padding to bottom. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding-bottom: 2.4rem !important;

.cdr-pb-space-two-x

Adds padding to bottom. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding-bottom: 3.2rem !important;

.cdr-pb-space-four-x

Adds padding to bottom. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding-bottom: 6.4rem !important;

Left

.cdr-pl-space-eighth-x

Adds padding to left. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding-left: 0.2rem !important;

.cdr-pl-space-quarter-x

Adds padding to left. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding-left: 0.4rem !important;

.cdr-pl-space-half-x

Adds padding to left. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding-left: 0.8rem !important;

.cdr-pl-space-three-quarter-x

Adds padding to left. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding-left: 1.2rem !important;

.cdr-pl-space-one-x

Adds padding to left. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding-left: 1.6rem !important;

.cdr-pl-space-one-and-a-half-x

Adds padding to left. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding-left: 2.4rem !important;

.cdr-pl-space-two-x

Adds padding to left. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding-left: 3.2rem !important;

.cdr-pl-space-four-x

Adds padding to left. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding-left: 6.4rem !important;

Right

.cdr-pr-space-eighth-x

Adds padding to right. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding-right: 0.2rem !important;

.cdr-pr-space-quarter-x

Adds padding to right. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding-right: 0.4rem !important;

.cdr-pr-space-half-x

Adds padding to right. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding-right: 0.8rem !important;

.cdr-pr-space-three-quarter-x

Adds padding to right. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding-right: 1.2rem !important;

.cdr-pr-space-one-x

Adds padding to right. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding-right: 1.6rem !important;

.cdr-pr-space-one-and-a-half-x

Adds padding to right. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding-right: 2.4rem !important;

.cdr-pr-space-two-x

Adds padding to right. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding-right: 3.2rem !important;

.cdr-pr-space-four-x

Adds padding to right. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding-right: 6.4rem !important;

Top

.cdr-pt-space-eighth-x

Adds padding to top. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding-top: 0.2rem !important;

.cdr-pt-space-quarter-x

Adds padding to top. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding-top: 0.4rem !important;

.cdr-pt-space-half-x

Adds padding to top. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding-top: 0.8rem !important;

.cdr-pt-space-three-quarter-x

Adds padding to top. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding-top: 1.2rem !important;

.cdr-pt-space-one-x

Adds padding to top. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding-top: 1.6rem !important;

.cdr-pt-space-one-and-a-half-x

Adds padding to top. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding-top: 2.4rem !important;

.cdr-pt-space-two-x

Adds padding to top. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding-top: 3.2rem !important;

.cdr-pt-space-four-x

Adds padding to top. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding-top: 6.4rem !important;

X

.cdr-px-space-eighth-x

Adds padding to left and right. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding-left: 0.2rem !important; padding-right: 0.2rem !important;

.cdr-px-space-quarter-x

Adds padding to left and right. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding-left: 0.4rem !important; padding-right: 0.4rem !important;

.cdr-px-space-half-x

Adds padding to left and right. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding-left: 0.8rem !important; padding-right: 0.8rem !important;

.cdr-px-space-three-quarter-x

Adds padding to left and right. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding-left: 1.2rem !important; padding-right: 1.2rem !important;

.cdr-px-space-one-x

Adds padding to left and right. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding-left: 1.6rem !important; padding-right: 1.6rem !important;

.cdr-px-space-one-and-a-half-x

Adds padding to left and right. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding-left: 2.4rem !important; padding-right: 2.4rem !important;

.cdr-px-space-two-x

Adds padding to left and right. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding-left: 3.2rem !important; padding-right: 3.2rem !important;

.cdr-px-space-four-x

Adds padding to left and right. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding-left: 6.4rem !important; padding-right: 6.4rem !important;

Y

.cdr-py-space-eighth-x

Adds padding to top and bottom. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding-top: 0.2rem !important; padding-bottom: 0.2rem !important;

.cdr-py-space-quarter-x

Adds padding to top and bottom. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding-top: 0.4rem !important; padding-bottom: 0.4rem !important;

.cdr-py-space-half-x

Adds padding to top and bottom. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding-top: 0.8rem !important; padding-bottom: 0.8rem !important;

.cdr-py-space-three-quarter-x

Adds padding to top and bottom. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding-top: 1.2rem !important; padding-bottom: 1.2rem !important;

.cdr-py-space-one-x

Adds padding to top and bottom. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding-top: 1.6rem !important; padding-bottom: 1.6rem !important;

.cdr-py-space-one-and-a-half-x

Adds padding to top and bottom. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding-top: 2.4rem !important; padding-bottom: 2.4rem !important;

.cdr-py-space-two-x

Adds padding to top and bottom. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding-top: 3.2rem !important; padding-bottom: 3.2rem !important;

.cdr-py-space-four-x

Adds padding to top and bottom. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: padding-top: 6.4rem !important; padding-bottom: 6.4rem !important;

Visibility

.cdr-display-none

Sets display to none. Append [@xs, @sm, @md, @lg, or @print] to make responsive.

Value: display: none !important; visibility: hidden !important;

.cdr-display-hidden

Sets visibility to hidden. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: visibility: hidden !important;

.cdr-display-block

Sets display to block. Append [@xs, @sm, @md, @lg, or @print] to make responsive.

Value: visibility: visible !important; display: block !important;

.cdr-display-inline

Sets display to inline. Append [@xs, @sm, @md, @lg, or @print] to make responsive.

Value: visibility: visible !important; display: inline !important;

.cdr-display-inline-block

Sets display to inline-block. Append [@xs, @sm, @md, @lg, or @print] to make responsive.

Value: visibility: visible !important; display: inline-block !important;

.cdr-display-flex

Sets display to flex. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: visibility: visible !important; display: flex !important;

.cdr-display-inline-flex

Sets display to inline-flex. Append [@xs, @sm, @md, or @lg] to make responsive.

Value: visibility: visible !important; display: inline-flex !important;

.cdr-display-sr-only

Text for screen reader only.

Value: position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;

.cdr-display-sr-focusable

Text for screen reader only, focusable for navigation landmarks, etc.

Value: position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;