Skill Level: 
Intermediate

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.

.dcf-ratio
apply an aspect ratio to an element and specify the ratio with one of the following classes
.dcf-ratio-16x9
apply a 16×9 (landscape) aspect ratio to an element
.dcf-ratio-9x16
apply a 9×16 (portrait) aspect ratio to an element
.dcf-ratio-4x3
apply a 4×3 (landscape) aspect ratio to an element
.dcf-ratio-3x4
apply a 3×4 (portrait) aspect ratio to an element
.dcf-ratio-1x1
apply a 1×1 aspect ratio to an element
.dcf-ratio-child
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="https://via.placeholder.com/100x100" alt="Placeholder image.">
</div>

Background

Utility classes for background use the bg notation.

Background Color

.dcf-bg-transparent
transparent background
.dcf-bg-white
white background
.dcf-bg-overlay-dark
dark, slightly transparent background
.dcf-bg-overlay-light
light, slightly transparent background

Background Position

.dcf-bg-center
background-position: center
.dcf-bg-top
background-position: top
.dcf-bg-right
background-position: right
.dcf-bg-right-top
background-position: right top
.dcf-bg-right-bottom
background-position: right bottom
.dcf-bg-bottom
background-position: bottom
.dcf-bg-left
background-position: left
.dcf-bg-left-top
background-position: left top
.dcf-bg-left-bottom
background-position: left bottom

Background Repeat

.dcf-bg-no-repeat
background-repeat: no-repeat
.dcf-bg-repeat
background-repeat: repeat
.dcf-bg-repeat-x
background-repeat: repeat-x
.dcf-bg-repeat-y
background-repeat: repeat-y

Background Size

.dcf-bg-contain
background-size: contain
.dcf-bg-cover
background-size: cover

Background None

.dcf-bg-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.

.dcf-b-current
border-color: currentColor, all sides
.dcf-b-transparent
border-color: transparent, all sides

Border Top Color

Utility classes for border top colors use the bt notation.

.dcf-bt-current
border-top-color: currentColor
.dcf-bt-transparent
border-top-color: transparent

Border Right Color

Utility classes for border right colors use the br notation.

.dcf-br-current
border-right-color: currentColor
.dcf-br-transparent
border-right-color: transparent

Border Bottom Color

Utility classes for border bottom colors use the bb notation.

.dcf-bb-current
border-bottom-color: currentColor
.dcf-bb-transparent
border-bottom-color: transparent

Border Left Color

Utility classes for border left colors use the bl notation.

.dcf-bl-current
border-left-color: currentColor
.dcf-bl-transparent
border-left-color: transparent

Border Radius

.dcf-circle
circle border radius
.dcf-rounded
rounded corners, all sides
.dcf-rounded-top
rounded top corners
.dcf-rounded-right
rounded right corners
.dcf-rounded-bottom
rounded bottom corners
.dcf-rounded-left
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.

.dcf-b-dotted
border-style: dotted, all sides
.dcf-b-solid
border-style: solid, all sides

Border Top Style

Utility classes for border top style use the bt notation.

.dcf-bt-dotted
border-top-style: dotted
.dcf-bt-solid
border-top-style: solid

Border Right Style

Utility classes for border right style use the br notation.

.dcf-br-dotted
border-right-style: dotted
.dcf-br-solid
border-right-style: solid

Border Botttom Style

Utility classes for border bottom style use the bb notation.

.dcf-bb-dotted
border-bottom-style: dotted
.dcf-bb-solid
border-bottom-style: solid

Border Left Style

Utility classes for border left style use the bl notation.

.dcf-bl-dotted
border-left-style: dotted
.dcf-bl-solid
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.

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

Border Top Width

Utility classes for border top width use the bt notation.

.dcf-bt-0
border-top-width: 0
.dcf-bt-1
border-top-width: 1px
.dcf-bt-2
border-top-width: 2px
.dcf-bt-3
border-top-width: 3px

Border Right Width

Utility classes for border right width use the br notation.

.dcf-br-0
border-right-width: 0
.dcf-br-1
border-right-width: 1px
.dcf-br-2
border-right-width: 2px
.dcf-br-3
border-right-width: 3px

Border Bottom Width

Utility classes for border bottom width use the bb notation.

.dcf-bb-0
border-bottom-width: 0
.dcf-bb-1
border-bottom-width: 1px
.dcf-bb-2
border-bottom-width: 2px
.dcf-bb-3
border-bottom-width: 3px

Border Left Width

Utility classes for border left width use the bl notation.

.dcf-bl-0
border-left-width: 0
.dcf-bl-1
border-left-width: 1px
.dcf-bl-2
border-left-width: 2px
.dcf-bl-3
border-left-width: 3px

Box Alignment

Align Items

Utility classes for align items use the ai notation.

.dcf-ai-flex-start
align-items: flex-start
.dcf-ai-flex-end
align-items: flex-end
.dcf-ai-center
align-items: center
.dcf-ai-baseline
align-items: baseline
.dcf-ai-stretch
align-items: stretch
.dcf-ai-start
align-items: start
.dcf-ai-end
align-items: end

Align Content

Utility classes for align content use the ac notation.

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

Align Self

Utility classes for align self use the as notation.

.dcf-as-auto
align-self: auto
.dcf-as-flex-start
align-self: flex-start
.dcf-as-flex-end
align-self: flex-end
.dcf-as-center
align-self: center
.dcf-as-baseline
align-self: baseline
.dcf-as-stretch
align-self: stretch
.dcf-as-start
align-self: start
.dcf-as-end
align-self: end

Justify Items

Utility classes for justify items use the ji notation.

.dcf-ji-center
justify-items: center
.dcf-ji-stretch
justify-items: stretch
.dcf-ji-start
justify-items: start
.dcf-ji-end
justify-items: end

Justify Content

Utility classes for justify content use the jc notation.

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

Justify Self

Utility classes for justify self use the js notation.

.dcf-js-center
justify-self: center
.dcf-js-stretch
justify-self: stretch
.dcf-js-start
justify-self: start
.dcf-js-end
justify-self: end

Color

.dcf-inverse
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.

.dcf-columns-1
Lay out content in one column.
.dcf-columns-2
Lay out content in two equal width columns.
.dcf-columns-3
Lay out content in three equal width columns.
.dcf-columns-auto
Lay out content in equal width columns, each with a minimum width of 17.76em.

Display

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

Flexbox

Direction

.dcf-flex-col
flex-direction: column
.dcf-flex-col-rev
flex-direction: column-reverse
.dcf-flex-row
flex-direction: row
.dcf-flex-row-rev
flex-direction: row-reverse

Wrap

.dcf-flex-wrap
flex-wrap: wrap
.dcf-flex-wrap-rev
flex-wrap: wrap-reverse
.dcf-flex-nowrap
flex-wrap: nowrap

Grow & Shrink

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

Float

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

Grid

Column Gap

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

.dcf-col-gap-vw
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.
.dcf-col-gap-1
grid-column-gap: .42em
.dcf-col-gap-2
grid-column-gap: .56em
.dcf-col-gap-3
grid-column-gap: .75em
.dcf-col-gap-4
grid-column-gap: 1em
.dcf-col-gap-5
grid-column-gap: 1.33em
.dcf-col-gap-6
grid-column-gap: 1.78em
.dcf-col-gap-7
grid-column-gap: 2.37em
.dcf-col-gap-8
grid-column-gap: 3.16em
.dcf-col-gap-9
grid-column-gap: 4.21em
.dcf-col-gap-10
grid-column-gap: 5.62em

Row Gap

.dcf-row-gap-1
grid-row-gap: .42em
.dcf-row-gap-2
grid-row-gap: .56em
.dcf-row-gap-3
grid-row-gap: .75em
.dcf-row-gap-4
grid-row-gap: 1em
.dcf-row-gap-5
grid-row-gap: 1.33em
.dcf-row-gap-6
grid-row-gap: 1.78em
.dcf-row-gap-7
grid-row-gap: 2.37em
.dcf-row-gap-8
grid-row-gap: 3.16em
.dcf-row-gap-9
grid-row-gap: 4.21em
.dcf-row-gap-10
grid-row-gap: 5.62em

Height & Width

Height

Utility classes for height use the h notation.

.dcf-h-0
height: 0
.dcf-h-1
height: .42em
.dcf-h-2
height: .56em
.dcf-h-3
height: .75em
.dcf-h-4
height: 1em
.dcf-h-5
height: 1.33em
.dcf-h-6
height: 1.78em
.dcf-h-7
height: 2.37em
.dcf-h-8
height: 3.16em
.dcf-h-9
height: 4.21em
.dcf-h-10
height: 5.62em
.dcf-h-11
height: 7.49em
.dcf-h-12
height: 10em
.dcf-h-100%
height: 100%
.dcf-h-100vh
height: 100vw (viewport width)

Min-Height

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

.dcf-h-min-0
min-height: 0

Max-Height

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

.dcf-h-max-100%
max-height: 100%
.dcf-h-max-100vh
max-height: 100vh (viewport height)

Width

Utility classes for width use the w notation.

.dcf-w-0
width: 0
.dcf-w-1
width: .42em
.dcf-w-2
width: .56em
.dcf-w-3
width: .75em
.dcf-w-4
width: 1em
.dcf-w-5
width: 1.33em
.dcf-w-6
width: 1.78em
.dcf-w-7
width: 2.37em
.dcf-w-8
width: 3.16em
.dcf-w-9
width: 4.21em
.dcf-w-10
width: 5.62em
.dcf-w-11
width: 7.49em
.dcf-w-12
width: 10em
.dcf-w-100%
width: 100%
.dcf-w-100vw
width: 100vw (viewport width)

Min-Width

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

.dcf-w-min-0
min-width: 0

Max-Width

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

.dcf-w-max-xs
max-width: 17.76rem
.dcf-w-max-sm
max-width: 23.68rem
.dcf-w-max-md
max-width: 31.57rem
.dcf-w-max-lg
max-width: 42.09rem
.dcf-w-max-xl
max-width: 56.12rem
.dcf-w-max-100%
max-width: 100%
.dcf-w-max-100vw
max-width: 100vw (viewport width)

Lazy Load

.dcf-lazy-load
lazy load images
<div class="dcf-ratio dcf-ratio-16x9">
  <picture>
    <!-- AVIF images https://squoosh.app/ -->
    <source
      data-srcset="
        https://www.unl.edu/images/path-to/image-sm.avif 320w,
        https://www.unl.edu/images/path-to/image-md.avif 640w,
        https://www.unl.edu/images/path-to/image-lg.avif 960w,
        https://www.unl.edu/images/path-to/image-xl.avif 1280w"
      srcset="data:,1w"
      type="image/avif">
    <!-- WebP images https://squoosh.app/, https://convertio.co/webp-converter/, https://www.onlineconverter.com/webp or https://image.online-convert.com/convert-to-webp -->
    <source
      data-srcset="
        https://www.unl.edu/images/path-to/image-sm.webp 320w,
        https://www.unl.edu/images/path-to/image-md.webp 640w,
        https://www.unl.edu/images/path-to/image-lg.webp 960w,
        https://www.unl.edu/images/path-to/image-xl.webp 1280w"
      srcset="data:,1w"
      type="image/webp">
    <!-- JPG images https://squoosh.app/, https://imagecompressor.com/, https://compressor.io/ or https://www.jpegmini.com/ -->
    <source
      data-srcset="
        https://www.unl.edu/images/path-to/image-sm.jpg 320w,
        https://www.unl.edu/images/path-to/image-md.jpg 640w,
        https://www.unl.edu/images/path-to/image-lg.jpg 960w,
        https://www.unl.edu/images/path-to/image-xl.jpg 1280w"
      srcset="data:,1w"
      type="image/jpeg">
    <img 
      class="dcf-ratio-child dcf-obj-fit-cover dcf-lazy-load"
      height="720"
      width="1280"            
      loading="lazy"
      data-sizes=""
      data-src="https://www.unl.edu/images/path-to/image-sm.jpg"
      src="data:,"
      alt="Really good alt text goes here.">
    <noscript>
      <img 
        class="dcf-ratio-child dcf-obj-fit-cover"
        height="720"
        width="1280"
        src="https://www.unl.edu/images/path-to/image-sm.jpg"
        alt="Really good alt text goes here.">
    </noscript>    
  </picture>  
</div>

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 https://squoosh.app/, https://imagecompressor.com/, https://compressor.io/ or https://www.jpegmini.com/ -->
  <img
    class="dcf-ratio-child dcf-obj-fit-cover dcf-lazy-load"
    loading="lazy"
    height="720"
    width="1280"
    data-sizes=""
    data-srcset="
      https://www.unl.edu/images/path-to/image-sm.jpg 320w,
      https://www.unl.edu/images/path-to/image-md.jpg 640w,
      https://www.unl.edu/images/path-to/image-lg.jpg 960w,
      https://www.unl.edu/images/path-to/image-xl.jpg 1280w"
    srcset="data:,1w"
    data-src="https://www.unl.edu/images/path-to/image-sm.jpg"
    src="data:,"
    alt="Really good alt text goes here.">
  <noscript>
    <img
      class="dcf-ratio-child dcf-obj-fit-cover"
      height="720"
      width="1280"
      src="https://www.unl.edu/images/path-to/image-sm.jpg"
      alt="Really good alt text goes here.">
  </noscript>
</div>

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

Margin

Margin (All Sides)

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

.dcf-m-auto
margin (all sides): auto
.dcf-m-0
margin (all sides): 0
.dcf-m-1
margin (all sides): .42em
.dcf-m-2
margin (all sides): .56em
.dcf-m-3
margin (all sides): .75em
.dcf-m-4
margin (all sides): 1em
.dcf-m-5
margin (all sides): 1.33em
.dcf-m-6
margin (all sides): 1.78em
.dcf-m-7
margin (all sides): 2.37em
.dcf-m-8
margin (all sides): 3.16em
.dcf-m-9
margin (all sides): 4.21em
.dcf-m-10
margin (all sides): 5.62em
.dcf-m-11
margin (all sides): 7.49em
.dcf-m-12
margin (all sides): 10em

Margin Top

Utility classes for margin top use the mt notation.

.dcf-mt-auto
margin-top: auto
.dcf-mt-0
margin-top: 0
.dcf-mt-1
margin-top: .42em
.dcf-mt-2
margin-top: .56em
.dcf-mt-3
margin-top: .75em
.dcf-mt-4
margin-top: 1em
.dcf-mt-5
margin-top: 1.33em
.dcf-mt-6
margin-top: 1.78em
.dcf-mt-7
margin-top: 2.37em
.dcf-mt-8
margin-top: 3.16em
.dcf-mt-9
margin-top: 4.21em
.dcf-mt-10
margin-top: 5.62em
.dcf-mt-11
margin-top: 7.49em
.dcf-mt-12
margin-top: 10em

Margin Right

Utility classes for margin right use the mr notation.

.dcf-mr-auto
margin-right: auto
.dcf-mr-0
margin-right: 0
.dcf-mr-1
margin-right: .42em
.dcf-mr-2
margin-right: .56em
.dcf-mr-3
margin-right: .75em
.dcf-mr-4
margin-right: 1em
.dcf-mr-5
margin-right: 1.33em
.dcf-mr-6
margin-right: 1.78em
.dcf-mr-7
margin-right: 2.37em
.dcf-mr-8
margin-right: 3.16em
.dcf-mr-9
margin-right: 4.21em
.dcf-mr-10
margin-right: 5.62em
.dcf-mr-11
margin-right: 7.49em
.dcf-mr-12
margin-right: 10em

Margin Bottom

Utility classes for margin bottom use the mb notation.

.dcf-mb-auto
margin-bottom: auto
.dcf-mb-0
margin-bottom: 0
.dcf-mb-1
margin-bottom: .42em
.dcf-mb-2
margin-bottom: .56em
.dcf-mb-3
margin-bottom: .75em
.dcf-mb-4
margin-bottom: 1em
.dcf-mb-5
margin-bottom: 1.33em
.dcf-mb-6
margin-bottom: 1.78em
.dcf-mb-7
margin-bottom: 2.37em
.dcf-mb-8
margin-bottom: 3.16em
.dcf-mb-9
margin-bottom: 4.21em
.dcf-mb-10
margin-bottom: 5.62em
.dcf-mb-11
margin-bottom: 7.49em
.dcf-mb-12
margin-bottom: 10em

Margin Left

Utility classes for margin left use the ml notation.

.dcf-ml-auto
margin-left: auto
.dcf-ml-0
margin-left: 0
.dcf-ml-1
margin-left: .42em
.dcf-ml-2
margin-left: .56em
.dcf-ml-3
margin-left: .75em
.dcf-ml-4
margin-left: 1em
.dcf-ml-5
margin-left: 1.33em
.dcf-ml-6
margin-left: 1.78em
.dcf-ml-7
margin-left: 2.37em
.dcf-ml-8
margin-left: 3.16em
.dcf-ml-9
margin-left: 4.21em
.dcf-ml-10
margin-left: 5.62em
.dcf-ml-11
margin-left: 7.49em
.dcf-ml-12
margin-left: 10em

Object-Fit

.dcf-obj-fit-contain
object-fit: contain
.dcf-obj-fit-cover
object-fit: cover
.dcf-obj-fit-none
object-fit: none
Demonstration of object-fit contain
Demonstration of object-fit cover

Object-Position

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

Order (for Flexbox and Grid)

.dcf-1st
first
.dcf-2nd
second
.dcf-3rd
third

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

Overflow

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

Padding

Padding (All Sides)

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

.dcf-p-0
padding (all sides): 0
.dcf-p-1
padding (all sides): .42em
.dcf-p-2
padding (all sides): .56em
.dcf-p-3
padding (all sides): .75em
.dcf-p-4
padding (all sides): 1em
.dcf-p-5
padding (all sides): 1.33em
.dcf-p-6
padding (all sides): 1.78em
.dcf-p-7
padding (all sides): 2.37em
.dcf-p-8
padding (all sides): 3.16em
.dcf-p-9
padding (all sides): 4.21em
.dcf-p-10
padding (all sides): 5.62em
.dcf-p-11
padding (all sides): 7.49em
.dcf-p-12
padding (all sides): 10em

Padding Top

Utility classes for padding top use the pt notation.

.dcf-pt-0
padding-top: 0
.dcf-pt-1
padding-top: .42em
.dcf-pt-2
padding-top: .56em
.dcf-pt-3
padding-top: .75em
.dcf-pt-4
padding-top: 1em
.dcf-pt-5
padding-top: 1.33em
.dcf-pt-6
padding-top: 1.78em
.dcf-pt-7
padding-top: 2.37em
.dcf-pt-8
padding-top: 3.16em
.dcf-pt-9
padding-top: 4.21em
.dcf-pt-10
padding-top: 5.62em
.dcf-pt-11
padding-top: 7.49em
.dcf-pt-12
padding-top: 10em

Padding Right

Utility classes for padding right use the pr notation.

.dcf-pr-0
padding-right: 0
.dcf-pr-1
padding-right: .42em
.dcf-pr-2
padding-right: .56em
.dcf-pr-3
padding-right: .75em
.dcf-pr-4
padding-right: 1em
.dcf-pr-5
padding-right: 1.33em
.dcf-pr-6
padding-right: 1.78em
.dcf-pr-7
padding-right: 2.37em
.dcf-pr-8
padding-right: 3.16em
.dcf-pr-9
padding-right: 4.21em
.dcf-pr-10
padding-right: 5.62em
.dcf-pr-11
padding-right: 7.49em
.dcf-pr-12
padding-right: 10em

Padding Bottom

Utility classes for padding bottom use the pb notation.

.dcf-pb-0
padding-bottom: 0
.dcf-pb-1
padding-bottom: .42em
.dcf-pb-2
padding-bottom: .56em
.dcf-pb-3
padding-bottom: .75em
.dcf-pb-4
padding-bottom: 1em
.dcf-pb-5
padding-bottom: 1.33em
.dcf-pb-6
padding-bottom: 1.78em
.dcf-pb-7
padding-bottom: 2.37em
.dcf-pb-8
padding-bottom: 3.16em
.dcf-pb-10
padding-bottom: 5.62em
.dcf-pb-11
padding-bottom: 7.49em
.dcf-pb-12
padding-bottom: 10em

Padding Left

Utility classes for padding left use the pl notation.

.dcf-pl-0
padding-left: 0
.dcf-pl-1
padding-left: .42em
.dcf-pl-2
padding-left: .56em
.dcf-pl-3
padding-left: .75em
.dcf-pl-4
padding-left: 1em
.dcf-pl-5
padding-left: 1.33em
.dcf-pl-6
padding-left: 1.78em
.dcf-pl-7
padding-left: 2.37em
.dcf-pl-8
padding-left: 3.16em
.dcf-pl-9
padding-left: 4.21em
.dcf-pl-10
padding-left: 5.62em
.dcf-pl-11
padding-left: 7.49em
.dcf-pl-12
padding-left: 10em

Position

Flow

.dcf-static
position: static
.dcf-relative
position: relative
.dcf-absolute
position: absolute
.dcf-fixed
position: fixed
.dcf-sticky
position: sticky

Coordinates

.dcf-pin-top
top: 0
.dcf-pin-right
right: 0
.dcf-pin-bottom
bottom: 0
.dcf-pin-left
left: 0

SVG

.dcf-fill-current
fill: currentColor
.dcf-stroke-current
stroke: currentColor

Table Layout

.dcf-table-fixed
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>.

Typography

Font Size

.dcf-txt-base
font-size: 1rem
.dcf-txt-3xs
font-size: .56em
.dcf-txt-2xs
font-size: .63em
.dcf-txt-xs
font-size: .75em
.dcf-txt-sm
font-size: .84em
.dcf-txt-md
font-size: 1em
.dcf-txt-lg
font-size: 1.13em
.dcf-txt-h6
font-size: 1.13em, equivalent to h6 font size
.dcf-txt-h5
font-size: 1.33em, equivalent to h5 font size
.dcf-txt-h4
font-size: 1.5em, equivalent to h4 font size
.dcf-txt-h3
font-size: 1.78em, equivalent to h3 font size
.dcf-txt-h2
font-size: 2em, equivalent to h2 font size
.dcf-txt-h1
font-size: 2.37em, equivalent to h1 font size
.dcf-txt-xl
font-size: 2.67em
.dcf-txt-2xl
font-size: 3.16em
.dcf-txt-3xl
font-size: 4.21em
.dcf-txt-4xl
font-size: 4.74em
.dcf-txt-5xl
font-size: 5.62em
.dcf-txt-6xl
font-size: 6.32em

Horizontal Text Alignment

.dcf-txt-center
text-align: center
.dcf-txt-left
text-align: left
.dcf-txt-right
text-align: right

Vertical Text Alignment

.dcf-txt-baseline
vertical-align: baseline
.dcf-txt-top
vertical-align: top
.dcf-txt-middle
vertical-align: middle
.dcf-txt-bottom
vertical-align: bottom
.dcf-txt-text-top
vertical-align: text-top
.dcf-txt-text-bottom
vertical-align: text-bottom

Text Decoration

.dcf-txt-decor-none
text-decoration: none
.dcf-txt-decor-hover
text-decoration: underline on :hover

Text Wrap

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

Font Style

.dcf-roman
font-style: normal
.dcf-italic
font-style: italic

Font Weight

.dcf-regular
font-weight: regular
.dcf-bold
font-weight: bold

Line Height

Utility classes for line height use the lh notation.

.dcf-lh-1
line-height: 1
.dcf-lh-2
line-height: 1.13
.dcf-lh-3
line-height: 1.33
.dcf-lh-4
line-height: 1.5

Text Transform

.dcf-capitalize
text-transform: capitalize
.dcf-lowercase
text-transform: lowercase
.dcf-uppercase
text-transform: uppercase
.dcf-case-reset
text-transform: none

Visibility

.dcf-invisible
visibility: hidden
.dcf-visible
visibility: visible
.dcf-sr-only
visible for screen readers only

Z-index

.dcf-z-0
z-index: 0
.dcf-z-1
z-index: 1
.dcf-z-2
z-index: 2
Contributed By: 
IIM