Utility Classes

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

On this page

    Typography

    Utility ClassStyle
    .bodyfont-size: 1rem font-weight: 400 line-height: 1.5rem
    .body-boldfont-size: 1rem font-weight: 700 line-height: 1.5rem
    .body-1font-size: 0.875rem font-weight: 400 line-height: 1.375rem
    .body-2font-size: 0.875rem font-weight: 700 line-height: 1.375rem
    .body-3font-size: 1rem font-weight: 400 line-height: 1.5rem
    .legal-1font-size: 0.75rem font-weight: 400 line-height: 1.125rem
    .legal-2font-size: 0.75rem font-weight: 700 line-height: 1.125rem
    .font-sans-large-bookfont-family: "BentonSans" font-size: 3.5rem font-weight: 400 line-height: 4rem
    .font-sans-large-boldfont-family: "BentonSans" font-size: 3.5rem font-weight: 700 line-height: 4rem
    .font-sans-medium-bookfont-family: "BentonSans" font-size: 3rem font-weight: 400 line-height: 3.5rem
    .font-sans-medium-boldfont-family: "BentonSans" font-size: 3rem font-weight: 700 line-height: 3.5rem
    .font-serif-large-regularfont-family: "Guardian" font-size: 3.5rem font-weight: 400 line-height: 4rem
    .font-serif-large-boldfont-family: "Guardian" font-size: 3.5rem font-weight: 700 line-height: 4rem
    .font-serif-medium-regularfont-family: "Guardian" font-size: 3rem font-weight: 400 line-height: 3.5rem
    .font-serif-medium-boldfont-family: "Guardian" font-size: 3rem font-weight: 700 line-height: 3.5rem
    .heading-sans-large-bookfont-family: "BentonSans" font-size: 2rem font-weight: 400 line-height: 2.5rem
    .heading-sans-large-boldfont-family: "BentonSans" font-size: 2rem font-weight: 700 line-height: 2.5rem
    .heading-sans-medium-regularfont-family: "BentonSans" font-size: 1.5rem font-weight: 400 line-height: 2rem
    .heading-sans-medium-boldfont-family: "BentonSans" font-size: 1.5rem font-weight: 700 line-height: 2rem
    .heading-serif-large-regularfont-family: "Guardian" font-size: 2rem font-weight: 400 line-height: 2.5rem
    .heading-serif-large-boldfont-family: "Guardian" font-size: 2rem font-weight: 700 line-height: 2.5rem
    .heading-serif-medium-regularfont-family: "Guardian" font-size: 1.5rem font-weight: 400 line-height: 2rem
    .heading-serif-medium-boldfont-family: "Guardian" font-size: 1.5rem font-weight: 700 line-height: 2rem
    .heading-1font-weight: 600 font-size: 0.8125rem line-height: 1.125rem text-transform: uppercase
    .heading-2font-weight: 600 font-size: 0.9375rem line-height: 1.375rem
    .heading-3font-family: "BentonSans" font-size: 1rem font-weight: 700 line-height: 1.5rem
    .heading-4font-family: "BentonSans" font-size: 1.25rem font-weight: 400 line-height: 1.75rem
    .heading-5font-family: "BentonSans" font-size: 2rem font-weight: 400 line-height: 2.5rem
    .heading-6font-family: "BentonSans" font-size: 2.25rem font-weight: 400 line-height: 2.75rem
    .heading-5-gfont-family: "Guardian" font-size: 2rem font-weight: 400 line-height: 2.5rem
    .heading-4-gfont-family: "Guardian" font-size: 1.5rem font-weight: 700 line-height: 2rem
    .label, .label-1, .label-2, .label-3font-weight: 500 font-size: 1rem line-height: 1.5rem color: var(--ds-446, #3d3d3d) cursor: inherit margin-block-end: 0
    .font-weight-normalfont-weight: normal
    .font-weight-mediumfont-weight: 500
    .font-weight-boldfont-weight: 700
    .font-italicfont-style: italic
    .text-justifytext-align: justify
    .text-nowrapwhite-space: nowrap
    .text-wrapword-wrap: break-word white-space: normal
    .text-prewrapword-wrap: break-word white-space: pre-wrap
    .text-truncateoverflow: hidden text-overflow: ellipsis white-space: nowrap
    .text-lowercasetext-transform: lowercase
    .text-uppercasetext-transform: uppercase
    .text-capitalizetext-transform: capitalize
    .text-underlinetext-decoration: underline
    .text-neutralcolor: #737373
    .text-align
    .text-align-lefttext-align: start
    .text-align-centertext-align: center
    .text-align-righttext-align: end

    Layout

    Utility ClassStyle
    .flexdisplay: flex
    .flex-inlinedisplay: inline-flex min-width: 0
    .flex-align-stretchalign-items: stretch
    .flex-align-centeralign-items: center
    .flex-align-startalign-items: flex-start
    .flex-align-endalign-items: flex-end
    .flex-align-baselinealign-items: baseline
    .flex-align-content-startalign-content: flex-start
    .flex-align-content-endalign-content: flex-end
    .flex-align-content-centeralign-content: center
    .flex-align-content-betweenalign-content: space-between
    .flex-align-content-aroundalign-content: space-around
    .flex-align-content-stretchalign-content: stretch
    .flex-align-items-centeralign-items: center
    .flex-align-items-startalign-items: flex-start
    .flex-align-items-endalign-items: flex-end
    .flex-align-items-baselinealign-items: baseline
    .flex-align-items-stretchalign-items: stretch
    .flex-align-self-centeralign-self: center
    .flex-align-self-startalign-self: flex-start
    .flex-align-self-endalign-self: flex-end
    .flex-align-self-baselinealign-self: baseline
    .flex-align-self-stretchalign-self: stretch
    .flex-basis-autoflex-basis: auto
    .flex-justify-startjustify-content: flex-start
    .flex-justify-centerjustify-content: center
    .flex-justify-endjustify-content: flex-end
    .flex-justify-betweenjustify-content: space-between
    .flex-justify-aroundjustify-content: space-around
    .flex-wrapflex-wrap: wrap
    .flex-no-wrapflex-wrap: nowrap
    .flex-reverse-wrapflex-wrap: wrap-reverse
    .flex-item-growflex-grow: 1
    .flex-item-shrinkflex-shrink: 0
    .flex-rowflex-direction: row
    .flex-row-reverseflex-direction: row-reverse
    .flex-columnflex-direction: column
    .flex-column-reverseflex-direction: column-reverse
    .container, .container-fluid, .container-responsivemargin-inline: auto width: 100% min-width: 320px max-width: 100% padding-inline: 16px
    .container, .container-fluid, .container-responsivemax-width: 1440px
    .container, .container-fluid, .container-responsivepadding-inline: 16px
    .container, .container-fluid, .container-responsivepadding-inline: 16px
    .container, .container-fluid, .container-responsivepadding-inline: 24px
    .container, .container-fluid, .container-responsivepadding-inline: 32px
    .container, .container-fluid, .container-responsivepadding-inline: 40px
    .container, .container-fluid, .container-responsivepadding-inline: 40px
    .rowdisplay: flex flex-wrap: wrap align-items: stretch margin-inline: -6px
    .rowmargin-inline: -6px
    .rowmargin-inline: -8px
    .rowmargin-inline: -8px
    .rowmargin-inline: -12px
    .rowmargin-inline: -12px
    .rowmargin-inline: -16px
    .colposition: relative flex: 0 0 100% max-width: 100% min-height: 1px
    .colpadding-inline: 6px
    .colpadding-inline: 6px
    .colpadding-inline: 8px
    .colpadding-inline: 8px
    .colpadding-inline: 12px
    .colpadding-inline: 12px
    .colpadding-inline: 16px

    Animation

    Utility ClassStyle
    .anim-nonetransition: none animation-duration: 0s animation-iteration-count: 0
    .anim-fadeopacity: 0 transition: opacity 0.15s will-change: opacity
    .anim-fade.in, .anim-fade-leaveopacity: 1
    .anim-fade-enteropacity: 0
    .anim-fade-tooltipopacity: 0 transition: opacity 0.15s will-change: opacity
    .anim-fade-tooltip.inopacity: 1
    .anim-fade-inopacity: 0 animation-name: fadein animation-duration: 0.7s animation-timing-function: ease animation-fill-mode: forwards
    .anim-fade-outopacity: 1 animation-name: fadeout animation-duration: 0.7s animation-timing-function: ease animation-fill-mode: forwards
    .anim-fade-enter.anim-fade-enter-active, .anim-fade-leave.anim-fade-leave-activeopacity: 1 transition: opacity 0.7s ease
    .anim-slide-upopacity: 0 animation-name: slideup animation-duration: 0.7s animation-timing-function: ease animation-fill-mode: forwards
    .anim-slide-upanimation-duration: 0s
    .anim-slide-downopacity: 0 animation-name: slidedown animation-duration: 0.7s animation-timing-function: ease animation-fill-mode: forwards
    .anim-slide-downanimation-duration: 0s
    .anim-slide-from-leftopacity: 0 animation-name: slidefromleft animation-duration: 0.7s animation-timing-function: ease animation-fill-mode: forwards
    .anim-slide-from-leftanimation-duration: 0s
    .anim-slide-from-rightopacity: 0 animation-name: slidefromright animation-duration: 0.7s animation-timing-function: ease animation-fill-mode: forwards
    .anim-slide-from-rightanimation-duration: 0s
    .anim-slide-u-enteropacity: 0 transform: translateY(50px)
    .anim-slide-u-enter.anim-slide-u-enter-activeopacity: 1 transform: translateY(0) transition: all 0.7s ease
    .anim-slide-u-enter.anim-slide-u-enter-activetransition: all 0s
    .anim-slide-u-leaveopacity: 1 transform: translateY(0)
    .anim-slide-u-leave.anim-slide-u-leave-activeopacity: 0 transform: translateY(50px) transition: all 0.7s ease
    .anim-slide-u-leave.anim-slide-u-leave-activetransition: all 0s
    .anim-slide-d-enteropacity: 0 transform: translateY(-50px)
    .anim-slide-d-enter.anim-slide-d-enter-activeopacity: 1 transform: translateY(0) transition: all 0.7s ease
    .anim-slide-d-enter.anim-slide-d-enter-activetransition: all 0s
    .anim-slide-d-leaveopacity: 1 transform: translateY(0)
    .anim-slide-d-leave.anim-slide-d-leave-activeopacity: 0 transform: translateY(-50px) transition: all 0.7s ease
    .anim-slide-d-leave.anim-slide-d-leave-activetransition: all 0s
    .anim-slide-l-enteropacity: 0 transform: translateX(-50px)
    .anim-slide-l-enter.anim-slide-l-enter-activeopacity: 1 transform: translateX(0) transition: all 0.7s ease
    .anim-slide-l-enter.anim-slide-l-enter-activetransition: all 0s
    .anim-slide-l-leaveopacity: 1 transform: translateX(0)
    .anim-slide-l-leave.anim-slide-l-leave-activeopacity: 0 transform: translateX(-50px) transition: all 0.7s ease-in
    .anim-slide-l-leave.anim-slide-l-leave-activetransition: all 0s
    .anim-slide-r-enteropacity: 0 transform: translateX(50px)
    .anim-slide-r-enter.anim-slide-r-enter-activeopacity: 1 transform: translateX(0) transition: all 0.7s ease
    .anim-slide-r-enter.anim-slide-r-enter-activetransition: all 0s
    .anim-slide-r-leaveopacity: 1 transform: translateX(0)
    .anim-slide-r-leave.anim-slide-r-leave-activeopacity: 0 transform: translateX(50px) transition: all 0.7s ease-in
    .anim-slide-r-leave.anim-slide-r-leave-activetransition: all 0s
    .anim-delay-1animation-delay: 0.1s
    .anim-delay-1animation-delay: 0s
    .anim-delay-2animation-delay: 0.2s
    .anim-delay-2animation-delay: 0s
    .anim-delay-3animation-delay: 0.3s
    .anim-delay-3animation-delay: 0s
    .anim-delay-4animation-delay: 0.4s
    .anim-delay-4animation-delay: 0s
    .anim-delay-5animation-delay: 0.5s
    .anim-delay-5animation-delay: 0s
    .anim-delay-6animation-delay: 0.6s
    .anim-delay-6animation-delay: 0s
    .anim-delay-7animation-delay: 0.7s
    .anim-delay-7animation-delay: 0s
    .anim-delay-8animation-delay: 0.8s
    .anim-delay-8animation-delay: 0s
    .anim-delay-9animation-delay: 0.9s
    .anim-delay-9animation-delay: 0s
    .anim-delay-10animation-delay: 0.1s
    .anim-delay-10animation-delay: 0s
    .anim-slide-upopacity: 0 animation-name: slideup animation-duration: 0.7s animation-timing-function: ease animation-fill-mode: forwards
    .anim-slide-upanimation-duration: 0s
    .anim-slide-downopacity: 0 animation-name: slidedown animation-duration: 0.7s animation-timing-function: ease animation-fill-mode: forwards
    .anim-slide-downanimation-duration: 0s
    .anim-slide-from-leftopacity: 0 animation-name: slidefromleft animation-duration: 0.7s animation-timing-function: ease animation-fill-mode: forwards
    .anim-slide-from-leftanimation-duration: 0s
    .anim-slide-from-rightopacity: 0 animation-name: slidefromright animation-duration: 0.7s animation-timing-function: ease animation-fill-mode: forwards
    .anim-slide-from-rightanimation-duration: 0s
    .anim-slide-u-enteropacity: 0 transform: translateY(50px)
    .anim-slide-u-enter.anim-slide-u-enter-activeopacity: 1 transform: translateY(0) transition: all 0.7s ease
    .anim-slide-u-enter.anim-slide-u-enter-activetransition: all 0s
    .anim-slide-u-leaveopacity: 1 transform: translateY(0)
    .anim-slide-u-leave.anim-slide-u-leave-activeopacity: 0 transform: translateY(50px) transition: all 0.7s ease
    .anim-slide-u-leave.anim-slide-u-leave-activetransition: all 0s
    .anim-slide-d-enteropacity: 0 transform: translateY(-50px)
    .anim-slide-d-enter.anim-slide-d-enter-activeopacity: 1 transform: translateY(0) transition: all 0.7s ease
    .anim-slide-d-enter.anim-slide-d-enter-activetransition: all 0s
    .anim-slide-d-leaveopacity: 1 transform: translateY(0)
    .anim-slide-d-leave.anim-slide-d-leave-activeopacity: 0 transform: translateY(-50px) transition: all 0.7s ease
    .anim-slide-d-leave.anim-slide-d-leave-activetransition: all 0s
    .anim-slide-l-enteropacity: 0 transform: translateX(-50px)
    .anim-slide-l-enter.anim-slide-l-enter-activeopacity: 1 transform: translateX(0) transition: all 0.7s ease
    .anim-slide-l-enter.anim-slide-l-enter-activetransition: all 0s
    .anim-slide-l-leaveopacity: 1 transform: translateX(0)
    .anim-slide-l-leave.anim-slide-l-leave-activeopacity: 0 transform: translateX(-50px) transition: all 0.7s ease-in
    .anim-slide-l-leave.anim-slide-l-leave-activetransition: all 0s
    .anim-slide-r-enteropacity: 0 transform: translateX(50px)
    .anim-slide-r-enter.anim-slide-r-enter-activeopacity: 1 transform: translateX(0) transition: all 0.7s ease
    .anim-slide-r-enter.anim-slide-r-enter-activetransition: all 0s
    .anim-slide-r-leaveopacity: 1 transform: translateX(0)
    .anim-slide-r-leave.anim-slide-r-leave-activeopacity: 0 transform: translateX(50px) transition: all 0.7s ease-in
    .anim-slide-r-leave.anim-slide-r-leave-activetransition: all 0s
    .anim-delay-1animation-delay: 0.1s
    .anim-delay-1animation-delay: 0s
    .anim-delay-2animation-delay: 0.2s
    .anim-delay-2animation-delay: 0s
    .anim-delay-3animation-delay: 0.3s
    .anim-delay-3animation-delay: 0s
    .anim-delay-4animation-delay: 0.4s
    .anim-delay-4animation-delay: 0s
    .anim-delay-5animation-delay: 0.5s
    .anim-delay-5animation-delay: 0s
    .anim-delay-6animation-delay: 0.6s
    .anim-delay-6animation-delay: 0s
    .anim-delay-7animation-delay: 0.7s
    .anim-delay-7animation-delay: 0s
    .anim-delay-8animation-delay: 0.8s
    .anim-delay-8animation-delay: 0s
    .anim-delay-9animation-delay: 0.9s
    .anim-delay-9animation-delay: 0s
    .anim-delay-10animation-delay: 0.1s
    .anim-delay-10animation-delay: 0s

    Spacing

    Utility ClassStyle
    .margin-responsivemargin: 12px
    .margin-responsive-lrmargin-inline: 12px
    .margin-responsive-tbmargin-top: 12px margin-bottom: 12px
    .margin-responsive-tmargin-top: 12px
    .margin-responsive-bmargin-bottom: 12px
    .margin-responsive-lmargin-inline-start: 12px
    .margin-responsive-rmargin-inline-end: 12px
    .margin-responsive-extramargin: 16px
    .margin-responsive-extra-lrmargin-inline: 16px
    .margin-responsive-extra-tbmargin-top: 16px margin-bottom: 16px
    .margin-responsive-extra-tmargin-top: 16px
    .margin-responsive-extra-bmargin-bottom: 16px
    .margin-responsive-extra-lmargin-inline-start: 16px
    .margin-responsive-extra-rmargin-inline-end: 16px
    .margin-responsivemargin: 12px
    .margin-responsive-lrmargin-inline: 12px
    .margin-responsive-tbmargin-top: 12px margin-bottom: 12px
    .margin-responsive-tmargin-top: 12px
    .margin-responsive-bmargin-bottom: 12px
    .margin-responsive-lmargin-inline-start: 12px
    .margin-responsive-rmargin-inline-end: 12px
    .margin-responsive-extramargin: 16px
    .margin-responsive-extra-lrmargin-inline: 16px
    .margin-responsive-extra-tbmargin-top: 16px margin-bottom: 16px
    .margin-responsive-extra-tmargin-top: 16px
    .margin-responsive-extra-bmargin-bottom: 16px
    .margin-responsive-extra-lmargin-inline-start: 16px
    .margin-responsive-extra-rmargin-inline-end: 16px
    .margin-responsivemargin: 16px
    .margin-responsive-lrmargin-inline: 16px
    .margin-responsive-tbmargin-top: 16px margin-bottom: 16px
    .margin-responsive-tmargin-top: 16px
    .margin-responsive-bmargin-bottom: 16px
    .margin-responsive-lmargin-inline-start: 16px
    .margin-responsive-rmargin-inline-end: 16px
    .margin-responsive-extramargin: 24px
    .margin-responsive-extra-lrmargin-inline: 24px
    .margin-responsive-extra-tbmargin-top: 24px margin-bottom: 24px
    .margin-responsive-extra-tmargin-top: 24px
    .margin-responsive-extra-bmargin-bottom: 24px
    .margin-responsive-extra-lmargin-inline-start: 24px
    .margin-responsive-extra-rmargin-inline-end: 24px
    .margin-responsivemargin: 16px
    .margin-responsive-lrmargin-inline: 16px
    .margin-responsive-tbmargin-top: 16px margin-bottom: 16px
    .margin-responsive-tmargin-top: 16px
    .margin-responsive-bmargin-bottom: 16px
    .margin-responsive-lmargin-inline-start: 16px
    .margin-responsive-rmargin-inline-end: 16px
    .margin-responsive-extramargin: 32px
    .margin-responsive-extra-lrmargin-inline: 32px
    .margin-responsive-extra-tbmargin-top: 32px margin-bottom: 32px
    .margin-responsive-extra-tmargin-top: 32px
    .margin-responsive-extra-bmargin-bottom: 32px
    .margin-responsive-extra-lmargin-inline-start: 32px
    .margin-responsive-extra-rmargin-inline-end: 32px
    .margin-responsivemargin: 24px
    .margin-responsive-lrmargin-inline: 24px
    .margin-responsive-tbmargin-top: 24px margin-bottom: 24px
    .margin-responsive-tmargin-top: 24px
    .margin-responsive-bmargin-bottom: 24px
    .margin-responsive-lmargin-inline-start: 24px
    .margin-responsive-rmargin-inline-end: 24px
    .margin-responsive-extramargin: 48px
    .margin-responsive-extra-lrmargin-inline: 48px
    .margin-responsive-extra-tbmargin-top: 48px margin-bottom: 48px
    .margin-responsive-extra-tmargin-top: 48px
    .margin-responsive-extra-bmargin-bottom: 48px
    .margin-responsive-extra-lmargin-inline-start: 48px
    .margin-responsive-extra-rmargin-inline-end: 48px
    .margin-responsivemargin: 24px
    .margin-responsive-lrmargin-inline: 24px
    .margin-responsive-tbmargin-top: 24px margin-bottom: 24px
    .margin-responsive-tmargin-top: 24px
    .margin-responsive-bmargin-bottom: 24px
    .margin-responsive-lmargin-inline-start: 24px
    .margin-responsive-rmargin-inline-end: 24px
    .margin-responsive-extramargin: 48px
    .margin-responsive-extra-lrmargin-inline: 48px
    .margin-responsive-extra-tbmargin-top: 48px margin-bottom: 48px
    .margin-responsive-extra-tmargin-top: 48px
    .margin-responsive-extra-bmargin-bottom: 48px
    .margin-responsive-extra-lmargin-inline-start: 48px
    .margin-responsive-extra-rmargin-inline-end: 48px
    .margin-responsivemargin: 32px
    .margin-responsive-lrmargin-inline: 32px
    .margin-responsive-tbmargin-top: 32px margin-bottom: 32px
    .margin-responsive-tmargin-top: 32px
    .margin-responsive-bmargin-bottom: 32px
    .margin-responsive-lmargin-inline-start: 32px
    .margin-responsive-rmargin-inline-end: 32px
    .margin-responsive-extramargin: 64px
    .margin-responsive-extra-lrmargin-inline: 64px
    .margin-responsive-extra-tbmargin-top: 64px margin-bottom: 64px
    .margin-responsive-extra-tmargin-top: 64px
    .margin-responsive-extra-bmargin-bottom: 64px
    .margin-responsive-extra-lmargin-inline-start: 64px
    .margin-responsive-extra-rmargin-inline-end: 64px
    .marginmargin: 1rem
    .margin-lrmargin-inline: 1rem
    .margin-tbmargin-top: 1rem margin-bottom: 1rem
    .margin-tmargin-top: 1rem
    .margin-bmargin-bottom: 1rem
    .margin-lmargin-inline-start: 1rem
    .margin-rmargin-inline-end: 1rem
    .margin-automargin: auto
    .margin-auto-lrmargin-inline: auto
    .margin-auto-tbmargin-top: auto margin-bottom: auto
    .margin-auto-tmargin-top: auto
    .margin-auto-bmargin-bottom: auto
    .margin-auto-lmargin-inline-start: auto
    .margin-auto-rmargin-inline-end: auto
    .margin-centermargin: 0 auto
    .margin-0margin: 0
    .margin-0-lrmargin-inline: 0
    .margin-0-tbmargin-top: 0 margin-bottom: 0
    .margin-0-tmargin-top: 0
    .margin-0-bmargin-bottom: 0
    .margin-0-lmargin-inline-start: 0
    .margin-0-rmargin-inline-end: 0
    .margin-1margin: 0.5rem
    .margin-1-lrmargin-inline: 0.5rem
    .margin-1-tbmargin-top: 0.5rem margin-bottom: 0.5rem
    .margin-1-tmargin-top: 0.5rem
    .margin-1-bmargin-bottom: 0.5rem
    .margin-1-lmargin-inline-start: 0.5rem
    .margin-1-rmargin-inline-end: 0.5rem
    .margin-2margin: 1rem
    .margin-2-lrmargin-inline: 1rem
    .margin-2-tbmargin-top: 1rem margin-bottom: 1rem
    .margin-2-tmargin-top: 1rem
    .margin-2-bmargin-bottom: 1rem
    .margin-2-lmargin-inline-start: 1rem
    .margin-2-rmargin-inline-end: 1rem
    .margin-3margin: 1.5rem
    .margin-3-lrmargin-inline: 1.5rem
    .margin-3-tbmargin-top: 1.5rem margin-bottom: 1.5rem
    .margin-3-tmargin-top: 1.5rem
    .margin-3-bmargin-bottom: 1.5rem
    .margin-3-lmargin-inline-start: 1.5rem
    .margin-3-rmargin-inline-end: 1.5rem
    .margin-4margin: 2rem
    .margin-4-lrmargin-inline: 2rem
    .margin-4-tbmargin-top: 2rem margin-bottom: 2rem
    .margin-4-tmargin-top: 2rem
    .margin-4-bmargin-bottom: 2rem
    .margin-4-lmargin-inline-start: 2rem
    .margin-4-rmargin-inline-end: 2rem
    .pad-responsivepadding: 12px
    .pad-responsive-lrpadding-inline: 12px
    .pad-responsive-tbpadding-top: 12px padding-bottom: 12px
    .pad-responsive-tpadding-top: 12px
    .pad-responsive-bpadding-bottom: 12px
    .pad-responsive-lpadding-inline-start: 12px
    .pad-responsive-rpadding-inline-end: 12px
    .pad-responsive-extrapadding: 16px
    .pad-responsive-extra-lrpadding-inline: 16px
    .pad-responsive-extra-tbpadding-top: 16px padding-bottom: 16px
    .pad-responsive-extra-tpadding-top: 16px
    .pad-responsive-extra-bpadding-bottom: 16px
    .pad-responsive-extra-lpadding-inline-start: 16px
    .pad-responsive-extra-rpadding-inline-end: 16px
    .pad-responsivepadding: 12px
    .pad-responsive-lrpadding-inline: 12px
    .pad-responsive-tbpadding-top: 12px padding-bottom: 12px
    .pad-responsive-tpadding-top: 12px
    .pad-responsive-bpadding-bottom: 12px
    .pad-responsive-lpadding-inline-start: 12px
    .pad-responsive-rpadding-inline-end: 12px
    .pad-responsive-extrapadding: 16px
    .pad-responsive-extra-lrpadding-inline: 16px
    .pad-responsive-extra-tbpadding-top: 16px padding-bottom: 16px
    .pad-responsive-extra-tpadding-top: 16px
    .pad-responsive-extra-bpadding-bottom: 16px
    .pad-responsive-extra-lpadding-inline-start: 16px
    .pad-responsive-extra-rpadding-inline-end: 16px
    .pad-responsivepadding: 16px
    .pad-responsive-lrpadding-inline: 16px
    .pad-responsive-tbpadding-top: 16px padding-bottom: 16px
    .pad-responsive-tpadding-top: 16px
    .pad-responsive-bpadding-bottom: 16px
    .pad-responsive-lpadding-inline-start: 16px
    .pad-responsive-rpadding-inline-end: 16px
    .pad-responsive-extrapadding: 24px
    .pad-responsive-extra-lrpadding-inline: 24px
    .pad-responsive-extra-tbpadding-top: 24px padding-bottom: 24px
    .pad-responsive-extra-tpadding-top: 24px
    .pad-responsive-extra-bpadding-bottom: 24px
    .pad-responsive-extra-lpadding-inline-start: 24px
    .pad-responsive-extra-rpadding-inline-end: 24px
    .pad-responsivepadding: 16px
    .pad-responsive-lrpadding-inline: 16px
    .pad-responsive-tbpadding-top: 16px padding-bottom: 16px
    .pad-responsive-tpadding-top: 16px
    .pad-responsive-bpadding-bottom: 16px
    .pad-responsive-lpadding-inline-start: 16px
    .pad-responsive-rpadding-inline-end: 16px
    .pad-responsive-extrapadding: 32px
    .pad-responsive-extra-lrpadding-inline: 32px
    .pad-responsive-extra-tbpadding-top: 32px padding-bottom: 32px
    .pad-responsive-extra-tpadding-top: 32px
    .pad-responsive-extra-bpadding-bottom: 32px
    .pad-responsive-extra-lpadding-inline-start: 32px
    .pad-responsive-extra-rpadding-inline-end: 32px
    .pad-responsivepadding: 24px
    .pad-responsive-lrpadding-inline: 24px
    .pad-responsive-tbpadding-top: 24px padding-bottom: 24px
    .pad-responsive-tpadding-top: 24px
    .pad-responsive-bpadding-bottom: 24px
    .pad-responsive-lpadding-inline-start: 24px
    .pad-responsive-rpadding-inline-end: 24px
    .pad-responsive-extrapadding: 48px
    .pad-responsive-extra-lrpadding-inline: 48px
    .pad-responsive-extra-tbpadding-top: 48px padding-bottom: 48px
    .pad-responsive-extra-tpadding-top: 48px
    .pad-responsive-extra-bpadding-bottom: 48px
    .pad-responsive-extra-lpadding-inline-start: 48px
    .pad-responsive-extra-rpadding-inline-end: 48px
    .pad-responsivepadding: 24px
    .pad-responsive-lrpadding-inline: 24px
    .pad-responsive-tbpadding-top: 24px padding-bottom: 24px
    .pad-responsive-tpadding-top: 24px
    .pad-responsive-bpadding-bottom: 24px
    .pad-responsive-lpadding-inline-start: 24px
    .pad-responsive-rpadding-inline-end: 24px
    .pad-responsive-extrapadding: 48px
    .pad-responsive-extra-lrpadding-inline: 48px
    .pad-responsive-extra-tbpadding-top: 48px padding-bottom: 48px
    .pad-responsive-extra-tpadding-top: 48px
    .pad-responsive-extra-bpadding-bottom: 48px
    .pad-responsive-extra-lpadding-inline-start: 48px
    .pad-responsive-extra-rpadding-inline-end: 48px
    .pad-responsivepadding: 32px
    .pad-responsive-lrpadding-inline: 32px
    .pad-responsive-tbpadding-top: 32px padding-bottom: 32px
    .pad-responsive-tpadding-top: 32px
    .pad-responsive-bpadding-bottom: 32px
    .pad-responsive-lpadding-inline-start: 32px
    .pad-responsive-rpadding-inline-end: 32px
    .pad-responsive-extrapadding: 64px
    .pad-responsive-extra-lrpadding-inline: 64px
    .pad-responsive-extra-tbpadding-top: 64px padding-bottom: 64px
    .pad-responsive-extra-tpadding-top: 64px
    .pad-responsive-extra-bpadding-bottom: 64px
    .pad-responsive-extra-lpadding-inline-start: 64px
    .pad-responsive-extra-rpadding-inline-end: 64px
    .padpadding: 1rem
    .pad-lrpadding-inline: 1rem
    .pad-tbpadding-top: 1rem padding-bottom: 1rem
    .pad-tpadding-top: 1rem
    .pad-bpadding-bottom: 1rem
    .pad-lpadding-inline-start: 1rem
    .pad-rpadding-inline-end: 1rem
    .pad-0padding: 0
    .pad-0-lrpadding-inline: 0
    .pad-0-tbpadding-top: 0 padding-bottom: 0
    .pad-0-tpadding-top: 0
    .pad-0-bpadding-bottom: 0
    .pad-0-lpadding-inline-start: 0
    .pad-0-rpadding-inline-end: 0
    .pad-1padding: 0.5rem
    .pad-1-lrpadding-inline: 0.5rem
    .pad-1-tbpadding-top: 0.5rem padding-bottom: 0.5rem
    .pad-1-tpadding-top: 0.5rem
    .pad-1-bpadding-bottom: 0.5rem
    .pad-1-lpadding-inline-start: 0.5rem
    .pad-1-rpadding-inline-end: 0.5rem
    .pad-2padding: 1rem
    .pad-2-lrpadding-inline: 1rem
    .pad-2-tbpadding-top: 1rem padding-bottom: 1rem
    .pad-2-tpadding-top: 1rem
    .pad-2-bpadding-bottom: 1rem
    .pad-2-lpadding-inline-start: 1rem
    .pad-2-rpadding-inline-end: 1rem
    .pad-3padding: 1.5rem
    .pad-3-lrpadding-inline: 1.5rem
    .pad-3-tbpadding-top: 1.5rem padding-bottom: 1.5rem
    .pad-3-tpadding-top: 1.5rem
    .pad-3-bpadding-bottom: 1.5rem
    .pad-3-lpadding-inline-start: 1.5rem
    .pad-3-rpadding-inline-end: 1.5rem
    .pad-4padding: 2rem
    .pad-4-lrpadding-inline: 2rem
    .pad-4-tbpadding-top: 2rem padding-bottom: 2rem
    .pad-4-tpadding-top: 2rem
    .pad-4-bpadding-bottom: 2rem
    .pad-4-lpadding-inline-start: 2rem
    .pad-4-rpadding-inline-end: 2rem

    Border

    Utility ClassStyle
    .borderborder: 0.0625rem solid var(--ds-739, #e0e0e0)
    .border-lrborder-inline-start: 0.0625rem solid var(--ds-739, #e0e0e0) border-inline-end: 0.0625rem solid var(--ds-739, #e0e0e0)
    .border-tbborder-top: 0.0625rem solid var(--ds-739, #e0e0e0) border-bottom: 0.0625rem solid var(--ds-739, #e0e0e0)
    .border-tborder-top: 0.0625rem solid var(--ds-739, #e0e0e0)
    .border-bborder-bottom: 0.0625rem solid var(--ds-739, #e0e0e0)
    .border-lborder-inline-start: 0.0625rem solid var(--ds-739, #e0e0e0)
    .border-rborder-inline-end: 0.0625rem solid var(--ds-739, #e0e0e0)
    .border-0border: none
    .border-0-lrborder-inline-start: none border-inline-end: none
    .border-0-tbborder-top: none border-bottom: none
    .border-0-tborder-top: none
    .border-0-bborder-bottom: none
    .border-0-lborder-inline-start: none
    .border-0-rborder-inline-end: none
    .border-darkborder: 0.0625rem solid var(--ds-738, #bdbdbd)
    .border-dark-lrborder-inline-start: 0.0625rem solid var(--ds-738, #bdbdbd) border-inline-end: 0.0625rem solid var(--ds-738, #bdbdbd)
    .border-dark-tbborder-top: 0.0625rem solid var(--ds-738, #bdbdbd) border-bottom: 0.0625rem solid var(--ds-738, #bdbdbd)
    .border-dark-tborder-top: 0.0625rem solid var(--ds-738, #bdbdbd)
    .border-dark-bborder-bottom: 0.0625rem solid var(--ds-738, #bdbdbd)
    .border-dark-lborder-inline-start: 0.0625rem solid var(--ds-738, #bdbdbd)
    .border-dark-rborder-inline-end: 0.0625rem solid var(--ds-738, #bdbdbd)
    .border-dashedborder: 0.0625rem dashed var(--ds-739, #e0e0e0)
    .border-dashed-lrborder-inline-start: 0.0625rem dashed var(--ds-739, #e0e0e0) border-inline-end: 0.0625rem dashed var(--ds-739, #e0e0e0)
    .border-dashed-tbborder-top: 0.0625rem dashed var(--ds-739, #e0e0e0) border-bottom: 0.0625rem dashed var(--ds-739, #e0e0e0)
    .border-dashed-tborder-top: 0.0625rem dashed var(--ds-739, #e0e0e0)
    .border-dashed-bborder-bottom: 0.0625rem dashed var(--ds-739, #e0e0e0)
    .border-dashed-lborder-inline-start: 0.0625rem dashed var(--ds-739, #e0e0e0)
    .border-dashed-rborder-inline-end: 0.0625rem dashed var(--ds-739, #e0e0e0)
    .border-dark-dashedborder: 0.0625rem dashed var(--ds-738, #bdbdbd)
    .border-dark-dashed-lrborder-inline-start: 0.0625rem dashed var(--ds-738, #bdbdbd) border-inline-end: 0.0625rem dashed var(--ds-738, #bdbdbd)
    .border-dark-dashed-tbborder-top: 0.0625rem dashed var(--ds-738, #bdbdbd) border-bottom: 0.0625rem dashed var(--ds-738, #bdbdbd)
    .border-dark-dashed-tborder-top: 0.0625rem dashed var(--ds-738, #bdbdbd)
    .border-dark-dashed-bborder-bottom: 0.0625rem dashed var(--ds-738, #bdbdbd)
    .border-dark-dashed-lborder-inline-start: 0.0625rem dashed var(--ds-738, #bdbdbd)
    .border-dark-dashed-rborder-inline-end: 0.0625rem dashed var(--ds-738, #bdbdbd)
    .bordered > :not(:last-child)border-bottom: 0.0625rem solid var(--ds-739, #e0e0e0)
    .bordered-a > *border-bottom: 0.0625rem solid var(--ds-739, #e0e0e0)
    .radius-container-smborder-radius: 0.5rem
    .radius-container-sm-tborder-start-start-radius: 0.5rem border-start-end-radius: 0.5rem
    .radius-container-sm-bborder-end-start-radius: 0.5rem border-end-end-radius: 0.5rem
    .radius-containerborder-radius: 1rem
    .radius-container-tborder-start-start-radius: 1rem border-start-end-radius: 1rem
    .radius-container-bborder-end-start-radius: 1rem border-end-end-radius: 1rem
    .radius-container-lgborder-radius: 1.5rem
    .radius-container-lg-tborder-start-start-radius: 1.5rem border-start-end-radius: 1.5rem
    .radius-container-lg-bborder-end-start-radius: 1.5rem border-end-end-radius: 1.5rem
    .radius-noneborder-radius: 0rem
    .radius-none-tborder-start-start-radius: 0rem border-start-end-radius: 0rem
    .radius-none-bborder-end-start-radius: 0rem border-end-end-radius: 0rem

    Positioning

    Utility ClassStyle
    .fluidwidth: 100% max-width: none
    .float-leftfloat: inline-start
    .float-rightfloat: inline-end
    .position
    .position-fixedposition: fixed
    .position-fixed-brposition: fixed bottom: 0 inset-inline-end: 0
    .position-fixed-trposition: fixed top: 0 inset-inline-end: 0
    .position-fixed-blposition: fixed bottom: 0 inset-inline-start: 0
    .position-fixed-tlposition: fixed top: 0 inset-inline-start: 0
    .position-relativeposition: relative
    .position-staticposition: static
    .position-absoluteposition: absolute
    .position-absolute-brposition: absolute bottom: 0 inset-inline-end: 0
    .position-absolute-blposition: absolute bottom: 0 inset-inline-start: 0
    .position-absolute-trposition: absolute top: 0 inset-inline-end: 0
    .position-absolute-tlposition: absolute top: 0 inset-inline-start: 0
    .valign-topvertical-align: top
    .valign-middlevertical-align: middle
    .valign-bottom tdvertical-align: bottom

    Display

    Utility ClassStyle
    .display-nonedisplay: none
    .display-blockdisplay: block speak: normal
    .display-inlinedisplay: inline speak: normal
    .display-inline-blockdisplay: inline-block speak: normal

    Background

    Utility ClassStyle
    .bg-nonebackground: none
    .bg-repeatbackground-repeat: repeat background-size: 100%
    .gradient-linear-trbackground: #006fcf background: linear-gradient(to bottom left, #006fcf, #00175a)
    .invertedbackground-color: #000000
    .inverted, .inverted acolor: #ffffff
    .inverted atext-decoration: underline
    .inverted a.link-white-focus:focusoutline: solid 1px #74c5fb outline-offset: 2px
    .transparentbackground-color: transparent border: none padding: 0 margin: 0 min-width: 0 max-width: none
    .transparent:hoverbackground-color: transparent border: none

    Components

    Utility ClassStyle
    .linkfont-size: 1rem font-weight: 400 line-height: 1.5rem
    .link-boldfont-size: 1rem font-weight: 700 line-height: 1.5rem

    Focus

    Utility ClassStyle
    .focus-lightoutline: solid 1px #006fcf outline-offset: 1px

    Sizing

    Utility ClassStyle
    .height-autoheight: auto
    .height-fullheight: 100%
    .width-autowidth: auto
    .width-fullwidth: 100%

    Other

    Utility ClassStyle
    .pointer-events-nonepointer-events: none
    .pointer-events-autopointer-events: auto
    .no-scroll-ms-overflow-style: -ms-autohiding-scrollbar overflow: hidden
    .scroll-xoverflow-x: auto overflow-y: hidden
    .scroll-yoverflow-y: auto overflow-x: hidden
    .shadow-1box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1)
    .shadow-2box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1)
    .shadow-3box-shadow: 0 13px 26px 0 rgba(0, 0, 0, 0.1)
    .speak-individualword-spacing: -0.25em speak: spell-out
    .sr-onlyposition: absolute width: 1px height: 1px padding: 0 margin: -1px overflow: hidden clip: rect(0, 0, 0, 0) white-space: nowrap border-width: 0
    .hiddendisplay: none
    .visibleopacity: 1 visibility: visible
    .invisiblevisibility: hidden opacity: 0
    .bg-img-nonebackground-image: none

    Questions?

    Connect with the DLS Team on Slack or by email.

    Resources

    Check out additional resources.