# UMD Design System ## Components - [Expert Feed Overlay Cards](https://designsystem.umd.edu/components/experts-overlay-cards.md): The Experts Overlay feed provides a visual display of experts that can be filtered by college/school/unit or topics of expertise. Expert data is managed by the... - [Video Card](https://designsystem.umd.edu/components/video-cards-shorts.md): The Video Card supports "shorts," a common content type on social media and editorial sites. It leverages the browser's built-in video player. - [Grid Hero](https://designsystem.umd.edu/components/grid-hero.md): An image-led, interactive, and compelling page header. It requires one featured image or video plus eight supporting images. - [Media Stack](https://designsystem.umd.edu/components/image-stack.md): Developed for the FORWARD campaign, the Image Stack is an interactive component used to layer images or video media. - [Global University Header](https://designsystem.umd.edu/components/global-university-header.md): Top-most UMD site header that contains global branding and may have additional navigation. All official University of Maryland websites, not including student... - [Sticky Columns](https://designsystem.umd.edu/components/sticky-columns.md): Sticky Columns is a flexible option for a 2-column layout that allows either column to stick as a user scrolls down the page. - [Site Header](https://designsystem.umd.edu/components/site-header.md): Includes a site’s logo and global navigation items. The hamburger menu at left houses the full menu with main and overflow links plus utilities such as search.  - [Alerts](https://designsystem.umd.edu/components/alerts.md): Alerts are used for high-priority messaging. They can be sitewide or content specific. An example of a sitewide alert is highlighting an important submission... - [Site Alert](https://designsystem.umd.edu/components/site-wide-alert.md): The Site Alert appears on every page of a site and should rarely be used. It highlights essential information that is relevant to most users visiting a site.  - [Feature Quote](https://designsystem.umd.edu/components/feature-quote.md): The Feature Quote is a boxed-off option that makes a quote stand out. This option is especially effective when the quote serves as a strong feature on a page... - [Side Nav](https://designsystem.umd.edu/components/side-nav.md): The side navigation helps users navigate easily on websites that have multiple sections with numerous pages. - [Statistics Cards](https://designsystem.umd.edu/components/stat-cards.md): Statistics Cards are a large, visual way to showcase numerical facts. They tend to be grouped together for thematic storytelling.  - [Tabs](https://designsystem.umd.edu/components/tabs.md): Similar to Accordions, Tabs group related content in a condensed space. They allow users to alternate between different views and information within the same... - [Section Intro - Wide](https://designsystem.umd.edu/components/section-intro-wide.md): The Section Intro Wide is used to provide a title for wide components - those that go the full width of the page. - [Social Sharing](https://designsystem.umd.edu/components/social-sharing.md): The Social Sharing component allows users to share page content on specified social media channels. It also allows them to email content and print it out. - [Statistics](https://designsystem.umd.edu/components/stats.md): Statistics components are used to highlight impressive numbers. They can break up content in an interesting visual way that doesn’t rely on imagery. - [Simple Statistics](https://designsystem.umd.edu/components/simple-stats.md): Simple Statistics display statistics, rankings, or other numerical data in a simple layout.  - [Section Intro](https://designsystem.umd.edu/components/section-intro.md): Section Intros can be used standalone to highlight text or to introduce other components as a new section. They offer larger text in headline styles.  - [Default Section Intro](https://designsystem.umd.edu/components/default-section-intro.md): The Default Section Intro gives a title and background information for other components. It is center aligned with an optional red line accent.  - [Simple Quote](https://designsystem.umd.edu/components/simple-quote.md): The Simple Quote can feature shorter or longer quotes and may show an optional thumbnail image of the person being quoted. - [Image Expand](https://designsystem.umd.edu/components/image-expand.md): The Image Expand is a highly visual component requiring high-quality assets. The component image expands to take over a user’s screen as messaging is scrolled... - [Scroll to Top](https://designsystem.umd.edu/components/scroll-to-top.md): The Scroll To Top button lets users quickly return to the top of a page to access the site navigation. - [Person Hero](https://designsystem.umd.edu/components/person-hero.md): A Person Hero tops a bio page or page dedicated to the work of a single person. It offers an opportunity to provide deeper information about an individual and... - [Quote](https://designsystem.umd.edu/components/quote.md): Quotes lend authenticity to website content by showing where information comes from. They can also break up space on a page. - [People & Experts](https://designsystem.umd.edu/components/people.md): People components feature information about a person or expert, such as a photo, name, and contact information.  - [Person Card](https://designsystem.umd.edu/components/standard-people-card.md): The Person Card displays contact information for an individual.  - [Bio](https://designsystem.umd.edu/components/bio.md): The Bio Card presents introductory information about an individual. It contains contact information and brief biographical information that may be linked to a... - [Pathways](https://designsystem.umd.edu/components/pathways.md): Pathways are one of the most powerful and commonly used components. They provide a visual way to section information and often lead to deeper content. - [Standard Pathway](https://designsystem.umd.edu/components/standard-pathway.md): The Standard Pathway is a visually interesting way to section content on a page and link to deeper content. - [Text Pathway](https://designsystem.umd.edu/components/text-pathway.md): The Text Pathway is similar to the Standard Pathway but replaces the image with a highlighted text block. - [Sticky Pathway](https://designsystem.umd.edu/components/sticky-pathway.md): The Sticky Pathway is a version of a Pathway card that allows for long text alongside an image. The image sticks in place while a user scrolls through the... - [Navigation](https://designsystem.umd.edu/components/navigation.md): Navigation components show the section hierarchy on a site and allow users to move through different pages.  - [Nav item](https://designsystem.umd.edu/components/nav-item.md): A Nav Item is the basic element used in a site’s main navigation. It usually links to a landing page. - [Full Menu](https://designsystem.umd.edu/components/full-menu.md): Users can access all navigation links on a site with the Full Menu. It slides in from the left when opened.  - [Lists](https://designsystem.umd.edu/components/lists.md): Lists group content together in digestible chunks. Horizontal cards can be stacked in groups to display brief information and link to related content.While... - [Standard List](https://designsystem.umd.edu/components/standard-list.md): Lists group content together in digestible chunks. Horizontal cards can be stacked in groups to display brief information and link to related content.  - [Logo Grid](https://designsystem.umd.edu/components/logo-grid.md): The Logo Grid organizes multiple logos into a grid area. It’s useful to display business sponsors for an event or colleges and schools in partnership.  - [Split Hero](https://designsystem.umd.edu/components/split-hero.md): The Split Hero is an image-text split that provides ample space for messaging and imagery and allows for white space. - [Minimal Hero](https://designsystem.umd.edu/components/minimal-hero.md): The Minimal Hero is a simple hero for interior pages where the focus should be on text or content lower on the page. - [Stacked Hero](https://designsystem.umd.edu/components/stacked-hero.md): The Stacked Hero is a dynamic, messaging-focused page topper. An image is optional. - [Heroes](https://designsystem.umd.edu/components/heroes.md): Heroes set the stage for a page, right at the top. They contain images, videos, and messaging that help users understand what content to expect on the page and... - [Logo Hero](https://designsystem.umd.edu/components/logo-hero.md): The Logo Hero displays an organization-specific logo (that is not the site logo) in order to highlight a partnership or subgroup.  - [Overlay Hero](https://designsystem.umd.edu/components/overlay-hero.md): The Overlay Hero offers a dramatic, dynamic hero style. It uses a subtle layered angles pattern in the background. - [Background Hero](https://designsystem.umd.edu/components/background-hero.md): The Background Hero tops home and landing pages. It’s a visual hero that requires high-quality photography or video. - [Images & Media](https://designsystem.umd.edu/components/images.md): There are many ways to include images and other media in components. These include interactive components as well as simple image displays. - [Mega Footer](https://designsystem.umd.edu/components/mega-footer.md): Use a Mega Footer when there are multiple links that must be included in the footer. - [Simple Footer](https://designsystem.umd.edu/components/simple-footer.md): The Simple Footer is the most basic footer, with branding, contact information, and social icons. - [Visual Footer](https://designsystem.umd.edu/components/visual-footer.md): The Visual Footer option can be used with either the Simple Footer or the Mega Footer.  - [Footer](https://designsystem.umd.edu/components/footer.md): The footer appears at the bottom of the page and traditionally includes branding, contact information, social icons, and links. - [Event Card](https://designsystem.umd.edu/components/feature-event-card.md): The Event Card promotes events in groups. It is a visual component that gives a glimpse of event details and attracts users to learn more or take action.  ## Components Home - [Components](https://designsystem.umd.edu/components.md): Components are the building blocks of any website. They structure content on pages, provide critical information, and encourage users to take action.  ## Foundation - [Horizontal Spacing](https://designsystem.umd.edu/foundation/horizontal-spacing.md): Horizontal spacing is determined by the content width or “lock” per section or component and whether a left rail is needed. - [Vertical Spacing](https://designsystem.umd.edu/foundation/vertical-spacing.md): Codifying vertical spacing enables us to apply consistent rules for spacing, making the design and development processes more efficient. - [Layout](https://designsystem.umd.edu/foundation/layout.md): Layouts within the UMD Design System use a standardized grid and spacing system based on multiples of four. - [Type Mapping](https://designsystem.umd.edu/foundation/type-mapping.md): General guidelines on how font sizing adjusts between different device breakpoints - [Typography](https://designsystem.umd.edu/foundation/typography.md) - [Icons](https://designsystem.umd.edu/foundation/icons.md): There are 2 styles of icons used on UMD websites: user interface (UI) icons and icon card component icons. This page concerns UI icons. - [Color](https://designsystem.umd.edu/foundation/color.md): The University of Maryland's core brand colors are red, white, black, and gold. Inspired by the Maryland state flag, these colors reflect our role as... ## Foundation Home - [Foundation](https://designsystem.umd.edu/foundation.md): The UMD Design System is built on design foundations grounded in the UMD brand. The foundation pages provide background on the basic styles in place for the... ## Getting Started - [For Designers](https://designsystem.umd.edu/getting-started/getting-started-for-designers.md): The Design System provides reusable components that lend flexibility and a consistent visual style to university websites. - [For Developers](https://designsystem.umd.edu/getting-started/for-developers.md): The UMD Design System is a collection of open-sourced packages for building branded University of Maryland interfaces. - [For Content Managers](https://designsystem.umd.edu/getting-started/for-content-managers.md): The UMD Design System offers premade components that allow you to quickly build out content to meet your site’s needs. ## Getting Started Home - [Getting Started](https://designsystem.umd.edu/getting-started.md): How to enhance your website with the UMD Design System.  ## Principles Home - [Design Principles](https://designsystem.umd.edu/principles.md): UMD’s Design System is rooted in industry standards and the foundations of user experience (UX) and digital design. ## Resources Home - [Resources Home](https://designsystem.umd.edu/resources.md) ## Resources Pages - [May 2026](https://designsystem.umd.edu/resources/may-2026.md): Overlay cards & components for images - [What components can I use for image groups](https://designsystem.umd.edu/resources/what-components-can-i-use-for-image-groups.md): Get tips for choosing components that help you organize large collections of images into clear, meaningful sections—adding structure, context, and visual... - [April 2026](https://designsystem.umd.edu/resources/apr-2026.md): Nested content options within rich text & managing links and lists - [Managing large sets of links and lists](https://designsystem.umd.edu/resources/choosing-the-right-component-for-large-sets-of-links-and-listings.md): Collections of lists or links require organized, scannable layouts that help users navigate quickly and move forward with confidence. - [March 2026](https://designsystem.umd.edu/resources/mar-2026.md): Introducing UMD Experts! - [What components can I use for people or experts?](https://designsystem.umd.edu/resources/what-component-should-i-use-people-and-experts.md): Showcasing the variety of ways to display people and experts in the Design System. - [Using components to streamline content](https://designsystem.umd.edu/resources/using-components-to-streamline-content.md): Ways to use design system components to make content more accessible and easier to find. - [February 2026](https://designsystem.umd.edu/resources/feb-2026.md): Streamlining Content, Sticky Columns & Stats, Craft Tips - [January 2026](https://designsystem.umd.edu/resources/jan-2026.md): Image Expand, Sticky Pathway, Image & Text Combos, Creating Drafts - [What components can I use for text and an image?](https://designsystem.umd.edu/resources/what-components-can-i-use.md): Choosing components for images, text, and calls to action - [December 2025](https://designsystem.umd.edu/resources/december-2025.md): Quotes, Section Intros, Text Tips & Tricks, Using Preview Links - [What components can I use for text?](https://designsystem.umd.edu/resources/what-components-can-i-use-for-text.md): Get tips for choosing components that add layers of visual interest and emphasis to text-heavy content. - [November 2025](https://designsystem.umd.edu/resources/november-2025.md): Grid Hero, Video Cards, Card Tips & Tricks - [From walls of text to scannable paths](https://designsystem.umd.edu/resources/from-walls-of-text-to-scannable-paths.md): The redesigned Presidential Recognition page improves clarity and usability with scannable nominations, streamlined accordion, and a card-based winners layout. - [All about cards](https://designsystem.umd.edu/resources/all-about-cards.md): A deep dive into how and when to use cards, and all the layout options available for them. - [Approaches to a text heavy page](https://designsystem.umd.edu/resources/approaches-to-a-text-heavy-page.md): A look at user-centered design and decision making when choosing components for your website. - [October 2025](https://designsystem.umd.edu/resources/october-2025.md): Copy/Paste button, Home and Index Pages section, Wide Image Carousel, Media Stack - [Layout options for cards](https://designsystem.umd.edu/resources/layout-options-for-cards.md): Looking at the many different ways to layout pages using cards, including grids and carousels. ## Templates Home - [Templates](https://designsystem.umd.edu/templates.md): Templates in the Design System show a variety of page layouts and recommended combinations of components.