- Background Blend Modes
- Background Colors
- Background Images
- Border Colors
- Colors
- Fonts
- Heroes
- Letter Spacing
- Scroll Animations
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
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
#6d6d69
.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-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
#6d6d69
, 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
#6d6d69
.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
#6d6d69
.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
#6d6d69
.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
#6d6d69
.unl-bl-darker-gray
- border-left-color: darker gray
#424240
.unl-bl-darkest-gray
- border-left-color: darkest gray
#242423
Colors
Primary Brand Colors
.unl-scarlet
- scarlet
#d00000
.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
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
#6d6d69
.unl-dark-gray@dark
- dark gray
#6d6d69
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 |
--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: Gotham
.unl-font-serif
- serif font: Mercury Text
- Requires additional JavaScript
.unl-font-display
- display font: Liberator
.unl-font-mono
- monospace system fonts stack
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>

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

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

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

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












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












.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)
- Printer-friendly version
- Log in to post comments