- Aspect Ratio
- Background
- Border Color
- Border Radius
- Border Style
- Border Width
- Box Alignment
- Color
- CSS Columns
- Display
- Flexbox
- Float
- Gap
- Height & Width
- Lazy Load
- Margin
- Object-Fit
- Object-Position
- Opacity
- Order (for Flexbox and Grid)
- Overflow
- Padding
- Position
- SVG
- Table Layout
- Typography
- Visibility
- Z-index
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
<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
Gap
Gap (for Flexbox and Grid)
.dcf-gap-1
- gap: .42em
.dcf-gap-2
- gap: .56em
.dcf-gap-3
- gap: .75em
.dcf-gap-4
- gap: 1em
.dcf-gap-5
- gap: 1.33em
.dcf-gap-6
- gap: 1.78em
.dcf-gap-7
- gap: 2.37em
.dcf-gap-8
- gap: 3.16em
.dcf-gap-9
- gap: 4.21em
.dcf-gap-10
- gap: 5.62em
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-auto
- height: auto
.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-25%
- height: 25%
.dcf-h-50%
- height: 50%
.dcf-h-75%
- height: 75%
.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
.dcf-h-min-100vh
- min-height: 100vh
Max-Height
Utility classes for maximum height use the h-max
notation.
.dcf-h-max-0
- max-height: 0
.dcf-h-max-100%
- max-height: 100%
.dcf-h-max-100vh
- max-height: 100vh (viewport height)
.dcf-h-max-inf
- max-height: 999vh (viewport height)
Width
Utility classes for width use the w
notation.
.dcf-w-auto
- width: auto
.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-25%
- width: 25%
.dcf-w-50%
- width: 50%
.dcf-w-75%
- width: 75%
.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-3xs
- max-width: 9.99rem
.dcf-w-max-2xs
- max-width: 13.32rem
.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-2xl
- max-width: 74.83rem
.dcf-w-max-3xl
- max-width: 99.78rem
.dcf-w-max-4xl
- max-width: 133.03rem
.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
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
Opacity
.dcf-opacity-0
- opacity: 0
.dcf-opacity-100%
- opacity: 100%
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
Note: the .dcf-pin-*
classes will eventually be deprecated. Please use .dcf-top-0
or similar classes instead.
.dcf-top-0
.dcf-pin-top
- top: 0
.dcf-top-50%
- top: 50%
.dcf-top-100%
- top: 100%
.dcf-right-0
.dcf-pin-right
- right: 0
.dcf-right-50%
- right: 50%
.dcf-right-100%
- right: 100%
.dcf-bottom-0
.dcf-pin-bottom
- bottom: 0
.dcf-bottom-50%
- bottom: 50%
.dcf-bottom-100%
- bottom: 100%
.dcf-left-0
.dcf-pin-left
- left: 0
.dcf-left-50%
- left: 50%
.dcf-left-100%
- left: 100%
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: normal
.dcf-bold
- font-weight: bold
.dcf-bolder
- font-weight: bolder
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
- Printer-friendly version
- Log in to post comments