Skip to main content

UMDDesign System

Design Principles

Getting Started

For Content Managers For Designers For Developers

Foundation

Color Typography

Type Mapping

Layout

Vertical Spacing Horizontal Spacing

Icons

Components

Accordion Alerts

Content Alert Site Alert

Banner Promo Call to Action (Button) Cards

Standard Card Overlay Card Icon Card

Carousels

Standard Image Carousel Card Carousel Multi Image Carousel Thumbnail Carousel

Events

Date Slider Event Card Event Overlay Card Event Pathway Event List

Footer

Mega Footer Simple Footer Visual Footer

Heroes

Background Hero Overlay Hero Split Hero Stacked Hero Minimal Hero Logo Hero Person Hero

Image Expand Lists

Standard List

Navigation

Site Header Side Nav Breadcrumbs

Pathways

Standard Pathway Text Pathway Sticky Pathway

People

Person Card Bio

Quote

Simple Quote Feature Quote

Section Intro

Default Section Intro Section Intro - Wide

Scroll to Top Social Sharing Statistics

Simple Statistics Statistics Cards

Sticky Columns Tabs

Templates

Quote

Quotes lend authenticity to website content by showing where information comes from. They can also break up space on a page.

thumbnail - shows a quote icon and blocks to represent text and an attribution

Highlights text and can break up space on a page

Featured Quote component thumbnail - red version of shows thumbnail photo and quote text

A stylized, boxed-off quote option