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.

Note that in order to use 1 utility class you must load all of the utility classes in that same file. This may impact your bundle size if loading the larger utility class files such as cdr-text and cdr-space. All of the utility classes correspond to either a cedar token (cdr-color-text-primary), a mixin (cdr-text-default), or a simple CSS value (display: none). If your project depends on performance it may be better to apply those tokens, mixins, and styles to your CSS directly rather than using the utility classes. In general, reusable shared components should avoid using the utility classes to provide the most flexibility to their consumers.

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;

Color

Background

.cdr-color-background-primary

Sets background color to $cdr-color-background-primary

Value: background-color: #ffffff;

.cdr-color-background-secondary

Sets background color to $cdr-color-background-secondary

Value: background-color: #f4f2ed;

.cdr-color-background-success

Sets background color to $cdr-color-background-success

Value: background-color: #ecf9e6;

.cdr-color-background-warning

Sets background color to $cdr-color-background-warning

Value: background-color: #fdf6e2;

.cdr-color-background-error

Sets background color to $cdr-color-background-error

Value: background-color: #fcefe8;

.cdr-color-background-info

Sets background color to $cdr-color-background-info

Value: background-color: #e2f4fe;

Text

.cdr-color-text-primary

Sets text color to $cdr-color-text-primary

Value: color: rgba(12, 11, 8, 0.75);

.cdr-color-text-secondary

Sets text color to $cdr-color-text-secondary

Value: color: rgba(66, 59, 47, 0.75);

.cdr-color-text-brand

Sets text color to $cdr-color-text-brand

Value: color: #113731;

.cdr-color-text-sale

Sets text color to $cdr-color-text-sale

Value: color: #cc0000;

.cdr-color-text-inverse

Sets text color to $cdr-color-text-inverse

Value: color: #f9f8f6;

.cdr-color-text-disabled

Sets text color to $cdr-color-text-disabled

Value: color: #d1cbbd;

.cdr-color-text-success

Sets text color to $cdr-color-text-success

Value: color: #2e6b34;

.cdr-color-text-warning

Sets text color to $cdr-color-text-warning

Value: color: #854714;

.cdr-color-text-error

Sets text color to $cdr-color-text-error

Value: color: #811823;

.cdr-color-text-info

Sets text color to $cdr-color-text-info

Value: color: #1b437e;

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-three-x

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

Value: padding: 4.8rem !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-three-x-squish

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

Value: padding: 2.4rem 4.8rem !important;

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

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

Value: padding: 7.2rem 4.8rem !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-three-x

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

Value: margin-bottom: 4.8rem !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-three-x

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

Value: margin-left: 4.8rem !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-three-x

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

Value: margin-right: 4.8rem !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-three-x

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

Value: margin-top: 4.8rem !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-three-x

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

Value: margin-left: 4.8rem !important; margin-right: 4.8rem !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-three-x

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

Value: margin-top: 4.8rem !important; margin-bottom: 4.8rem !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-three-x

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

Value: padding-bottom: 4.8rem !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-three-x

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

Value: padding-left: 4.8rem !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-three-x

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

Value: padding-right: 4.8rem !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-three-x

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

Value: padding-top: 4.8rem !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-three-x

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

Value: padding-left: 4.8rem !important; padding-right: 4.8rem !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-three-x

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

Value: padding-top: 4.8rem !important; padding-bottom: 4.8rem !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;