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

Primary Buttons

Secondary Buttons

Tertiary Buttons

Inverse Primary Buttons

Inverse Secondary Buttons

Inverse Tertiary Buttons

Button State: Active

Button State: Disabled

Buttons With Icons

Button Groups

Switch Buttons

Cards

Code

Datepickers

Figures

Forms

Headings

Subheads

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

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