Skill Level: 
Intermediate

Accordions (Collapsible Content)

See Details & Summary (Elements)

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.

h1. Heading with roundrect badge New

h2. Heading with roundrect badge New

h3. Heading with roundrect badge New

h4. Heading with roundrect badge New

h5. Heading with roundrect badge New
h6. Heading with roundrect badge New

Paragraph with roundrect badge New

Pill Badges

.dcf-badge-pill
Use this modifier for a badge with pill shape.

h1. Heading with pill badge New

h2. Heading with pill badge New

h3. Heading with pill badge New

h4. Heading with pill badge New

h5. Heading with pill badge New
h6. Heading with pill badge New

Paragraph with pill badge New

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 (&mdash;) followed by a thin space (&thinsp;). 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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Jane Doe in Source Title

Related: Blockquotes (Elements), Quotes (Elements)

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

Secondary Buttons

.dcf-btn-secondary
Visually de-emphasize buttons by using the secondary modifier.
Link

Tertiary Buttons

.dcf-btn-tertiary
Visually de-emphasize buttons by using the tertiary modifier.
Link

Inverse Primary Buttons

.dcf-btn-inverse-primary
Use the inverse primary modifier to give standard emphasis to a button on a dark background.
Link

Inverse Secondary Buttons

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

Inverse Tertiary Buttons

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

Button State: Active

Button State: Disabled

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.
This example shows a button group with primary buttons.
This example shows a button group with secondary buttons.

Switch Buttons

.dcf-input-switch
Style a radio input like a button inside a button group.
Campus
Switch buttons require the following classes applied to a parent form group: 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.
<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>

Related: Forms (Elements), Forms (Components), Gap (Utilties), Icons, Input Groups (Components)

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.
  • Card #1

    Donec sed odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.

    Placeholder image.
  • Card #2 with a super, duper long title

    Nulla vitae elit libero, a pharetra augue. Donec ullamcorper nulla non metus auctor fringilla. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean lacinia bibendum nulla sed consectetur.

    Placeholder image.
  • Card #3

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

    Placeholder image.
  • Card #4

    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.

    Placeholder image.

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>

Related: Lists (Elements), Grids (Objects), Unstyled Lists (Components), Gap (Utilities), Flexbox (Utilities), Order (Utilities)

Code

.dcf-pre
Retain code styling for multiple lines of code wrapped with <pre> element.
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Nulla vitae elit libero, a pharetra augue.</p>

Related: Code (Elements)

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>

Note: Be sure to replace sample-date with an id and name of your own.

Related: Buttons (Components), Forms (Elements), Forms (Components), Input Groups (Components)

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>.
Placeholder image.
A <figure> with one image and a <figcaption>.
Placeholder image. Placeholder image. Placeholder image.
A <figure> with multiple images and a <figcaption>. Use the <small> element along with display, padding and font-size utilities to credit the source(s) of figure content, like so: Illustrations by Jane Doe

Related: Figures (Elements), Images (Elements), Display (Utilities), Margins (Utilities), Padding (Utilities), Font Size (Utilities)

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.
Sample Form Content

Make sure it’s a good one!

Checkboxes
Radio buttons

This is some placeholder block-level help text for the above input. It’s a bit lighter and easily wraps to a new line.

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.

Related: Buttons (Elements), Buttons (Components), Forms (Elements), Input Groups (Components)

Headings

Subheads

.dcf-subhead
A subhead is smaller and slightly lighter in appearance than a heading. Change the order of headings and subheads by wrapping them in a <div class="dcf-d-flex dcf-flex-col"></div> and adding order classes (.dcf-1st, .dcf-2nd, et al.) to the headings and subheads.

Maecenas faucibus mollis interdum

Cras Ullamcorper Cursus Porta

Pellentesque Nibh Malesuada

Related: Headings (Elements), Display (Utilities), Flexbox (Utilities), Order (Utilities)

Input Groups

.dcf-input-group
An input group prepends or appends text or a button to a text input. The form label must be placed outside of the input group. It can be vertically aligned with the input group by adding .dcf-flex and .dcf-ai-center to the input group's parent element.

Input Groups With Add-ons

.dcf-input-group-addon
An add-on provides additional context for a text input in a form. It can be placed before and/or after the text input.
@
This example shows an input group with an add-on before the input.
@example.com
This example shows an input group with an add-on after the input.
$ .00
This example shows an input group with an add-ons before and after the input.

Input Groups With A Button

If a form consists of a single field and button, consider using an input group for a more compact layout.

<label for="dcf-input-group-button-input">Label</label>
<div class="dcf-input-group">
  <input id="dcf-input-group-button-input">
  <button class="dcf-btn dcf-btn-primary" type="submit">Submit</button>
</div>

Related: Buttons (Elements), Buttons (Components), Forms (Elements), Forms (Components), Box Alignment (Utilities), Display (Utilities)

Lists

Bare Lists

.dcf-list-bare
This removes the left padding from a list and removes numbers from ordered lists or bullets from unordered lists.
  • Bare list item #1
  • Bare list item #2
  • Bare list item #3
  • Bare list item #4
  • Bare list item #5

Inline Lists

.dcf-list-bare
Remove left padding and list styles for the inline list.
.dcf-list-inline
Change the display of list items to inline-block and add right margin to all but the last list item.
  • Inline list item #1
  • Inline list item #2
  • Inline list item #3
  • Inline list item #4
  • Inline list item #5

Inline lists are also used to create pagination:

Related: Lists (Elements)

Modals

.dcf-modal
Each modal requires a unique id which must also match the value of the data-opens-modal attribute of any button(s) that will open the modal. This also functions as the overlay background of the open modal.
.dcf-modal-wrapper
This wrapper includes the modal header and modal content and excludes the modal overlay background.
.dcf-modal-header
The header contains the modal’s heading and the button to close the modal.
.dcf-modal-content
Modal content should be placed inside this <div>.
.dcf-btn-toggle-modal
This button toggles a modal. Its data-toggles-modal attribute value should match the id of the target modal to toggle. The disabled attribute must be included. If the JavaScript fails to load, modals are inoperable and the disabled attribute conveys to users the button’s disabled state. If/when the JavaScript loads, it will remove the disabled attribute.
.dcf-btn-close-modal
This button is located in the modal content and closes the currently open modal.

While developers can – and should – add classes to style modals as needed, at a minimum, a modal requires the following markup for functionality:

<button class="dcf-btn-toggle-modal" data-toggles-modal="my-unique-modal-id" type="button" disabled>Toggle Modal</button>
<div class="dcf-modal" id="my-unique-modal-id" hidden>
  <div class="dcf-modal-wrapper">
    <div class="dcf-modal-header">
      <h2>Your modal heading</h2>
      <button class="dcf-btn-close-modal">Close</button>
    </div>
    <div class="dcf-modal-content">
      <!-- Modal content goes here -->
    </div>
  </div>
</div>

If a modal contains a video, the video will automatically pause playback when the modal is closed.

Related: Buttons (Elements), Headings (Elements), Wrapper (Objects), Headings (Components)

Notices

.dcf-notice
This includes styles common to all notices and requires one of the following modifier classes to fully style a notice.
.dcf-notice-info
This notice is for general informational content.
.dcf-notice-success
This notice signals completion of a successful action to a user.
.dcf-notice-warning
This notice should be used to warn users to proceed with caution.
.dcf-notice-danger
This notice indicates an error or dangerous content.
By default dcf-header and dcf-main don't have position: relative set so the overlay notices just appear at the top of the page. To reproduce: add the code to a notice
data-overlay="dcf-header"
This notice overlays the header.
data-overlay="dcf-main"
This notice overlays the maincontent.
<div class="dcf-notice dcf-notice-info" hidden>
  <h2>Info</h2>
  <div>This is additional information for this notice.</div>
</div>
<div class="dcf-notice dcf-notice-success" hidden>
  <h2>Success!</h2>
  <div>You've successfully completed an action.</div>
</div>
<div class="dcf-notice dcf-notice-warning" hidden>
  <h2>Warning!</h2>
  <div>Proceed with caution.</div>
</div>
<div class="dcf-notice dcf-notice-danger" hidden>
  <h2>Danger!</h2>
  <div>Uh-oh. Something wrong happened.</div>
</div>
<div class="dcf-notice dcf-notice-info" hidden data-overlay="dcf-header">
  <h2>I'm Floating!</h2>
  <div>This notice overlays the header.</div>
</div>
<div class="dcf-notice dcf-notice-success" hidden data-overlay="dcf-main">
  <h2>Success!</h2>
  <div>This notice overlays the maincontent.</div>
</div>
<script>
  window.addEventListener('inlineJSReady', function() {
    WDN.initializePlugin('notice');
  }, false);
</script>

Related: Forms (Elements), Forms (Components)

Pagination

Pagination requires a minimal amount of code from the developer. JavaScript handles the output of all the necessary attributes for state management and accessibility. Because pagination is, by its nature, an ordered collection of links, be sure to use an ordered list instead of an unordered list.

.dcf-pagination
This class is applied to the <nav> element and is what the JavaScript targets to add functionality.
.dcf-pagination-first
Adds a leftwards arrow to bar Unicode glyph before the button text.
.dcf-pagination-prev
Adds a leftwards arrow Unicode glyph before the button text.
.dcf-pagination-selected
.dcf-pagination-ellipsis
These two classes add padding around the text to match adjacent button padding.
.dcf-pagination-next
Adds a rightwards arrow Unicode glyph after the button text.
.dcf-pagination-last
Adds a rightwards arrow to bar Unicode glyph after the button text.
<nav class="dcf-pagination">
  <ol class="dcf-list-bare dcf-list-inline">
    <li><a class="dcf-pagination-first" href="#">First</a></li>
    <li><a class="dcf-pagination-prev" href="#">Prev</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><span class="dcf-pagination-selected">3</span></li>
    <li><span class="dcf-pagination-ellipsis">…</span></li>
    <li><a class="dcf-pagination-next" href="#">Next</a></li>
    <li><a class="dcf-pagination-last" href="#">Last</a></li>
  </ol>
</nav>
<script>
  window.addEventListener('inlineJSReady', function() {
    WDN.initializePlugin('pagination');
  }, false);
</script>

Related: Anchors (Elements), Ordered Lists (Elements), Inline Lists (Components), Bare Lists (Components)

Popups

Popups can be configured to open content when the user clicks on – or, optionally, hovers over – a button. Popup content is displayed below the toggle button by default, but can be positioned on any side of the toggle button. Triangle-shaped points can optionally be added to popup content, and those points can be aligned to the start, center or end of the popup. No additional JavaScript is required to initialize popups. Because they are used in the Visit / Apply / Give links in the header, they are included by default in the framework.

.dcf-popup
This class is applied to the wrapper <div> and is what the JavaScript targets to add functionality.
.dcf-btn-toggle-popup
This button toggles the display of a popup.
.dcf-popup-content
Popup content should be placed inside this <div>.
.dcf-btn-close-popup
Placed inside the popup content, this optional button provides an additional method for closing the popup.
data-hover="true"
This optional data-* attribute is placed on the <div class="dcf-popup"> and toggles a popup on hover in addition to button click.
data-point="true"
This optional data-* attribute is placed on the <div class="dcf-popup"> and adds a (triangle) point to the popup content.
data-position="*"
This optional data-* attribute is placed on the <div class="dcf-popup"> and positions the popup content on any side of the toggle button. Valid values are top, right, bottom and left. By default the popup is positioned to the bottom of the button.
data-alignment="*"
This optional data-* attribute is placed on the <div class="dcf-popup"> and controls the position of the (triangle) point on the popup content. Valid values are start, center and end.

Maecenas sed diam eget risus varius blandit sit amet non magna. Nulla vitae elit libero, a pharetra augue.

This example popup includes an optional point, default centered point alignment, default bottom popup position and optional close button. Width, padding, color, background color and other styling can be added with utility classes.
<div class="dcf-popup" data-point="true">
  <button class="dcf-btn dcf-btn-primary dcf-btn-toggle-popup">Toggle Popup</button>
  <div class="dcf-popup-content dcf-w-12 dcf-pt-4 dcf-pr-5 dcf-pb-4 dcf-pl-5 dcf-rounded dcf-bg-overlay-dark unl-cream">
    <p class="dcf-txt-xs">Maecenas sed diam eget risus varius blandit sit amet non magna. Nulla vitae elit libero, a pharetra augue.</p>
    <button class="dcf-btn dcf-btn-secondary dcf-btn-close-popup">Close Popup</button>
  </div>
</div>

Related: Buttons (Elements), Buttons (Components)

Slideshows

Slideshows require a minimal amount of code from the developer. JavaScript handles the output of all the necessary attributes for state management and accessibility. Each slideshow requires a list of slides to be placed inside a wrapper <div>. The list of slides may be either an ordered or unordered list, depending on your content. If your image requires a caption, use a <figcaption> inside of a <figure> (as shown in the sample code below). If your image doesn’t require a caption, do not use a <figure>.

.dcf-slideshow
This class is applied to the wrapper <div> and is what the JavaScript targets to add functionality.
  • Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Illustration by Jane Doe
  • Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Illustration by Jane Doe
<div class="dcf-slideshow">
  <ul>
    <li>
      <figure>
        <div class="dcf-ratio dcf-ratio-16x9 dcf-ratio-1x1@sm dcf-ratio-16x9@lg">
          <img class="dcf-d-block dcf-ratio-child dcf-obj-fit-cover" src="images/documentation/dcf-bands-basketball-crowd.jpg" alt="">
        </div>
        <figcaption>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. <small class="dcf-txt-xs dcf-txt-nowrap">Illustration by Jane Doe</small></figcaption>
      </figure>
    </li>
    <li>
      <figure>
        <div class="dcf-ratio dcf-ratio-16x9 dcf-ratio-1x1@sm dcf-ratio-16x9@lg">
          <img class="dcf-d-block dcf-ratio-child dcf-obj-fit-cover" src="images/documentation/2015-first-fb-game-wooooo.jpg" alt="">
        </div>
        <figcaption>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. <small class="dcf-txt-xs dcf-txt-nowrap">Illustration by Jane Doe</small></figcaption>
      </figure>
    </li>
    <li>
      <div class="dcf-ratio dcf-ratio-16x9 dcf-ratio-1x1@sm dcf-ratio-16x9@lg">
        <img class="dcf-d-block dcf-ratio-child dcf-obj-fit-cover" src="images/documentation/dcf-bands-basketball-halftime.jpg" alt="">
      </div>
    </li>
  </ul>
</div>
<script>
  window.addEventListener('inlineJSReady', function() {
    WDN.initializePlugin('slideshows');
  }, false);
</script>

Related: Figures (Elements), Images (Elements), Lists (Components), Aspect Ratios (Utilites), Object-Fit (Utilites)

Tables

Tables in the framework are optimized for readability by reducing unnecessary ornamentation and placing an emphasis on the content itself. Richard Rutter's article "Web Typography: Designing Tables to be Read, Not Looked At" (excerpted from his book, Web Typography) is an excellent resource on the subject.

.dcf-table
The table font-size is slightly smaller than the body copy. Padding and borders are also added.

Note: A table must have a defined width for the .dcf-table-fixed utility to work. Use a width utility class (e.g., .dcf-w-100%) with .dcf-table-fixed on your desired <table>.

This is a table. Utility classes are used to right-align numbers in this table.
Table heading Table heading Table heading Table heading
Table cell 49 Cras mattis consectetur purus sit amet fermentum Nullam Sollicitudin Mattis
Table cell 16 Nullam quis risus eget urna mollis ornare vel eu leo Ornare Porta Vulputate
Table cell 387 Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus Inceptos Ullamcorper Etiam
Table cell 9 Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit Bibendum Sit Lorem

Bordered Tables

.dcf-table-bordered
The bordered table adds borders to all cells in the table.
This is a bordered table.
Column 1 heading Column 2 heading Column 3 heading Column 4 heading
Row group 1 heading 49 Cras mattis consectetur purus sit amet fermentum Nullam Sollicitudin Mattis
16 Nullam quis risus eget urna mollis ornare vel eu leo Ornare Porta Vulputate
Row group 2 heading 387 Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus Inceptos Ullamcorper Etiam
9 Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit Bibendum Sit Lorem

Striped Tables

.dcf-table-striped
The striped table adds a subtle background color to alternating rows in the table.
This is a striped table.
Column 1 heading Column 2 heading Column 3 heading Column 4 heading
Row 1 heading 49 Cras mattis consectetur purus sit amet fermentum Nullam Sollicitudin Mattis
Row 2 heading 16 Nullam quis risus eget urna mollis ornare vel eu leo Ornare Porta Vulputate
Row 3 heading 387 Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus Inceptos Ullamcorper Etiam
Row 4 heading 9 Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit Bibendum Sit Lorem

Responsive Tables

.dcf-table-responsive
Responsive table contents display “stacked” at narrow screen widths.
This is a responsive table.
Greeting Amount Year Description
Hello $2.00 1984 Nullam id dolor id nibh ultricies vehicula ut id elit
Hi $999.99 1999 Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod. Nullam quis risus eget urna mollis ornare vel eu leo. Etiam porta sem malesuada magna mollis euismod.
Hey $1,000,000.01 2001 Donec ullamcorper nulla non metus auctor fringilla
Yo $.01 2020 Nulla vitae elit libero, a pharetra augue
This is a responsive bordered table.
Greeting Amount Year Description
Hello $2.00 1984 Nullam id dolor id nibh ultricies vehicula ut id elit
Hi $999.99 1999 Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod. Nullam quis risus eget urna mollis ornare vel eu leo. Etiam porta sem malesuada magna mollis euismod.
Hey $1,000,000.01 2001 Donec ullamcorper nulla non metus auctor fringilla
Yo $.01 2020 Nulla vitae elit libero, a pharetra augue
This is a responsive striped table.
Image Amount Year Description
Placeholder image. $2.00 1984 Nullam id dolor id nibh ultricies vehicula ut id elit
Placeholder image. $999.99 1999 Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod. Nullam quis risus eget urna mollis ornare vel eu leo. Etiam porta sem malesuada magna mollis euismod.
Placeholder image. $1,000,000.01 2001 Donec ullamcorper nulla non metus auctor fringilla
Placeholder image. $.01 2020 Nulla vitae elit libero, a pharetra augue

Scrollable Tables

Wrap your table in a <div class="dcf-overflow-x-auto" tabindex="0">.

Related: Tables (Elements), Borders (Utilities), Width (Utilities), Overflow (Utilities), Horizontal Text Alignment (Utilities), Table Layout (Utilities)

Tabs

Tabs require a minimal amount of code from the developer. JavaScript handles the output of all the necessary attributes for state management and accessibility. Each tab group requires a wrapper <div> and a heading, which may be visually hidden if necessary. The list of tabs may be either an ordered or unordered list, depending on your content. The tab panels may be either <div>s or <sections>s, however <div>s will suffice most of the time.

.dcf-tabs
This class is applied to the wrapper <div> and is what the JavaScript targets to add functionality.
.dcf-tabs-responsive
This optional class can be added to stack tabs vertically at narrower viewport widths.

Tab Group with Unordered List and Divs

Panel 1

Vestibulum id ligula porta felis euismod semper. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna.

Panel 2

Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nulla vitae elit libero, a pharetra augue. Vestibulum id ligula porta felis euismod semper. Cras mattis consectetur purus sit amet fermentum.

Panel 3

Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Be sure to give each tab panel a unique id and enter that same value in the corresponding tab’s href.

The <script> to initialize the tabs component is required only once per page, even if more than one tab group is included on the page.

<div class="dcf-tabs dcf-tabs-responsive">
  <h3>Tab Group Example Using Unordered List and Divs</h3>
  <ul>
    <li><a href="#example-panel-1">Tab 1</a></li>
    <li><a href="#example-panel-2">Tab 2</a></li>
    <li><a href="#example-panel-3">Tab 3</a></li>
  </ul>
  <div id="example-panel-1">
    <h4>Panel 1</h4>
    <p>Vestibulum id ligula porta felis euismod semper. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
  </div>
  <div id="example-panel-2">
    <h4>Panel 2</h4>
    <p>Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nulla vitae elit libero, a pharetra augue. Vestibulum id ligula porta felis euismod semper. Cras mattis consectetur purus sit amet fermentum.</p>
  </div>
  <div id="example-panel-3">
    <h4>Panel 3</h4>
    <p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </div>
</div>
<script>
  window.addEventListener('inlineJSReady', function() {
    WDN.initializePlugin('tabs');
  }, false);
</script>

Related: Headings (Elements), Lists (Elements), Anchors (Elements), Headings (Components), Visibility (Utilities)

Videos

.dcf-autoplay-video
This class must be applied to the parent element of all autoplay videos to add a toggle button to play/pause videos. When a user pauses an autoplay video, all autoplay videos on UNL sites will pause. Likewise, if a paused autoplay video is played, all autoplay videos will resume playing.

The autoplay, muted and playsinline attributes are required on all autoplay <video> elements. The loop attribute is optional.

The <script> to initialize the autoplay videos component is required only once per page, even if more than one video is included on the page.

<div class="dcf-autoplay-video dcf-ratio dcf-ratio-16x9">
  <video class="dcf-ratio-child dcf-obj-fit-cover" poster="https://wdn.unl.edu/wdn/templates_4.1/examples/samplecontent/2015-first-fb-game-wooooo.jpg" autoplay loop muted playsinline>
    <source src="https://wdn.unl.edu/wdn/templates_4.1/examples/samplecontent/2015-first-fb-game-fingers-crossed.mp4" type="video/mp4">
  </video>
</div>
<script>
  window.addEventListener('inlineJSReady', function() {
    WDN.initializePlugin('autoplay-videos');
  }, false);
</script>

Related: Aspect Ratios (Utilites), Object-Fit (Utilites)

Contributed By: 
IIM