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

People

People components feature information about a person, such as a photo, name, and contact information.

Person cards

Shows contact information for a single person. Use in multiples for a group of people.

Thumbnail for bio card - shows an image of a woman on the left, blocks denoting name, title, contact information and multiple lines for bio text

Shows name, title, contact information, and additional short details