Skill Level: 

Aspect Ratio

Responsive suffixes (@sm, @md, @lg and @xl) may be added to the aspect ratio utilities to change the ratio of an item at various breakpoints. For example, dcf-ratio-16x9 dcf-ratio-4x3@md will change the item’s 16×9 aspect ratio to 4×3 at the medium breakpoint.

apply an aspect ratio to an element and specify the ratio with one of the following classes
apply a 16×9 (landscape) aspect ratio to an element
apply a 9×16 (portrait) aspect ratio to an element
apply a 4×3 (landscape) aspect ratio to an element
apply a 3×4 (portrait) aspect ratio to an element
apply a 1×1 aspect ratio to an element
child element contained within the aspect ratio
Placeholder image.
This example illustrates the difference between the native, square aspect ratio of the image and the 3×4 portrait ratio specified by the utility class. Use in combination with the object-fit and object-position utilities to adjust how the child occupies the space created by the parent aspect ratio.
<div class="dcf-ratio dcf-ratio-3x4 dcf-w-10 dcf-b-solid dcf-b-1 unl-b-light-gray">
  <img class="dcf-ratio-child" src="" alt="Placeholder image.">


Utility classes for background use the bg notation.

Background Color

transparent background
white background
dark, slightly transparent background
light, slightly transparent background

Background Position

background-position: center
background-position: top
background-position: right
background-position: right top
background-position: right bottom
background-position: bottom
background-position: left
background-position: left top
background-position: left bottom

Background Repeat

background-repeat: no-repeat
background-repeat: repeat
background-repeat: repeat-x
background-repeat: repeat-y

Background Size

background-size: contain
background-size: cover

Background None

no background

Border Color

Border style and border width classes must be used with border color to work.

Border Color (All Sides)

Utility classes for border colors (all sides) use the b notation.

border-color: currentColor, all sides
border-color: transparent, all sides

Border Top Color

Utility classes for border top colors use the bt notation.

border-top-color: currentColor
border-top-color: transparent

Border Right Color

Utility classes for border right colors use the br notation.

border-right-color: currentColor
border-right-color: transparent

Border Bottom Color

Utility classes for border bottom colors use the bb notation.

border-bottom-color: currentColor
border-bottom-color: transparent

Border Left Color

Utility classes for border left colors use the bl notation.

border-left-color: currentColor
border-left-color: transparent

Border Radius

circle border radius
rounded corners, all sides
rounded top corners
rounded right corners
rounded bottom corners
rounded left corners

Border Style

Border color and border width classes must be used with border style to work.

Border Style (All Sides)

Utility classes for border style (all sides) use the b notation.

border-style: dotted, all sides
border-style: solid, all sides

Border Top Style

Utility classes for border top style use the bt notation.

border-top-style: dotted
border-top-style: solid

Border Right Style

Utility classes for border right style use the br notation.

border-right-style: dotted
border-right-style: solid

Border Botttom Style

Utility classes for border bottom style use the bb notation.

border-bottom-style: dotted
border-bottom-style: solid

Border Left Style

Utility classes for border left style use the bl notation.

border-left-style: dotted
border-left-style: solid

Border Width

Border color and border style classes must be used with border width to work.

Border Width (All Sides)

Utility classes for border width (all sides) use the b notation.

border-width: 0, all sides
border-width: 1px, all sides
border-width: 2px, all sides
border-width: 3px, all sides

Border Top Width

Utility classes for border top width use the bt notation.

border-top-width: 0
border-top-width: 1px
border-top-width: 2px
border-top-width: 3px

Border Right Width

Utility classes for border right width use the br notation.

border-right-width: 0
border-right-width: 1px
border-right-width: 2px
border-right-width: 3px

Border Bottom Width

Utility classes for border bottom width use the bb notation.

border-bottom-width: 0
border-bottom-width: 1px
border-bottom-width: 2px
border-bottom-width: 3px

Border Left Width

Utility classes for border left width use the bl notation.

border-left-width: 0
border-left-width: 1px
border-left-width: 2px
border-left-width: 3px

Box Alignment

Align Items

Utility classes for align items use the ai notation.

align-items: flex-start
align-items: flex-end
align-items: center
align-items: baseline
align-items: stretch
align-items: start
align-items: end

Align Content

Utility classes for align content use the ac notation.

align-content: flex-start
align-content: flex-end
align-content: center
align-content: stretch
align-content: around
align-content: between
align-content: evenly
align-content: start
align-content: end

Align Self

Utility classes for align self use the as notation.

align-self: auto
align-self: flex-start
align-self: flex-end
align-self: center
align-self: baseline
align-self: stretch
align-self: start
align-self: end

Justify Items

Utility classes for justify items use the ji notation.

justify-items: center
justify-items: stretch
justify-items: start
justify-items: end

Justify Content

Utility classes for justify content use the jc notation.

justify-content: flex-start
justify-content: flex-end
justify-content: center
justify-content: stretch
justify-content: around
justify-content: between
justify-content: evenly
justify-content: start
justify-content: end

Justify Self

Utility classes for justify self use the js notation.

justify-self: center
justify-self: stretch
justify-self: start
justify-self: end


Light color on dark background in light mode and dark color on light background (yes, light background) in dark mode. An example of this would be the selected date in the datepicker component. If light text on a dark background is desired in both light and dark modes, use .unl-cream instead.

CSS Columns

All CSS column utilities have a column-gap of 3.16vw (viewport width). Responsive suffixes (@sm, @md, @lg, @xl) can be added to target desired breakpoints.

Lay out content in one column.
Lay out content in two equal width columns.
Lay out content in three equal width columns.
Lay out content in equal width columns, each with a minimum width of 17.76em.


display: none
display: none on screen, show when printed
display: block
display: inline
display: inline-block
display: flex
display: inline-flex
display: grid
display: inline-grid
display: table
display: table-cell



flex-direction: column
flex-direction: column-reverse
flex-direction: row
flex-direction: row-reverse


flex-wrap: wrap
flex-wrap: wrap-reverse
flex-wrap: nowrap

Grow & Shrink

flex: none
flex: initial
flex: auto
flex: 1
flex-grow: 1
flex-shrink: 0


float: right
float: left
clear: right
clear: left
clear: both
force an element to self-clear its children


Gap (for Flexbox and Grid)

gap: .42em
gap: .56em
gap: .75em
gap: 1em
gap: 1.33em
gap: 1.78em
gap: 2.37em
gap: 3.16em
gap: 4.21em
gap: 5.62em

Column Gap

Utility classes for column gap use the col-gap notation.

grid-column-gap: 3.16vw (viewport width) This should be your column-gap of choice unless you have a specific use for the following em-based options.
grid-column-gap: .42em
grid-column-gap: .56em
grid-column-gap: .75em
grid-column-gap: 1em
grid-column-gap: 1.33em
grid-column-gap: 1.78em
grid-column-gap: 2.37em
grid-column-gap: 3.16em
grid-column-gap: 4.21em
grid-column-gap: 5.62em

Row Gap

grid-row-gap: .42em
grid-row-gap: .56em
grid-row-gap: .75em
grid-row-gap: 1em
grid-row-gap: 1.33em
grid-row-gap: 1.78em
grid-row-gap: 2.37em
grid-row-gap: 3.16em
grid-row-gap: 4.21em
grid-row-gap: 5.62em

Height & Width


Utility classes for height use the h notation.

height: auto
height: 0
height: .42em
height: .56em
height: .75em
height: 1em
height: 1.33em
height: 1.78em
height: 2.37em
height: 3.16em
height: 4.21em
height: 5.62em
height: 7.49em
height: 10em
height: 25%
height: 50%
height: 75%
height: 100%
height: 100vw (viewport width)


Utility classes for minimum height use the h-min notation.

min-height: 0
min-height: 100vh


Utility classes for maximum height use the h-max notation.

max-height: 0
max-height: 100%
max-height: 100vh (viewport height)
max-height: 999vh (viewport height)


Utility classes for width use the w notation.

width: auto
width: 0
width: .42em
width: .56em
width: .75em
width: 1em
width: 1.33em
width: 1.78em
width: 2.37em
width: 3.16em
width: 4.21em
width: 5.62em
width: 7.49em
width: 10em
width: 25%
width: 50%
width: 75%
width: 100%
width: 100vw (viewport width)


Utility classes for minimum width use the w-min notation.

min-width: 0


Utility classes for maximum width use the w-max notation.

max-width: 9.99rem
max-width: 13.32rem
max-width: 17.76rem
max-width: 23.68rem
max-width: 31.57rem
max-width: 42.09rem
max-width: 56.12rem
max-width: 74.83rem
max-width: 99.78rem
max-width: 133.03rem
max-width: 100%
max-width: 100vw (viewport width)

Lazy Load

lazy load images
<div class="dcf-ratio dcf-ratio-16x9">
    <!-- AVIF images -->
      data-srcset=" 320w, 640w, 960w, 1280w"
    <!-- WebP images,, or -->
      data-srcset=" 320w, 640w, 960w, 1280w"
    <!-- JPG images,, or -->
      data-srcset=" 320w, 640w, 960w, 1280w"
      class="dcf-ratio-child dcf-obj-fit-cover dcf-lazy-load"
      alt="Really good alt text goes here.">
        class="dcf-ratio-child dcf-obj-fit-cover"
        alt="Really good alt text goes here.">

AVIF and WebP images aren’t required, but they are recommended for improving your page performance. If using only JPEGs, use the following code:

<div class="dcf-ratio dcf-ratio-16x9">
  <!-- JPG images,, or -->
    class="dcf-ratio-child dcf-obj-fit-cover dcf-lazy-load"
    data-srcset=" 320w, 640w, 960w, 1280w"
    alt="Really good alt text goes here.">
      class="dcf-ratio-child dcf-obj-fit-cover"
      alt="Really good alt text goes here.">

Related: Aspect Ratios (Utilities), Object-Fit (Utilities)


Margin (All Sides)

Utility classes for margin (all sides) use the m notation.

margin (all sides): auto
margin (all sides): 0
margin (all sides): .42em
margin (all sides): .56em
margin (all sides): .75em
margin (all sides): 1em
margin (all sides): 1.33em
margin (all sides): 1.78em
margin (all sides): 2.37em
margin (all sides): 3.16em
margin (all sides): 4.21em
margin (all sides): 5.62em
margin (all sides): 7.49em
margin (all sides): 10em

Margin Top

Utility classes for margin top use the mt notation.

margin-top: auto
margin-top: 0
margin-top: .42em
margin-top: .56em
margin-top: .75em
margin-top: 1em
margin-top: 1.33em
margin-top: 1.78em
margin-top: 2.37em
margin-top: 3.16em
margin-top: 4.21em
margin-top: 5.62em
margin-top: 7.49em
margin-top: 10em

Margin Right

Utility classes for margin right use the mr notation.

margin-right: auto
margin-right: 0
margin-right: .42em
margin-right: .56em
margin-right: .75em
margin-right: 1em
margin-right: 1.33em
margin-right: 1.78em
margin-right: 2.37em
margin-right: 3.16em
margin-right: 4.21em
margin-right: 5.62em
margin-right: 7.49em
margin-right: 10em

Margin Bottom

Utility classes for margin bottom use the mb notation.

margin-bottom: auto
margin-bottom: 0
margin-bottom: .42em
margin-bottom: .56em
margin-bottom: .75em
margin-bottom: 1em
margin-bottom: 1.33em
margin-bottom: 1.78em
margin-bottom: 2.37em
margin-bottom: 3.16em
margin-bottom: 4.21em
margin-bottom: 5.62em
margin-bottom: 7.49em
margin-bottom: 10em

Margin Left

Utility classes for margin left use the ml notation.

margin-left: auto
margin-left: 0
margin-left: .42em
margin-left: .56em
margin-left: .75em
margin-left: 1em
margin-left: 1.33em
margin-left: 1.78em
margin-left: 2.37em
margin-left: 3.16em
margin-left: 4.21em
margin-left: 5.62em
margin-left: 7.49em
margin-left: 10em


object-fit: contain
object-fit: cover
object-fit: none
Demonstration of object-fit contain
Demonstration of object-fit cover


object-position: top
object-position: right
object-position: bottom
object-position: left
object-position: right top
object-position: right bottom
object-position: left bottom
object-position: left top
Placeholder image.
Demonstration of object-position bottom combined with object-fit none


opacity: 0
opacity: 100%

Order (for Flexbox and Grid)


Responsive suffixes (@sm, @md, @lg, @xl) can be used with the order utilities to adjust order at the desired breakpoints.


overflow: visible
overflow-x: visible
overflow-y: visible
overflow: hidden
overflow-x: hidden
overflow-y: hidden
overflow: auto
overflow-x: auto
overflow-y: auto
overflow: scroll
overflow-x: scroll
overflow-y: scroll


Padding (All Sides)

Utility classes for padding (all sides) use the p notation.

padding (all sides): 0
padding (all sides): .42em
padding (all sides): .56em
padding (all sides): .75em
padding (all sides): 1em
padding (all sides): 1.33em
padding (all sides): 1.78em
padding (all sides): 2.37em
padding (all sides): 3.16em
padding (all sides): 4.21em
padding (all sides): 5.62em
padding (all sides): 7.49em
padding (all sides): 10em

Padding Top

Utility classes for padding top use the pt notation.

padding-top: 0
padding-top: .42em
padding-top: .56em
padding-top: .75em
padding-top: 1em
padding-top: 1.33em
padding-top: 1.78em
padding-top: 2.37em
padding-top: 3.16em
padding-top: 4.21em
padding-top: 5.62em
padding-top: 7.49em
padding-top: 10em

Padding Right

Utility classes for padding right use the pr notation.

padding-right: 0
padding-right: .42em
padding-right: .56em
padding-right: .75em
padding-right: 1em
padding-right: 1.33em
padding-right: 1.78em
padding-right: 2.37em
padding-right: 3.16em
padding-right: 4.21em
padding-right: 5.62em
padding-right: 7.49em
padding-right: 10em

Padding Bottom

Utility classes for padding bottom use the pb notation.

padding-bottom: 0
padding-bottom: .42em
padding-bottom: .56em
padding-bottom: .75em
padding-bottom: 1em
padding-bottom: 1.33em
padding-bottom: 1.78em
padding-bottom: 2.37em
padding-bottom: 3.16em
padding-bottom: 5.62em
padding-bottom: 7.49em
padding-bottom: 10em

Padding Left

Utility classes for padding left use the pl notation.

padding-left: 0
padding-left: .42em
padding-left: .56em
padding-left: .75em
padding-left: 1em
padding-left: 1.33em
padding-left: 1.78em
padding-left: 2.37em
padding-left: 3.16em
padding-left: 4.21em
padding-left: 5.62em
padding-left: 7.49em
padding-left: 10em



position: static
position: relative
position: absolute
position: fixed
position: sticky


Note: the .dcf-pin-* classes will eventually be deprecated. Please use .dcf-top-0 or similar classes instead.

top: 0
top: 50%
top: 100%
right: 0
right: 50%
right: 100%
bottom: 0
bottom: 50%
bottom: 100%
left: 0
left: 50%
left: 100%


fill: currentColor
stroke: currentColor

Table Layout

table-layout: fixed
A table must have a defined width for table-layout: fixed to work. Use a width utility class (e.g., .dcf-w-100%) with .dcf-table-fixed on your desired <table>.


Font Size

font-size: 1rem
font-size: .56em
font-size: .63em
font-size: .75em
font-size: .84em
font-size: 1em
font-size: 1.13em
font-size: 1.13em, equivalent to h6 font size
font-size: 1.33em, equivalent to h5 font size
font-size: 1.5em, equivalent to h4 font size
font-size: 1.78em, equivalent to h3 font size
font-size: 2em, equivalent to h2 font size
font-size: 2.37em, equivalent to h1 font size
font-size: 2.67em
font-size: 3.16em
font-size: 4.21em
font-size: 4.74em
font-size: 5.62em
font-size: 6.32em

Horizontal Text Alignment

text-align: center
text-align: left
text-align: right

Vertical Text Alignment

vertical-align: baseline
vertical-align: top
vertical-align: middle
vertical-align: bottom
vertical-align: text-top
vertical-align: text-bottom

Text Decoration

text-decoration: none
text-decoration: underline on :hover

Text Wrap

white-space: nowrap
force long words or strings to hyphenate and wrap to a new line as needed
truncate text with an ellipsis as needed

Font Style

font-style: normal
font-style: italic

Font Weight

font-weight: normal
font-weight: bold
font-weight: bolder

Line Height

Utility classes for line height use the lh notation.

line-height: 1
line-height: 1.13
line-height: 1.33
line-height: 1.5

Text Transform

text-transform: capitalize
text-transform: lowercase
text-transform: uppercase
text-transform: none


visibility: hidden
visibility: visible
visible for screen readers only


z-index: 0
z-index: 1
z-index: 2
Contributed By: