CSS

Objects

Wrapper

.dcf-wrapper

The wrapper object applies left and right padding to the page to provide adequate whitespace.

Bleed

.dcf-bleed

The bleed object forces content to extend beyond the confines of the wrapper object, filling the browser viewport.

Grids

.dcf-grid

The grid object lays out child elements in a grid of twelve columns. Why twelve? Twelve is divisible by two, three, four and six, making it ideal for dividing a grid into halves, thirds, fourths and sixths.

Grid-related object classes can be appended with the framework’s responsive suffixes (@sm, @md, @lg and @xl) to apply styles at the respective breakpoints.

.dcf-col-100%

Apply to a grid child element to define its column width as the full width of the grid. If you use any of the following column classes with responsive suffixes in your grid-based layout, you must also include .dcf-col-100%. The grid will not automatically create a single column for your grid content.

.dcf-col-50%-start

Apply to a grid child element to define the column width as one-half of the grid and locate it on the left side, at the start of the grid’s tracks.

.dcf-col-50%-center

Apply to a grid child element to define the column width as one-half of the grid and locate it in the center of the grid’s tracks.

.dcf-col-50%-end

Apply to a grid child element to define the column width as one-half of the grid and locate it on the right side, at the end of the grid’s tracks.

.dcf-col-50%

Apply to a grid child element to define the column width as one-half of the grid and locate it anywhere on the grid’s tracks based on the position of its sibling grid columns.

.dcf-col-33%-start

Apply to a grid child element to define the column width as one-third of the grid and locate it on the left side, at the start of the grid’s tracks.

.dcf-col-33%-center

Apply to a grid child element to define the column width as one-third of the grid and locate it in the center of the grid’s tracks.

.dcf-col-33%-end

Apply to a grid child element to define the column width as one-third of the grid and locate it on the right side, at the end of the grid’s tracks.

.dcf-col-33%

Apply to a grid child element to define the column width as one-third of the grid and locate it anywhere on the grid’s tracks based on the position of its sibling grid columns.

.dcf-col-67%-start

Apply to a grid child element to define the column width as two-thirds of the grid and locate it on the left side, at the start of the grid’s tracks.

.dcf-col-67%-center

Apply to a grid child element to define the column width as two-thirds of the grid and locate it in the center of the grid’s tracks.

.dcf-col-67%-end

Apply to a grid child element to define the column width as two-thirds of the grid and locate it on the right side, at the end of the grid’s tracks.

.dcf-col-67%

Apply to a grid child element to define the column width as two-thirds of the grid and locate it anywhere on the grid’s tracks based on the position of its sibling grid columns.

.dcf-col-25%-start

Apply to a grid child element to define the column width as one-fourth of the grid and locate it on the left side, at the start of the grid’s tracks.

.dcf-col-25%-end

Apply to a grid child element to define the column width as one-fourth of the grid and locate it on the right side, at the end of the grid’s tracks.

.dcf-col-25%

Apply to a grid child element to define the column width as one-fourth of the grid and locate it anywhere on the grid’s tracks based on the position of its sibling grid columns.

.dcf-col-75%-start

Apply to a grid child element to define the column width as three-fourths of the grid and locate it on the left side, at the start of the grid’s tracks.

.dcf-col-75%-end

Apply to a grid child element to define the column width as three-fourths of the grid and locate it on the right side, at the end of the grid’s tracks.

.dcf-col-75%

Apply to a grid child element to define the column width as three-fourths of the grid and locate it anywhere on the grid’s tracks based on the position of its sibling grid columns.

Grids of equal-width columns can more easily be created using the following grid objects instead of applying classes to each and every grid column in the twelve-column grid.

.dcf-grid-full

The grid-full object lays out child elements in a single column grid.

.dcf-grid-halves

The grid-halves object lays out child elements in a grid of two equal-width columns.

.dcf-grid-thirds

The grid-thirds object lays out child elements in a grid of three equal-width columns.

.dcf-grid-fourths

The grid-fourths object lays out child elements in a grid of four equal-width columns.

Grids of five and six equal-width columns start at the @md breakpoint because there is not enough horizontal space to reasonably accommodate most content in such narrow columns for widths below the @md breakpoint.

.dcf-grid-fifths@md

The grid-fifths object lays out child elements in a grid of five equal-width columns for breakpoints greater than or equal to @md. It must be suffixed with @md, @lg or @xl.

.dcf-grid-sixths@md

The grid-sixths object lays out child elements in a grid of six equal-width columns for breakpoints greater than or equal to @md. It must be suffixed with @md, @lg or @xl.

Media

.dcf-media

The media object consists of a single piece of media (e.g., photo, icon, video) located next to a block of text. The media object prevents the text from wrapping around the media.

.dcf-media-body

The media body is the block of text in the media object.

<div class="dcf-media">
  <div class="dcf-mr-4">
    <img src="https://placehold.co/100" alt="Placeholder image.">
  </div>
  <div class="dcf-media-body">
    <p class="dcf-w-max-lg">Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
  </div>
</div>

Components

Accordions (Collapsible Content)

See Details & Summary

Badges

.dcf-badge

This includes styles common to all badges and requires the addition of one of the following modifier classes to fully style a badge.

Roundrect Badges

.dcf-badge-roundrect

Use this modifier for a badge with roundrect shape.

Pill Badges

.dcf-badge-pill

Use this modifier for a badge with pill shape.

Blockquotes

.dcf-blockquote

Like inline quotes (<q>), the blockquote component automatically adds quotation marks—no need to add your own.

.dcf-attribution

To attribute the source of a quote, put the attribution in a <footer> element with the dcf-attribution class. It will automatically prepend an em dash (—) followed by a thin space ( ). If the attribution source comes from a creative work, it should be cited using the <cite> element and italicized with the <i> element to visually offset the title of the work from the rest of the attribution.

Buttons

Buttons include the <button> element, as well as form inputs (type="button" and type="submit") and links styled to appear as buttons.

.dcf-btn

This includes styles common to all buttons and requires the addition of one of the following modifier classes to fully style a button.

Primary Buttons

.dcf-btn-primary

Use the primary modifier to give standard emphasis to a button.

Secondary Buttons

.dcf-btn-secondary

Visually de-emphasize buttons by using the secondary modifier.

Tertiary Buttons

.dcf-btn-tertiary

Visually de-emphasize buttons by using the tertiary modifier.

Inverse Primary Buttons

.dcf-btn-inverse-primary

Use the inverse primary modifier to give standard emphasis to a button on a dark background.

Inverse Secondary Buttons

.dcf-btn-inverse-secondary

Visually de-emphasize buttons on a dark background by using the inverse secondary modifier.

Inverse Tertiary Buttons

.dcf-btn-inverse-tertiary

Visually de-emphasize buttons on a dark background by using the inverse tertiary modifier.

Buttons With Icons

.dcf-btn-icon

Button with an icon

<div class="dcf-d-flex dcf-flex-wrap dcf-gap-2">
  <button class="dcf-btn dcf-btn-primary dcf-btn-icon" type="button">Primary Button
    <svg class="dcf-fill-current" aria-hidden="true" focusable="false" height="16" width="16" viewBox="0 0 48 48">
      <path d="M18 36a17.9 17.9 0 0 0 11.27-4l15.31 15.41a2 2 0 0 0 2.84-2.82L32.08 29.18A18 18 0 1 0 18 36zm0-32A14 14 0 1 1 4 18 14 14 0 0 1 18 4z"></path>
    </svg>
  </button>
  <button class="dcf-btn dcf-btn-secondary dcf-btn-icon" type="button">Secondary Button
    <svg class="dcf-fill-current" aria-hidden="true" focusable="false" height="16" width="16" viewBox="0 0 48 48">
      <path d="M18 36a17.9 17.9 0 0 0 11.27-4l15.31 15.41a2 2 0 0 0 2.84-2.82L32.08 29.18A18 18 0 1 0 18 36zm0-32A14 14 0 1 1 4 18 14 14 0 0 1 18 4z"></path>
    </svg>
  </button>
  <button class="dcf-btn dcf-btn-tertiary dcf-btn-icon" type="button">Tertiary Button
    <svg class="dcf-fill-current" aria-hidden="true" focusable="false" height="16" width="16" viewBox="0 0 48 48">
      <path d="M18 36a17.9 17.9 0 0 0 11.27-4l15.31 15.41a2 2 0 0 0 2.84-2.82L32.08 29.18A18 18 0 1 0 18 36zm0-32A14 14 0 1 1 4 18 14 14 0 0 1 18 4z"></path>
    </svg>
  </button>
</div>

Button Groups

.dcf-btn-group

Group two or more buttons together.

Switch Buttons

.dcf-input-switch

Style a radio input like a button inside a button group.

<form class="dcf-form" action="?" method="post">
  <fieldset class="dcf-m-0 dcf-p-0 dcf-b-0">
    <legend class="dcf-legend">Campus</legend>
    <div class="dcf-form-group dcf-d-inline-flex dcf-flex-nowrap dcf-p-1 dcf-rounded dcf-b-1 dcf-b-solid unl-b-light-gray">
      <div class="dcf-input-switch">
        <input id="campus-city" name="campus" type="radio" value="city" checked>
        <label for="campus-city">City</label>
      </div>
      <div class="dcf-input-switch">
        <input id="campus-east" name="campus" type="radio" value="east">
        <label for="campus-east">East</label>
      </div>
      <div class="dcf-input-switch">
        <input id="campus-innovation" name="campus" type="radio" value="innovation">
        <label for="campus-innovation">Innovation</label>
      </div>
    </div>
  </fieldset>
</form>

Cards

.dcf-card

A card is a commonly-used design pattern that groups related content in a container that resembles a physical playing card.

.dcf-card-block The card block provides padding for text inside the card. Card contents that need to span the full width (like an image) should be placed outside of the card block.

Optionally, a card can be turned into a link. However, there are usability and accessibility issues with simply wrapping a card with an <a>. Instead, use the following classes and JavaScript to enable this functionality.

.dcf-card-as-link

Add to a card to turn the whole card into a link.

.dcf-card-link

The card needs a link defined to be used for the whole card. Apply this class to your source link.

<div class="dcf-card dcf-card-as-link dcf-d-flex dcf-flex-col dcf-bg-white">
  <div class="dcf-card-block dcf-2nd">
    <h3 class="dcf-txt-h4">Example Card</h3>
    <p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis. Aenean lacinia bibendum nulla sed consectetur.</p>
    <a class="dcf-card-link dcf-btn dcf-btn-primary" href="https://www.unl.edu">Go to Home Page</a>
  </div>
  <img class="dcf-1st" src="https://via.placeholder.com/800x600" alt="Placeholder image.">
</div>
<script>
  window.addEventListener('inlineJSReady', function() {
    WDN.initializePlugin('card-as-link');
  }, false);
</script>

Code

.dcf-pre

Retain code styling for multiple lines of code wrapped with <pre> element.

Datepickers

.dcf-datepicker

This class is applied to the wrapper <div> and is what the JavaScript targets to add functionality.

<form class="dcf-form" action="#" method="get">
  <div class="dcf-datepicker">
    <label for="sample-date">Date 2</label>
    <input id="sample-date" type="text" name="sample-date">
  </div>
</form>
<script>
  window.addEventListener('inlineJSReady', function() {
    WDN.initializePlugin('datepickers');
  }, false);
</script>

Figures

.dcf-figcaption Figures do not require any additional classes, but .dcf-figcaption provides consistent styles for the <figcaption>. It reduces the font-size and lightens the text to help distinguish it from body copy. Use utility classes to add margins or padding as needed by the content in your <figure>.

Forms

.dcf-form

Style a form and its children.

.dcf-form-group

Wrap groups of form elements (such as a label and input pair) to visually offset them from other form elements.

.dcf-form-controls-inline

At the small breakpoint, display labels and form controls inline (as space allows) instead of stacked.

.dcf-form-help

Formats help/description text that displays adjacent to a form element.

.dcf-required

Indicate that an adjacent form input is required to submit the form.

.dcf-input-checkbox

.dcf-input-radio

Wrap a checkbox or radio input and label pair for consistent cross-browser styling.

Unless you are using an input group with a button, labels should be placed above the corresponding text fields. Form fields and buttons should be presented in a left-aligned, single column layout so users aren't required to visually reorient themselves when scanning the form.

Use of Reset and Cancel buttons is discouraged.

Headings

Subheads

.dcf-subhead

A subhead is smaller and slightly lighter in appearance than a heading.

Input Groups

Input Groups With Add-ons

Input Groups With A Button

Lists

Inline Lists

Bare Lists

Modals

Notices

Pagination

Popups

Slideshows

Tables

Bordered Tables

Striped Tables

Responsive Tables

Scrollable Tables

Tabs

Videos

Utilties

Aspect Ratio

Background

Background Color

Background Position

Background Repeat

Background Size

Background None

Border Color

Border Color (All Sides)

Border Top Color

Border Right Color

Border Bottom Color

Border Left Color

Border Radius

Border Style

Border Style (All Sides)

Border Top Style

Border Right Style

Border Bottom Style

Border Left Style

Border Width

Border Width (All Sides)

Border Top Width

Border Right Width

Border Bottom Width

Border Left Width

Box Alignment

Align Items

Align Content

Align Self

Justify Items

Justify Content

Justify Self

Color

CSS Columns

Display

Flexbox

Direction

Wrap

Grow & Shrink

Float

Gap

Gap (for Flexbox and Grid)

Column Gap

Row Gap

Height & Width

Height

Min-Height

Max-Height

Width

Min-Width

Max-Width

Lazy Load

Margin

Margin (All Sides)

Margin Top

Margin Right

Margin Bottom

Margin Left

Object-Fit

Object-Position

Opacity

Order (for Flexbox and Grid)

Overflow

Padding

Padding (All Sides)

Padding Top

Padding Right

Padding Bottom

Padding Left

Position

Flow

Coordinates

SVG

Table Layout

Typography

Font Size

Horizontal Text Alignment

Vertical Text Alignment

Text Decoration

Text Wrap

Font Style

Font Weight

Line Height

Text Transform

Visibility

Z-index

UNL-Specific Classes

Background Blend Modes

Utility classes to apply background-blend-mode to elements.

Class	Description
.unl-bg-multiply	background-blend-mode: multiply
.unl-bg-soft-light	background-blend-mode: soft-light

Background Colors

Utility classes for background colors use the bg notation.

Primary Brand Background Colors

Class	Hex Color	Description
.unl-bg-scarlet	#d00000	scarlet
.unl-bg-cream	#fefdfa	cream
.unl-bg-cream@dark	#fefdfa	cream in dark mode

Secondary Brand Background Colors

Use in infographics, charts and graphs. Do not flood!

Class	Hex Color	Description
.unl-bg-cerulean	#42a7c6	cerulean
.unl-bg-green	#00784e	green
.unl-bg-light-green	#e7f1ea	light green
.unl-bg-light-green@dark	#e7f1ea	light green in dark mode
.unl-bg-blue	#007197	blue
.unl-bg-light-blue	#e7f0f0	light blue in dark mode
.unl-bg-light-blue@dark	#e7f0f0	light blue in dark mode
.unl-bg-purple	#b32d9c	purple
.unl-bg-light-purple	#f7eaf1	light purple
.unl-bg-light-purple@dark	#f7eaf1	light purple in dark mode
.unl-bg-yellow	#ffd74e	yellow
.unl-bg-orange	#f58a1f	orange

User Interface Background Colors

Class	Hex Color	Description
.unl-bg-lightest-gray	#f6f6f5	lightest gray
.unl-bg-lightest-gray@dark	#f6f6f5	lightest gray in dark mode
.unl-bg-lighter-gray	#ebebea	lighter gray
.unl-bg-lighter-gray@dark	#ebebea	lighter gray in dark mode
.unl-bg-light-gray	#e3e3e2	light gray
.unl-bg-light-gray@dark	#e3e3e2	light gray in dark mode
.unl-bg-dark-gray	#6b6b68	dark gray
.unl-bg-darker-gray	#424240	darker gray
.unl-bg-darkest-gray	#242423	darkest gray

Background Images

Utility classes for background images use the bg notation. Illustrated patterns can be combined with the .unl-bg-soft-light class which applies a soft light background blend mode to the image and allows for the pattern to be placed over any background color.

Class	Description
.unl-bg-grit	grit background pattern
.unl-bg-diagonal-gradients	diagonal gradients background pattern
.unl-bg-campus	illustrated general campus background pattern
.unl-bg-landmarks	illustrated campus landmarks background pattern
.unl-bg-majors	illustrated academic majors background pattern

Border Colors

Border Colors (All Sides)

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

Class	Hex Color	Description
.unl-b-scarlet	#d00000	scarlet, all sides
.unl-b-cream	#fefdfa	cream, all sides
.unl-b-lightest-gray	#f6f6f5	lightest gray, all sides
.unl-b-lighter-gray	#ebebea	lighter gray, all sides
.unl-b-light-gray	#e3e3e2	light gray, all sides
.unl-b-gray	#c7c8ca	gray, all sides
.unl-b-dark-gray	#6b6b68	dark gray, all sides
.unl-b-darker-gray	#424240	darker gray, all sides
.unl-b-darkest-gray	#242423	darkest gray, all sides

Border Top Colors

Utility classes for border-top colors use the bt notation.

Class	Hex Color	Description
.unl-bt-scarlet	#d00000	scarlet, top
.unl-bt-cream	#fefdfa	cream, top
.unl-bt-lightest-gray	#f6f6f5	lightest gray, top
.unl-bt-lighter-gray	#ebebea	lighter gray, top
.unl-bt-light-gray	#e3e3e2	light gray, top
.unl-bt-gray	#c7c8ca	gray, top
.unl-bt-dark-gray	#6b6b68	dark gray, top
.unl-bt-darker-gray	#424240	darker gray, top
.unl-bt-darkest-gray	#242423	darkest gray, top

Border Right Colors

Utility classes for border-right colors use the br notation.

Class	Hex Color	Description
.unl-br-scarlet	#d00000	scarlet, right
.unl-br-cream	#fefdfa	cream, right
.unl-br-lightest-gray	#f6f6f5	lightest gray, right
.unl-br-lighter-gray	#ebebea	lighter gray, right
.unl-br-light-gray	#e3e3e2	light gray, right
.unl-br-gray	#c7c8ca	gray, right
.unl-br-dark-gray	#6b6b68	dark gray, right
.unl-br-darker-gray	#424240	darker gray, right
.unl-br-darkest-gray	#242423	darkest gray, right

Border Bottom Colors

Utility classes for border-bottom colors use the bb notation.

Class	Hex Color	Description
.unl-bb-scarlet	#d00000	scarlet, bottom
.unl-bb-cream	#fefdfa	cream, bottom
.unl-bb-lightest-gray	#f6f6f5	lightest gray, bottom
.unl-bb-lighter-gray	#ebebea	lighter gray, bottom
.unl-bb-light-gray	#e3e3e2	light gray, bottom
.unl-bb-gray	#c7c8ca	gray, bottom
.unl-bb-dark-gray	#6b6b68	dark gray, bottom
.unl-bb-darker-gray	#424240	darker gray, bottom
.unl-bb-darkest-gray	#242423	darkest gray, bottom

Border Left Colors

Utility classes for border-left colors use the bl notation.

Class	Hex Color	Description
.unl-bl-scarlet	#d00000	scarlet, left
.unl-bl-cream	#fefdfa	cream, left
.unl-bl-lightest-gray	#f6f6f5	lightest gray, left
.unl-bl-lighter-gray	#ebebea	lighter gray, left
.unl-bl-light-gray	#e3e3e2	light gray, left
.unl-bl-gray	#c7c8ca	gray, left
.unl-bl-dark-gray	#6b6b68	dark gray, left
.unl-bl-darker-gray	#424240	darker gray, left
.unl-bl-darkest-gray	#242423	darkest gray, left

Box Shadow

Add a box-shadow to an element with .unl-box-shadow

Colors

Primary Brand Colors

Class	Hex Color	Description
.unl-scarlet	#d00000	scarlet
.unl-scarlet@dark	#d00000	scarlet in dark mode
.unl-cream	#fefdfa	cream
.unl-gray	#c7c8ca	gray

Secondary Brand Colors

Class	Hex Color	Description
.unl-cerulean	#42a7c6	cerulean
.unl-green	#00784e	green
.unl-green@dark	#00784e	green in dark mode
.unl-light-green	#e7f1ea	light green
.unl-blue	#007197	blue
.unl-blue@dark	#007197	blue in dark mode
.unl-light-blue	#e7f0f0	light blue
.unl-purple	#b32d9c	purple
.unl-light-purple@dark	#b32d9c	purple in dark mode
.unl-light-purple	#f7eaf1	light purple
.unl-yellow	#ffd74e	yellow
.unl-orange	#f58a1f	orange

User Interface Brand Colors

Class	Hex Color	Description
.unl-lightest-gray	#f6f6f5	lightest gray
.unl-lighter-gray	#ebebea	lighter gray
.unl-light-gray	#e3e3e2	light gray
.unl-dark-gray	#6b6b68	dark gray
.unl-dark-gray@dark	#6b6b68	dark gray in dark mode
.unl-darker-gray	#424240	darker gray
.unl-darker-gray@dark	#424240	darker gray in dark mode
.unl-darkest-gray	#242423	darkest gray
.unl-darkest-gray@dark	#242423	darkest gray in dark mode

Color Variables

Variable Name	Light Mode Value	Dark Mode Value
--bg-badge	#6b6b68	#e3e3e2
--bg-body	#fefdfa	#242423
--bg-brand-alpha	#d00000	#d00000
--bg-brand-light-zeta	#e7f1ea	#00784e
--bg-brand-light-eta	#e7f0f0	#007197
--bg-brand-light-theta	#f7eaf1	#b32d9c
--bg-btn-inverse-primary	#ebebea	#ebebea
--bg-btn-inverse-secondary	transparent	transparent
--bg-btn-inverse-tertiary	transparent	transparent
--bg-btn-primary	#d00000	#ebebea
--bg-btn-primary-hover	#9d0000	#ffffff
--bg-btn-secondary	#ffffff	transparent
--bg-btn-secondary-tertiary-hover	rgba(157,0,0,0.07)	hsla(0,0%,100%,0.07)
--bg-btn-tertiary	transparent	transparent
--bg-card	#fefdfa	#393937
--bg-code	rgba(0,0,0,0.05)	hsla(0,0%,100%,0.1)
--bg-dialog	#ffffff	#393937
--bg-input	#ffffff	#1f1f1e
--bg-input-disabled	#ebebea	#424240
--bg-input-group-addon	#f6f6f5	#6b6b68
--bg-inverse	#424240	#c7c8ca
--bg-kbd	#000000	#000000
--bg-light-gray	#e3e3e2	#333332
--bg-lighter-gray	#ebebea	#2e2e2d
--bg-lightest-gray	#f6f6f5	#292928
--bg-mark	#ffff00	#ffff00
--bg-modal-header	#fefdfa	#242423
--bg-modal-wrapper	#fefdfa	#242423
--bg-overlay-dark	rgba(36,36,35,0.94)	rgba(0,0,0,0.94)
--bg-overlay-light	hsla(45,67%,99%,0.94)	rgba(0,0,0,0.94)
--bg-pre	rgba(0,0,0,0.05)	rgba(0,0,0,0.05)
--bg-radio	#424240	#c7c8ca
--bg-required	transparent	rgba(157,0,0,0.25)
--bg-select-1	#ffffff	#1f1f1e
--bg-select-2	#ffffff	#1f1f1e
--bg-table-stripe	#f6f6f5	#242423
--bg-tab-selected	#ffffff	#393937
--bg-tabs-panel	#ffffff	#393937
--bg-white	#ffffff	#393937
--b	#e3e3e2	#424240
--b-breadcrumb-arrow	#c7c8ca	#c7c8ca
--b-btn-primary	#d00000	#ebebea
--b-btn-primary-hover	#9d0000	#ffffff
--b-btn-secondary	currentColor	currentColor
--b-btn-tertiary	transparent	transparent
--b-btn-inverse-primary	#ebebea	#ebebea
--b-btn-inverse-secondary	currentColor	currentColor
--b-btn-inverse-tertiary	transparent	transparent
--b-checkmark	#424240	#c7c8ca
--b-fieldset	#e3e3e2	#c7c8ca
--b-input	#c7c8ca	#6b6b68
--b-input-checked	#424240	#c7c8ca
--b-input-focus	#007197	#42a7c6
--b-input-group-addon	#c7c8ca	#6b6b68
--b-input-hover	#6b6b68	#c7c8ca
--b-light-gray	#e3e3e2	#424240
--b-lighter-gray	#ebebea	#424240
--b-lightest-gray	#f6f6f5	#424240
--b-required	transparent	#9e0000
--b-table	#e3e3e2	#424240
--b-tab	#e3e3e2	#424240
--b-tabs-panel	#e3e3e2	#424240
--active	#9d0000	#a0d2e0
--badge	#fefdfa	#242423
--body	#424240	#c7c8ca
--brand-alpha	#d00000	#f6f6f5
--brand-zeta	#00784e	#e7f1ea
--brand-eta	#007197	#e7f0f0
--brand-theta	#b32d9c	#f7eaf1
--brand-iota	#ffd74e	#ffd74e
--brand-kappa	#f58a1f	#f58a1f
--btn-inverse-primary	#d00000	#d00000
--btn-inverse-secondary	#ebebea	#ebebea
--btn-inverse-tertiary	#ebebea	#ebebea
--btn-primary	#ffffff	#d00000
--btn-secondary	#d00000	#ebebea
--btn-secondary-tertiary-hover	#9d0000	#ffffff
--btn-tertiary	#d00000	#ebebea
--caption	#242423	#fefdfa
--code	#5c5c59	#e1e2e3
--dark-gray	#6b6b68	#e3e3e2
--darker-gray	#424240	#ebebea
--darkest-gray	#242423	#f6f6f5
--figcaption	#6b6b68	#a4a4a1
--focus-outline	#007197	#42a7c6
--form-help	#6b6b68	#a4a4a1
--heading	#242423	#fefdfa
--hover	#9d0000	#a0d2e0
--input-group-addon	#6b6b68	#a4a4a1
--inverse	#fefdfa	#242423
--inverse-active	#fefdfa	#242423
--inverse-hover	#fefdfa	#242423
--inverse-link	#fefdfa	#242423
--inverse-visited	#fefdfa	#242423
--kbd	#00ff00	#00ff00
--link	#d00000	#71bdd3
--required	#d00000	#fefdfa
--select	#424240	#c7c8ca
--tab-selected	#424240	#c7c8ca
--visited	#9d0000	#a0d2e0

Fonts

Class	Description
.unl-font-sans	sans-serif font: Work Sans
.unl-font-serif	serif font: Source Serif (requires additional JavaScript)
.unl-font-display	display font: Liberator
.unl-font-mono	monospace system fonts stack

Frames

Add frames to an element.

Class	Description
.unl-frame-circle	Add a circular frame to an element
.unl-frame-quad	Add a quadrilateral (rectangular) frame to an element

Heroes

Legacy Hero

Code for legacy hero:

<!-- InstanceBeginEditable name="hero" -->
<div class="dcf-hero dcf-d-flex dcf-relative unl-hero-legacy unl-bg-darkest-gray">
<!-- InstanceEndEditable -->
  <div class="dcf-hero-group-1">
    <div class="dcf-breadcrumbs-wrapper">
      <nav class="dcf-breadcrumbs" id="dcf-breadcrumbs" role="navigation" aria-label="breadcrumbs">
        <!-- InstanceBeginEditable name="breadcrumbs" -->
        <ol>
          <li><a href="https://arts.unl.edu/music">Glenn Korff School of Music</a></li>
          <li><a href="https://arts.unl.edu/music/beyond-classroom">Beyond the Classroom</a></li>
          <li><span aria-current="page">Ensembles</span></li>
        </ol>
        <!-- InstanceEndEditable -->
      </nav>
    </div>
    <header class="dcf-page-title" id="dcf-page-title">
      <!-- InstanceBeginEditable name="pagetitle" -->
      <p class="dcf-subhead unl-font-sans unl-cream">Overline lorem ipsum</p>
      <h1 class="dcf-uppercase unl-cream">Undergraduate Page title</h1>
      <p class="dcf-subhead dcf-mt-4 unl-font-sans unl-cream">Subhead lorem ipsum</p>
      <!-- InstanceEndEditable -->
    </header>
    <!-- InstanceBeginEditable name="herogroup1" -->
    <a class="dcf-mt-5 dcf-btn dcf-btn-inverse-primary" href="#">Button 1</a>
    <a class="dcf-mt-5 dcf-btn dcf-btn-inverse-secondary" href="#">Button 2</a>
    <!-- InstanceEndEditable -->
  </div>
  <!-- InstanceBeginEditable name="herogroup2" -->
  <div class="dcf-hero-group-2 dcf-w-100% dcf-overflow-hidden">
    <div class="dcf-h-100% dcf-w-100% dcf-relative">
      <img
        class="dcf-obj-fit-cover dcf-h-100% dcf-w-100% unl-legacy-hero-bg"
        sizes="100vw"
        srcset="wdn/templates_5.0/images/dev/150821-tunnel-325-sm-min.jpg 284w,
                wdn/templates_5.0/images/dev/150821-tunnel-325-md-min.jpg 505w,
                wdn/templates_5.0/images/dev/150821-tunnel-325-lg-min.jpg 898w,
                wdn/templates_5.0/images/dev/150821-tunnel-325-xl-min.jpg 1596w"
        src="data:image/gif;base64,R0lGODlhAQABAAAAADs="
        alt="New students flow onto the field of Memorial Stadium during the annual Tunnel Walk.">
      <small class="dcf-absolute dcf-pin-bottom dcf-pin-right dcf-pt-2 dcf-pr-4 dcf-pb-2 dcf-pl-4 dcf-txt-3xs unl-font-sans unl-cream unl-legacy-hero-caption">Photo by Craig Chandler</small>
    </div>
  </div>
  <!-- InstanceEndEditable -->
</div>

Letter Spacing

Class	Description
.unl-ls-0	letter-spacing: 0
.unl-ls-1	letter-spacing: .01em
.unl-ls-2	letter-spacing: .06em
.unl-ls-3	letter-spacing: .1em
.unl-ls-h	slightly tighter letter-spacing to match headings

Scroll Animations

Class	Description
.unl-scroll-fx-fade-in	fade from 0 to 1 opacity when scrolled into viewport
.unl-scroll-fx-move-left	move from right to left when scrolled into viewport
.unl-scroll-fx-move-right	move from left to right when scrolled into viewport
.unl-scroll-fx-move-up	move up when scrolled into viewport
.unl-scroll-fx-children-fade-in	fade from 0 to 1 opacity all direct children when scrolled into viewport

All of the above classes require additional JavaScript to be included once on the page.

Print

Class	Description
.dcf-d-none@print	display none when printed