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 Video Card

Carousels

Standard Image Carousel Wide 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 Grid Hero

Images & Media

Image Expand Media Stack

Lists

Standard List

Navigation

Site Header Side Nav Breadcrumbs Global University Header

Pathways

Standard Pathway Text Pathway Sticky Pathway

People & Experts

Person Card Bio Expert Feed Overlay Cards

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 & Experts

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

Related

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

2 cards showing the faces of 2 people and a sketch of text

Expert Feed Overlay Cards

Card grid display of experts including large photo, name, expertise topics, and college/school/unit.