Components Overview

The UO Web Design Framework offers a wide number of components to use for building websites or web applications.

Component list

• Back to Top Links

  A link to the page top.

• Breadcrumb

  A set of links to parent pages in the menu structure.

• Photo Button

  Linked photos with a text overlay.

• Captioned Photo

  Photos with a text caption underneath.

• Card (Version 2)

  Flexible containers for blocks of content.

• Collapse Menu

  A list of links that display on desktop but collapse into an accordion on mobile

• Call to Action Button

  Links with extra visual emphasis.

• Envelope

  Containers for full-width content.

• Feature Envelope

  Spotlight envelope with a prominent photo.

• Hero Envelope

  Lead page envelope with an immersive image.

• Statistics Envelope

  Envelope displaying a group of large numbered statistics.

• Story Blocks Envelope

  Envelope displaying two primary stories.

• Summary Envelope

  Envelope showing a page summary paragraph.

• Gallery (V2)

  Flexible lightbox-galleries for images.

• Grid

  Responsively align groups of items into columns

• Grid (V2)

  Responsively align groups of items into columns

• Link List

  An inline list of links.

• List

  A list to group content.

• Listing

  A list of stories or profiles with images and titles.

• Longform Breakout

  An element that breaks out of its container.

• Longform Heading

  A stylized heading for longform stories.

• Longform Layout

  Content-width variants for longform storytelling.

• Mobile Menu

  Collapsible sidebar navigation for mobile devices.

• Navigation bar

  Top level page navigation.

• Pager

  Standard numerical pagination.

• Alphabetical Pager

  Alphabetical pagination.

• Pullquote

  A stoundout quotation.

• Resource Listing

  A collection of links for a number of resources.

• Search Dialog

  A modal search dialog.

• Section Header

  A narrow heading banner for a section.

• Site Footer

  The footer of the site.

• Site Header

  The header of the site.

• Skip to Content Link

  A link to skip past navigation.

• Sprites

  Standardized iconography.

• Statistics

  Big number displays for marketing.

• Tables

  Mobile-friendly tables.

• Tabs

  Admin-menu tabs for pages.

• Timeline

  Show chronological events and processes.

• UO Footer

  Standardized branded footer.

• UO Header

  Standardized branded header.

• Videos

  Responsive video containers.