UNL-Specific

Skill Level:

Intermediate

Background Blend Modes

Utility classes for use with illustrated pattern background images.

.unl-bg-soft-light: background-blend-mode: soft-light

Background Colors

Utility classes for background colors use the bg notation.

Primary Brand Background Colors

.unl-bg-scarlet: scarlet #d00000
.unl-bg-cream: cream #fefdfa
.unl-bg-cream@dark: cream #fefdfa in dark mode

Secondary Brand Background Colors

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

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

User Interface Background Colors

.unl-bg-lightest-gray: lightest gray #f6f6f5
.unl-bg-lightest-gray@dark: lightest gray #f6f6f5 in dark mode
.unl-bg-lighter-gray: lighter gray #ebebea
.unl-bg-lighter-gray@dark: lighter gray #ebebea in dark mode
.unl-bg-light-gray: light gray #e3e3e2 Note that use of .unl-scarlet (this includes links) on .unl-bg-light-gray is not color contrast compliant.
.unl-bg-light-gray@dark: light gray #e3e3e2 in dark mode
.unl-bg-dark-gray: dark gray #6b6b68
.unl-bg-darker-gray: darker gray #424240
.unl-bg-darkest-gray: darkest gray #242423

Background Images

Utility classes for background images use the bg notation. Illustrated patterns should use 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.

.unl-bg-grit: grit background pattern
.unl-bg-diagonal-gradients: diagonal gradients background pattern, requires .unl-bg-soft-light class combined with desired background color class
.unl-bg-campus: illustrated general campus background pattern, requires .unl-bg-soft-light class combined with desired background color class
.unl-bg-landmarks: illustrated campus landmarks background pattern, requires .unl-bg-soft-light class combined with desired background color class
.unl-bg-majors: illustrated academic majors background pattern, requires .unl-bg-soft-light class combined with desired background color class

Border Colors

Border Colors (All Sides)

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

.unl-b-scarlet: border-color: scarlet #d00000, all sides
.unl-b-cream: border-color: cream #fefdfa, all sides
.unl-b-lightest-gray: border-color: lightest gray #f6f6f5, all sides
.unl-b-lighter-gray: border-color: lighter gray #ebebea, all sides
.unl-b-light-gray: border-color: light gray #e3e3e2, all sides
.unl-b-gray: border-color: gray #c7c8ca, all sides
.unl-b-dark-gray: border-color: dark gray #6b6b68, all sides
.unl-b-darker-gray: border-color: darker gray #424240, all sides
.unl-b-darkest-gray: border-color: darkest gray #242423, all sides

Border Top Colors

Utility classes for border top colors use the bt notation.

.unl-bt-scarlet: border-top-color: scarlet #d00000
.unl-bt-cream: border-top-color: cream #fefdfa
.unl-bt-lightest-gray: border-top-color: lightest gray #f6f6f5
.unl-bt-lighter-gray: border-top-color: lighter gray #ebebea
.unl-bt-light-gray: border-top-color: light gray #e3e3e2
.unl-bt-gray: border-top-color: gray #c7c8ca
.unl-bt-dark-gray: border-top-color: dark gray #6b6b68
.unl-bt-darker-gray: border-top-color: darker gray #424240
.unl-bt-darkest-gray: border-top-color: darkest gray #242423

Border Right Colors

Utility classes for border right colors use the br notation.

.unl-br-scarlet: border-right-color: scarlet #d00000
.unl-br-cream: border-right-color: cream #fefdfa
.unl-br-lightest-gray: border-right-color: lightest gray #f6f6f5
.unl-br-lighter-gray: border-right-color: lighter gray #ebebea
.unl-br-light-gray: border-right-color: light gray #e3e3e2
.unl-br-gray: border-right-color: gray #c7c8ca
.unl-br-dark-gray: border-right-color: dark gray #6b6b68
.unl-br-darker-gray: border-right-color: darker gray #424240
.unl-br-darkest-gray: border-right-color: darkest gray #242423

Border Bottom Colors

Utility classes for border bottom colors use the bb notation.

.unl-bb-scarlet: border-bottom-color: scarlet #d00000
.unl-bb-cream: border-bottom-color: cream #fefdfa
.unl-bb-lightest-gray: border-bottom-color: lightest gray #f6f6f5
.unl-bb-lighter-gray: border-bottom-color: lighter gray #ebebea
.unl-bb-light-gray: border-bottom-color: light gray #e3e3e2
.unl-bb-gray: border-bottom-color: gray #c7c8ca
.unl-bb-dark-gray: border-bottom-color: dark gray #6b6b68
.unl-bb-darker-gray: border-bottom-color: darker gray #424240
.unl-bb-darkest-gray: border-bottom-color: darkest gray #242423

Border Left Colors

Utility classes for border left colors use the bl notation.

.unl-bl-scarlet: border-left-color: scarlet #d00000
.unl-bl-cream: border-left-color: cream #fefdfa
.unl-bl-lightest-gray: border-left-color: lightest gray #f6f6f5
.unl-bl-lighter-gray: border-left-color: lighter gray #ebebea
.unl-bl-light-gray: border-left-color: light gray #e3e3e2
.unl-bl-gray: border-left-color: gray #c7c8ca
.unl-bl-dark-gray: border-left-color: dark gray #6b6b68
.unl-bl-darker-gray: border-left-color: darker gray #424240
.unl-bl-darkest-gray: border-left-color: darkest gray #242423

Box Shadow

Add a box-shadow to an element.

.unl-box-shadow: box shadow

Colors

Primary Brand Colors

.unl-scarlet: scarlet #d00000
.unl-scarlet@dark: scarlet #d00000 in dark mode
.unl-cream: cream #fefdfa
.unl-gray: gray #c7c8ca

Secondary Brand Colors

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

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

User Interface Colors

.unl-lightest-gray: lightest gray #f6f6f5
.unl-lighter-gray: lighter gray #ebebea
.unl-light-gray: light gray #e3e3e2
.unl-dark-gray: dark gray #6b6b68
.unl-dark-gray@dark: dark gray #6b6b68 in dark mode
.unl-darker-gray: darker gray #424240
.unl-darker-gray@dark: darker gray #424240 in dark mode
.unl-darkest-gray: darkest gray #242423
.unl-darkest-gray@dark: darkest gray #242423 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`	`#42424`
`--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

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

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

Add a circular frame to an element with `.dcf-ratio-1x1`, `.dcf-circle`, `.unl-frame-circle`.

Add a quadrilateral (rectangular) frame to an element with `.unl-frame-quad`.

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

.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

.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 the following JavaScript to be included once on the page:

<script>
  window.addEventListener('DOMContentLoaded', function() {
    WDN.initializePlugin('scroll-animations');
  }, false);
</script>

An image fades in from 0 to 1 opacity when scrolled into viewport with `.unl-scroll-fx-fade-in`.

<div class="dcf-ratio dcf-ratio-16x9 unl-scroll-fx-fade-in">
  <img 
    class="dcf-ratio-child dcf-obj-fit-cover"
    src="images/140109_NU_Michigan-1.jpg"
    alt="Concise – but descriptive – alternative text.">
</div>

An image moves from the right to the left when scrolled into viewport with `.unl-scroll-fx-move-left`.

<div class="dcf-ratio dcf-ratio-16x9 unl-scroll-fx-move-left">
  <img 
    class="dcf-ratio-child dcf-obj-fit-cover"
    src="images/140109_NU_Michigan-1.jpg"
    alt="Concise – but descriptive – alternative text.">
</div>

An image moves from the left to the right when scrolled into viewport with `.unl-scroll-fx-move-right`.

<div class="dcf-ratio dcf-ratio-16x9 unl-scroll-fx-move-right">
  <img 
    class="dcf-ratio-child dcf-obj-fit-cover"
    src="images/140109_NU_Michigan-1.jpg"
    alt="Concise – but descriptive – alternative text.">
</div>

An image moves up when scrolled into viewport with `.unl-scroll-fx-move-up`.

<div class="dcf-ratio dcf-ratio-16x9 unl-scroll-fx-move-up">
  <img 
    class="dcf-ratio-child dcf-obj-fit-cover"
    src="images/140109_NU_Michigan-1.jpg"
    alt="Concise – but descriptive – alternative text.">
</div>

Direct children of `.unl-scroll-fx-children-fade-in` fade in from 0 to 1 opacity at a staggered rate when scrolled into viewport.

<div class="dcf-grid-halves@sm dcf-grid-thirds@md dcf-col-gap-vw dcf-row-gap-5 unl-scroll-fx-children-fade-in">
  <div class="dcf-ratio dcf-ratio-16x9">
    <img 
      class="dcf-ratio-child dcf-obj-fit-cover"
      src="images/140109_NU_Michigan-1.jpg"
      alt="Concise – but descriptive – alternative text.">
  </div>
  <div class="dcf-ratio dcf-ratio-16x9">
    <img 
      class="dcf-ratio-child dcf-obj-fit-cover"
      src="images/140109_NU_Michigan-1.jpg"
      alt="Concise – but descriptive – alternative text.">
  </div>
  <div class="dcf-ratio dcf-ratio-16x9">
    <img 
      class="dcf-ratio-child dcf-obj-fit-cover"
      src="images/140109_NU_Michigan-1.jpg"
      alt="Concise – but descriptive – alternative text.">
  </div>
  <div class="dcf-ratio dcf-ratio-16x9">
    <img 
      class="dcf-ratio-child dcf-obj-fit-cover"
      src="images/140109_NU_Michigan-1.jpg"
      alt="Concise – but descriptive – alternative text.">
  </div>
  <div class="dcf-ratio dcf-ratio-16x9">
    <img 
      class="dcf-ratio-child dcf-obj-fit-cover"
      src="images/140109_NU_Michigan-1.jpg"
      alt="Concise – but descriptive – alternative text.">
  </div>
  <div class="dcf-ratio dcf-ratio-16x9">
    <img 
      class="dcf-ratio-child dcf-obj-fit-cover"
      src="images/140109_NU_Michigan-1.jpg"
      alt="Concise – but descriptive – alternative text.">
  </div>
  <div class="dcf-ratio dcf-ratio-16x9">
    <img 
      class="dcf-ratio-child dcf-obj-fit-cover"
      src="images/140109_NU_Michigan-1.jpg"
      alt="Concise – but descriptive – alternative text.">
  </div>
  <div class="dcf-ratio dcf-ratio-16x9">
    <img 
      class="dcf-ratio-child dcf-obj-fit-cover"
      src="images/140109_NU_Michigan-1.jpg"
      alt="Concise – but descriptive – alternative text.">
  </div>
  <div class="dcf-ratio dcf-ratio-16x9">
    <img 
      class="dcf-ratio-child dcf-obj-fit-cover"
      src="images/140109_NU_Michigan-1.jpg"
      alt="Concise – but descriptive – alternative text.">
  </div>
  <div class="dcf-ratio dcf-ratio-16x9">
    <img 
      class="dcf-ratio-child dcf-obj-fit-cover"
      src="images/140109_NU_Michigan-1.jpg"
      alt="Concise – but descriptive – alternative text.">
  </div>
  <div class="dcf-ratio dcf-ratio-16x9">
    <img 
      class="dcf-ratio-child dcf-obj-fit-cover"
      src="images/140109_NU_Michigan-1.jpg"
      alt="Concise – but descriptive – alternative text.">
  </div>
  <div class="dcf-ratio dcf-ratio-16x9">
    <img 
      class="dcf-ratio-child dcf-obj-fit-cover"
      src="images/140109_NU_Michigan-1.jpg"
      alt="Concise – but descriptive – alternative text.">
  </div>
</div>

The `.unl-scroll-fx-children-fade-in` can be paired with the `data-fx-duration` and `data-fx-stagger` attributes to manually adjust the length of the animation and stagger rate, respectively.

<div class="dcf-grid-halves@sm dcf-grid-thirds@md dcf-col-gap-vw dcf-row-gap-5 unl-scroll-fx-children-fade-in" data-fx-duration="1.25" data-fx-stagger=".5">
  <div class="dcf-ratio dcf-ratio-16x9">
    <img 
      class="dcf-ratio-child dcf-obj-fit-cover"
      src="images/140109_NU_Michigan-1.jpg"
      alt="Concise – but descriptive – alternative text.">
  </div>
  <div class="dcf-ratio dcf-ratio-16x9">
    <img 
      class="dcf-ratio-child dcf-obj-fit-cover"
      src="images/140109_NU_Michigan-1.jpg"
      alt="Concise – but descriptive – alternative text.">
  </div>
  <div class="dcf-ratio dcf-ratio-16x9">
    <img 
      class="dcf-ratio-child dcf-obj-fit-cover"
      src="images/140109_NU_Michigan-1.jpg"
      alt="Concise – but descriptive – alternative text.">
  </div>
  <div class="dcf-ratio dcf-ratio-16x9">
    <img 
      class="dcf-ratio-child dcf-obj-fit-cover"
      src="images/140109_NU_Michigan-1.jpg"
      alt="Concise – but descriptive – alternative text.">
  </div>
  <div class="dcf-ratio dcf-ratio-16x9">
    <img 
      class="dcf-ratio-child dcf-obj-fit-cover"
      src="images/140109_NU_Michigan-1.jpg"
      alt="Concise – but descriptive – alternative text.">
  </div>
  <div class="dcf-ratio dcf-ratio-16x9">
    <img 
      class="dcf-ratio-child dcf-obj-fit-cover"
      src="images/140109_NU_Michigan-1.jpg"
      alt="Concise – but descriptive – alternative text.">
  </div>
  <div class="dcf-ratio dcf-ratio-16x9">
    <img 
      class="dcf-ratio-child dcf-obj-fit-cover"
      src="images/140109_NU_Michigan-1.jpg"
      alt="Concise – but descriptive – alternative text.">
  </div>
  <div class="dcf-ratio dcf-ratio-16x9">
    <img 
      class="dcf-ratio-child dcf-obj-fit-cover"
      src="images/140109_NU_Michigan-1.jpg"
      alt="Concise – but descriptive – alternative text.">
  </div>
  <div class="dcf-ratio dcf-ratio-16x9">
    <img 
      class="dcf-ratio-child dcf-obj-fit-cover"
      src="images/140109_NU_Michigan-1.jpg"
      alt="Concise – but descriptive – alternative text.">
  </div>
  <div class="dcf-ratio dcf-ratio-16x9">
    <img 
      class="dcf-ratio-child dcf-obj-fit-cover"
      src="images/140109_NU_Michigan-1.jpg"
      alt="Concise – but descriptive – alternative text.">
  </div>
  <div class="dcf-ratio dcf-ratio-16x9">
    <img 
      class="dcf-ratio-child dcf-obj-fit-cover"
      src="images/140109_NU_Michigan-1.jpg"
      alt="Concise – but descriptive – alternative text.">
  </div>
  <div class="dcf-ratio dcf-ratio-16x9">
    <img 
      class="dcf-ratio-child dcf-obj-fit-cover"
      src="images/140109_NU_Michigan-1.jpg"
      alt="Concise – but descriptive – alternative text.">
  </div>
</div>

Related: Aspect Ratio (Utilities), Images (Elements), Object-Fit (Utilities), Object-Position (Utilities)

Contributed By:

IIM

Printer-friendly version
Log in to post comments