---
title: Components
date: 2023-12-26T11:49:00-08:00
canonical_url: "https://designsystem.umd.edu/components"
section: Components Home
---
#  Components 

Components are the building blocks of any website. They structure content on pages, provide critical information, and encourage users to take action.

 

 

  

   The components below are grouped based on their intended purpose and content. Click on each component to see what it looks like, best practices for using it, and technical information for developers and designers.

To see example page layouts with components, visit the [Templates section](https://designsystem.umd.edu/templates).

 

  ##  Cards 

Cards contain bits of information on a single topic. They can also encourage users to take a specific action, such as registering for an event, reading related content, or exploring pages deeper within a site.

 

  [ ![Standard card: image, title and text, call to action](https://umd-design.transforms.svdcdn.com/production/component/card-standard.png?w=864&h=560&auto=compress%2Cformat&fit=crop&dm=1717595583&s=7a2f743b00abed218788b6708513b2c3) ](https://designsystem.umd.edu/components/standard-card) [Standard Card](https://designsystem.umd.edu/components/standard-card)

The most flexible card. Use in groups to lead to more content.

 

 

   [ ![Overlay cards](https://umd-design.transforms.svdcdn.com/production/component/Property-1overlay-card.png?w=864&h=560&auto=compress%2Cformat&fit=crop&dm=1715792830&s=c2291875bd867389825aa4f0da63e087) ](https://designsystem.umd.edu/components/overlay-card) [Overlay Card](https://designsystem.umd.edu/components/overlay-card)

A visual card where text overlays the bottom of an image. Also available as a plain card with no image.

 

 

   [ ![Icon Card Thumbnail](https://umd-design.transforms.svdcdn.com/production/component/Property-1icon-card.png?w=864&h=560&auto=compress%2Cformat&fit=crop&dm=1717702980&s=17fb63d34d5bc8f181d30d4c134ac0ad) ](https://designsystem.umd.edu/components/icon-card) [Icon Card](https://designsystem.umd.edu/components/icon-card)

A simple card that uses an icon to represent an idea

 

 

   [ ![List image](https://umd-design.transforms.svdcdn.com/production/component/Property-1listing.png?w=864&h=560&auto=compress%2Cformat&fit=crop&dm=1717689169&s=f0c527446c2bdd2dae9a380a8795a5e3) ](https://designsystem.umd.edu/components/standard-list) [Standard List](https://designsystem.umd.edu/components/standard-list)

A horizontal version of a card that can be used in groups to link to content

 

 

   [ ![circle, triangle, and rectangle within rectangle](https://umd-design.transforms.svdcdn.com/production/component/Property-1logo-grid.png?w=864&h=560&auto=compress%2Cformat&fit=crop&dm=1724435872&s=952310b2a9ad1d0e26827455570cfd8f) ](https://designsystem.umd.edu/components/logo-grid) [Logo Grid](https://designsystem.umd.edu/components/logo-grid)

A collection of logos organized in a grid

 

 

   [ ![Thumbnail: image of the armory - columned front of building on the left; blocks representing title, text and button on the right](https://umd-design.transforms.svdcdn.com/production/component/pathway.png?w=1728&h=1120&auto=compress%2Cformat&fit=crop&dm=1718115723&s=0524800375539be1895eaa6306cfb22a) ](https://designsystem.umd.edu/components/standard-pathway) [Standard Pathway](https://designsystem.umd.edu/components/standard-pathway)

Showcases important content and can lead users to deeper pages in a site. An option featuring statistics is available

 

 

   [ ![thumbnail - shows title, text blocks, and button on left side, blocks representing larger text on the right](https://umd-design.transforms.svdcdn.com/production/component/text-pathway.png?w=1728&h=1120&auto=compress%2Cformat&fit=crop&dm=1718056361&s=99aa53eca50ddb750a6d3aa41fcd2ccf) ](https://designsystem.umd.edu/components/text-pathway) [Text Pathway](https://designsystem.umd.edu/components/text-pathway)

A visual option for text content that allows for highlighted text

 

 

   [ ![Person cards](https://umd-design.transforms.svdcdn.com/production/component/Property-1people-card.png?w=864&h=560&auto=compress%2Cformat&fit=crop&dm=1729888853&s=a0aaa56db5959d0a103826cdd8694253) ](https://designsystem.umd.edu/components/standard-people-card) [Person Card](https://designsystem.umd.edu/components/standard-people-card)

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](https://umd-design.transforms.svdcdn.com/production/component/bio_2024-06-10-201406_eavx.png?w=1728&h=1120&auto=compress%2Cformat&fit=crop&dm=1718050499&s=303416ee73f22c8f3955bf93dac12e6d) ](https://designsystem.umd.edu/components/bio) [Bio](https://designsystem.umd.edu/components/bio)

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

 

 

   [ ![Thumbnail - photo of Iribe hall with yellow leaves on left, on right blocks depicting a title and text](https://umd-design.transforms.svdcdn.com/production/component/sticky-pathway.png?w=1728&h=1120&auto=compress%2Cformat&fit=crop&dm=1718056049&s=48a90d4bf4b014b1f2ca2b0771143bac) ](https://designsystem.umd.edu/components/sticky-pathway) [Sticky Pathway](https://designsystem.umd.edu/components/sticky-pathway)

Image and text combination that allows for long text. Image sticks in place while a user scrolls through text.

 

 

  

  ##  Carousels 

  [ ![Standard Image](https://umd-design.transforms.svdcdn.com/production/component/Property-1standard-carousel.png?w=864&h=560&auto=compress%2Cformat&fit=crop&dm=1717711492&s=434bedf772c848f3067df36726f0e4ea) ](https://designsystem.umd.edu/components/standard-image-carousel) [Standard Image Carousel](https://designsystem.umd.edu/components/standard-image-carousel)

Displays 1 image at a time

 

 

   [ ![carousel with a main image of modern campus building with text overlay of greek text, darkened smaller images on left and right with slide navigation. Title, text, and call to action lock up at the top in greek text](https://umd-design.transforms.svdcdn.com/production/component/Property-1wide-carousel.png?w=864&h=560&auto=compress%2Cformat&fit=crop&dm=1717711625&s=8a3790c35c4d2f27f60b89e9bf7094db) ](https://designsystem.umd.edu/components/wide-image-carousel) [Wide Image Carousel](https://designsystem.umd.edu/components/wide-image-carousel)

Highly visual component for use on home pages and landing page templates

 

 

   [ ![Greek text on left, 2 cards with carousel navigation. Left card is all text, right card is an image of ice cream in the background with greek text on top](https://umd-design.transforms.svdcdn.com/production/component/Property-1card-carousel.png?w=864&h=560&auto=compress%2Cformat&fit=crop&dm=1717707176&s=43222208727d6b36d4e4307ba1212f1f) ](https://designsystem.umd.edu/components/card-carousel) [Card Carousel](https://designsystem.umd.edu/components/card-carousel)

Shows 2 or more cards with additional information for context

 

 

   [ ![thumbnail showing 3 images (graduation, McKeldin Mall with people and fountain view, and Testudo mascot with Testudo statue](https://umd-design.transforms.svdcdn.com/production/component/multi-image-carousel.png?w=1728&h=1120&auto=compress%2Cformat&fit=crop&dm=1718050766&s=533f34ce806bf73c3e99546161f74923) ](https://designsystem.umd.edu/components/multi-image-carousel) [Multi Image Carousel](https://designsystem.umd.edu/components/multi-image-carousel)

Displays multiple small images at once

 

 

   [ ![4 people portraits in a carousel format](https://umd-design.transforms.svdcdn.com/production/component/thumbnail-carousel.png?w=1728&h=1120&auto=compress%2Cformat&fit=crop&dm=1722022854&s=f4c32d6325791c9c30ef19b30bda9dc8) ](https://designsystem.umd.edu/components/thumbnail-carousel) [Thumbnail Carousel](https://designsystem.umd.edu/components/thumbnail-carousel)

A collection of 4 or more cards

 

 

  

  ##  Events 

Promote events and important dates to users in a variety of ways.

 

  [ ![Banner calendar](https://umd-design.transforms.svdcdn.com/production/component/Property-1date-slider.png?w=864&h=560&auto=compress%2Cformat&fit=crop&dm=1717707429&s=41250e8b19ea0f07dc612b1d38a0f03f) ](https://designsystem.umd.edu/components/date-slider) [Date Slider](https://designsystem.umd.edu/components/date-slider)

Use for important dates when only a few dates need to be shown. Use for date feeds

 

 

   [ ![Feature image card](https://umd-design.transforms.svdcdn.com/production/component/Property-1event-card.png?w=864&h=560&auto=compress%2Cformat&fit=crop&dm=1717707841&s=a6dadee3eb7457c883110b448d17598c) ](https://designsystem.umd.edu/components/feature-event-card) [Event Card](https://designsystem.umd.edu/components/feature-event-card)

Use in groups of 2 or more to show multiple events

 

 

   [ ![Event cta](https://umd-design.transforms.svdcdn.com/production/component/Property-1event-overlay-card.png?w=864&h=560&auto=compress%2Cformat&fit=crop&dm=1717707873&s=7a8cacfff615debf20fcc06f53648923) ](https://designsystem.umd.edu/components/event-overlay-card) [Event Overlay Card](https://designsystem.umd.edu/components/event-overlay-card)

Use in groups of 2 or more to show multiple events in a standard or staggered layout

 

 

   [ ![Thumbnail: Watercolor image of turtle with MD flag with block representing calendar date overlaid on left; On right blocks representing title, text and button](https://umd-design.transforms.svdcdn.com/production/component/event-pathway.png?w=1728&h=1120&auto=compress%2Cformat&fit=crop&dm=1718115317&s=bddcb99d6cb630a362ef2fa8e3439998) ](https://designsystem.umd.edu/components/event-pathway) [Event Pathway](https://designsystem.umd.edu/components/event-pathway)

Highlights a single event

 

 

   [ ![Event listing](https://umd-design.transforms.svdcdn.com/production/component/Property-1eveent-list.png?w=864&h=560&auto=compress%2Cformat&fit=crop&dm=1717707781&s=b118579274acb85231c5861f411b5154) ](https://designsystem.umd.edu/components/event-list) [Event List](https://designsystem.umd.edu/components/event-list)

Shows multiple, equally-weighted events in a vertical list. Can be used with event feeds.

 

 

  

  ##  Heroes 

A Hero is the first section users see on a page. It provides visual appeal and context for a page’s content.

 

  [ ![Thumbnail of hero component - M lawn photo in background, "Who We Are", greek text and button](https://umd-design.transforms.svdcdn.com/production/component/Property-1default-hero.png?w=864&h=560&auto=compress%2Cformat&fit=crop&dm=1717707744&s=c8090a438af3888c68c1db9903cdf31b) ](https://designsystem.umd.edu/components/background-hero) [Background Hero](https://designsystem.umd.edu/components/background-hero)

A splashy, visual option for pages with strong imagery

 

 

   [ ![overlay hero style - photo of students walking, headline: What Does it Take to Change the World, Greek text, Learn more call to action button](https://umd-design.transforms.svdcdn.com/production/component/Property-1hero-overlay.png?w=864&h=560&auto=compress%2Cformat&fit=crop&dm=1717708954&s=96ea365a7f28229798497626d2fdb117) ](https://designsystem.umd.edu/components/overlay-hero) [Overlay Hero](https://designsystem.umd.edu/components/overlay-hero)

A dynamic, dramatic style suited for pages focused on innovation and technology

 

 

   [ ![Facts and Rankings headline, greek text, Learn more button stacked over photo of students in front of red stairway](https://umd-design.transforms.svdcdn.com/production/component/Property-1hero-stacked.png?w=864&h=560&auto=compress%2Cformat&fit=crop&dm=1717709016&s=e9c12d54ed82b252001e5470582fb9fb) ](https://designsystem.umd.edu/components/stacked-hero) [Stacked Hero](https://designsystem.umd.edu/components/stacked-hero)

A dynamic, messaging-focused page topper

 

 

   [ ![Headline: Reimagining Teaching & Learning, greek text, call to action; image of students at easels](https://umd-design.transforms.svdcdn.com/production/component/Property-1hero-split.png?w=864&h=560&auto=compress%2Cformat&fit=crop&dm=1717708990&s=ad4b8a378ea5c722872064130e08de75) ](https://designsystem.umd.edu/components/split-hero) [Split Hero](https://designsystem.umd.edu/components/split-hero)

A large display of balanced text and imagery

 

 

   [ ![Grid Hero Design System Header image](https://umd-design.transforms.svdcdn.com/production/component/Grid-Hero-Design-System-Header-image.jpg?w=864&h=560&auto=compress%2Cformat&fit=crop&dm=1757621610&s=d0042baa21b85ef34ec255f941bc4861) ](https://designsystem.umd.edu/components/grid-hero) [Grid Hero](https://designsystem.umd.edu/components/grid-hero)

An image-led, interactive, and compelling page header.

 

 

   [ ![Greek text in title on left, College Park at night photo on right. Narrow strip hero style, horizontally oriented](https://umd-design.transforms.svdcdn.com/production/component/Property-1hero-minimal.png?w=864&h=560&auto=compress%2Cformat&fit=crop&dm=1717708914&s=bbfc075d7a6720861a2c78d75aff1b79) ](https://designsystem.umd.edu/components/minimal-hero) [Minimal Hero](https://designsystem.umd.edu/components/minimal-hero)

A clean, simple option for text and content-heavy pages

 

 

   [ ![Logo hero thumbnail](https://umd-design.transforms.svdcdn.com/production/component/Property-1hero-logo.png?w=864&h=560&auto=compress%2Cformat&fit=crop&dm=1717527791&s=42de90a88afc518eda5c0593a747efc6) ](https://designsystem.umd.edu/components/logo-hero) [Logo Hero](https://designsystem.umd.edu/components/logo-hero)

A large logo presentation for prominent pages

 

 

   [ ![Thumbnail with blocks for person's name and title on left, right contains a card with portrait of a man, office and contact information blocks](https://umd-design.transforms.svdcdn.com/production/component/person-hero.png?w=1728&h=1120&auto=compress%2Cformat&fit=crop&dm=1718050585&s=017f98bd45089c1a81eb96ee5f94a59b) ](https://designsystem.umd.edu/components/person-hero) [Person Hero](https://designsystem.umd.edu/components/person-hero)

A dedicated hero for a bio page

 

 

   [ ![bold colorful graphic with "Fearlessly Forward"](https://umd-design.transforms.svdcdn.com/production/component/image-hero.png?w=1728&h=1120&auto=compress%2Cformat&fit=crop&dm=1779458241&s=a244dbd2592db468d64cac339d720e9f) ](https://designsystem.umd.edu/components/image-hero) [Image Hero](https://designsystem.umd.edu/components/image-hero)

A simple image option when all information can be conveyed in a single image.

 

 

  

  ##  Links 

Links encourage users to take specific actions with a single click (such as downloading content, registering for an event, or going to a different page or website).

 

  [ ![Example of a CTA Link](https://umd-design.transforms.svdcdn.com/production/component/Property-1call-to-action.png?w=864&h=560&auto=compress%2Cformat&fit=crop&dm=1717707136&s=54618a9b22bbb72ee56278a108be02b8) ](https://designsystem.umd.edu/components/call-to-action-2) [Call to Action (Button)](https://designsystem.umd.edu/components/call-to-action-2)

A stylized link directing users to take a specific action

 

 

   [ ![white arrow in a yellow bordered box](https://umd-design.transforms.svdcdn.com/production/component/scroll-top.png?w=1728&h=1120&auto=compress%2Cformat&fit=crop&dm=1721067196&s=59a3c2269d4fcca2cbad4da42421f8c7) ](https://designsystem.umd.edu/components/scroll-to-top) [Scroll to Top](https://designsystem.umd.edu/components/scroll-to-top)

Lets users quickly return to the top of a page

 

 

   [ ![Social Sharing Thumbnail](https://umd-design.transforms.svdcdn.com/production/component/Property-1social.png?w=864&h=560&auto=compress%2Cformat&fit=crop&dm=1717711464&s=ce1a9308e5936e1b951e3ef0709ac1bc) ](https://designsystem.umd.edu/components/social-sharing) [Social Sharing](https://designsystem.umd.edu/components/social-sharing)

Allow users to share page content via social media or email

 

 

  

  ##  Navigation 

Navigation components appear in many places on a website, including the main navigation, sidebar navigation, and footer. Navigation helps users find content and move through multiple levels of a site without getting lost.

 

  [ ![site header schematic sketch thumbnail](https://umd-design.transforms.svdcdn.com/production/component/Property-1site-header@2x.png?w=1728&h=1120&auto=compress%2Cformat&fit=crop&dm=1717711425&s=38257600fe40b8748bc8bf8601486e6a) ](https://designsystem.umd.edu/components/site-header) [Site Header](https://designsystem.umd.edu/components/site-header)

Includes a site’s logo and global navigation items

 

 

   [ ![Side navigation graphic](https://umd-design.transforms.svdcdn.com/production/component/Property-1interior-nav.png?w=864&h=560&auto=compress%2Cformat&fit=crop&dm=1717523173&s=ed26ca6cd3c39663673521e43275ff30) ](https://designsystem.umd.edu/components/side-nav) [Side Nav](https://designsystem.umd.edu/components/side-nav)

Helps users navigate sections on a site’s interior pages

 

 

   [ ![Red strip with "University of Maryland" and 2 lines representing navigation links](https://umd-design.transforms.svdcdn.com/production/component/global-university-header.png?w=1728&h=1120&auto=compress%2Cformat&fit=crop&dm=1738601155&s=b4423257b30adf0d582341870e24f8e3) ](https://designsystem.umd.edu/components/global-university-header) [Global University Header](https://designsystem.umd.edu/components/global-university-header)

Top-most UMD site header that contains global branding and may have additional navigation.

 

 

   [ ![Breadcrumbs Thumbnail](https://umd-design.transforms.svdcdn.com/production/component/Property-1breadcrumbs.png?w=864&h=560&auto=compress%2Cformat&fit=crop&dm=1717706948&s=fe3a0d7e147db406fc8cb9dbfbddcc08) ](https://designsystem.umd.edu/components/breadcrumbs) [Breadcrumbs](https://designsystem.umd.edu/components/breadcrumbs)

A navigational tool typically used on deeper interior pages

 

 

   [ ![Mege footer](https://umd-design.transforms.svdcdn.com/production/component/Property-1Variant47.png?w=1728&h=1120&auto=compress%2Cformat&fit=crop&dm=1718049616&s=067479b506162e2bc862002a7c273ecb) ](https://designsystem.umd.edu/components/mega-footer) [Mega Footer](https://designsystem.umd.edu/components/mega-footer)

Use when multiple links are required at the bottom of a page

 

 

   [ ![simple footer](https://umd-design.transforms.svdcdn.com/production/component/Property-1simple-footer.png?w=1728&h=1120&auto=compress%2Cformat&fit=crop&dm=1718049664&s=9ae4d97521ef6150326aa03a5ee954e9) ](https://designsystem.umd.edu/components/simple-footer) [Simple Footer](https://designsystem.umd.edu/components/simple-footer)

Use with minimal or no footer links

 

 

   [ ![Visual Footer Example](https://umd-design.transforms.svdcdn.com/production/component/Property-1footer.png?w=864&h=560&auto=compress%2Cformat&fit=crop&dm=1717707920&s=05d60f718f998a06b0b9eca0da7105db) ](https://designsystem.umd.edu/components/visual-footer) [Visual Footer](https://designsystem.umd.edu/components/visual-footer)

Provides a large visual accent

 

 

  

  ##  Organized Content 

When a page has large amounts of text, putting content into contained blocks helps users quickly move through information to find what they need. Chunking information also reduces clutter on a page.

 

  [ ![thumbnail - Accordion](https://umd-design.transforms.svdcdn.com/production/component/Property-1accordion.png?w=864&h=560&auto=compress%2Cformat&fit=crop&dm=1717703871&s=2ed16f281e5d5904ddef76f3f4eaa6ad) ](https://designsystem.umd.edu/components/accordion) [Accordion](https://designsystem.umd.edu/components/accordion)

Groups sections of related content in blocks that can be opened and closed

 

 

   [ ![Tab thumbnail](https://umd-design.transforms.svdcdn.com/production/component/Property-1tabs.png?w=864&h=560&auto=compress%2Cformat&fit=crop&dm=1717711598&s=b8324f6e10edd46605284e5746dbec9d) ](https://designsystem.umd.edu/components/tabs) [Tabs](https://designsystem.umd.edu/components/tabs)

Groups related content in a condensed space

 

 

   [ ![circle, triangle, and rectangle within rectangle](https://umd-design.transforms.svdcdn.com/production/component/Property-1logo-grid.png?w=864&h=560&auto=compress%2Cformat&fit=crop&dm=1724435872&s=952310b2a9ad1d0e26827455570cfd8f) ](https://designsystem.umd.edu/components/logo-grid) [Logo Grid](https://designsystem.umd.edu/components/logo-grid)

A collection of logos organized in a grid

 

 

   [ ![Lines representing a title and text block next to cards with images](https://umd-design.transforms.svdcdn.com/production/component/sticky-columns.jpg?w=1728&h=1120&auto=compress%2Cformat&fit=crop&dm=1731606409&s=e3b029d2cff40a1beca0aa6b52d93bd2) ](https://designsystem.umd.edu/components/sticky-columns) [Sticky Columns](https://designsystem.umd.edu/components/sticky-columns)

A 2-column layout option where one column "sticks" as a user scrolls down the page

 

 

  

  ##  People & Experts 

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

 

  [ ![Person cards](https://umd-design.transforms.svdcdn.com/production/component/Property-1people-card.png?w=864&h=560&auto=compress%2Cformat&fit=crop&dm=1729888853&s=a0aaa56db5959d0a103826cdd8694253) ](https://designsystem.umd.edu/components/standard-people-card) [Person Card](https://designsystem.umd.edu/components/standard-people-card)

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](https://umd-design.transforms.svdcdn.com/production/component/bio_2024-06-10-201406_eavx.png?w=1728&h=1120&auto=compress%2Cformat&fit=crop&dm=1718050499&s=303416ee73f22c8f3955bf93dac12e6d) ](https://designsystem.umd.edu/components/bio) [Bio](https://designsystem.umd.edu/components/bio)

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

 

 

   [ ![2 cards showing the faces of 2 people and a sketch of text](https://umd-design.transforms.svdcdn.com/production/component/componentexpert-overlay.png?w=1728&h=1120&auto=compress%2Cformat&fit=crop&dm=1770410210&s=7bfc8575ba6c061f5fe5c2c88b619b69) ](https://designsystem.umd.edu/components/experts-overlay-cards) [Expert Feed Overlay Cards](https://designsystem.umd.edu/components/experts-overlay-cards)

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

 

 

  

  ##  Stats 

Stats show statistics, rankings, or other numerical data.

 

  [ ![thumbnail of stat: large number, descriptive text, source text](https://umd-design.transforms.svdcdn.com/production/component/Property-1stats.png?w=864&h=560&auto=compress%2Cformat&fit=crop&dm=1717711573&s=ba4e052cf7dc25c1088f87aced2350e0) ](https://designsystem.umd.edu/components/simple-stats) [Simple Statistics](https://designsystem.umd.edu/components/simple-stats)

Use in groups of 2 or more

 

 

   [ ![what rectangle with "10th" and some lines to represent text](https://umd-design.transforms.svdcdn.com/production/component/stat-cards.png?w=1728&h=1120&auto=compress%2Cformat&fit=crop&dm=1724441355&s=0a4d680a85e20179c45439047162ce06) ](https://designsystem.umd.edu/components/stat-cards) [Statistics Cards](https://designsystem.umd.edu/components/stat-cards)

A large, visual way to show statistics

 

 

  

  ##  Text Highlight 

Sometimes messaging needs to stand out - whether it’s on a single page or across an entire website.

 

  [ ![alert blueprint](https://umd-design.transforms.svdcdn.com/production/component/content-alert.png?w=864&h=560&auto=compress%2Cformat&fit=crop&dm=1715098748&s=75e13e159c0bd0ffaf862b4e1b315225) ](https://designsystem.umd.edu/components/content-alert) [Content Alert](https://designsystem.umd.edu/components/content-alert)

Use for context-specific messaging on a page, such as reminders and announcements

 

 

   [ ![alert graphic - yellow background with a title and text](https://umd-design.transforms.svdcdn.com/production/component/Property-1site-wide-alert.png?w=864&h=560&auto=compress%2Cformat&fit=crop&dm=1717711440&s=2843e5780754b9f56b15155ed63823cf) ](https://designsystem.umd.edu/components/site-wide-alert) [Site Alert](https://designsystem.umd.edu/components/site-wide-alert)

An attention-grabbing notification that appears at the top of every page on a site

 

 

   [ ![Banner promo](https://umd-design.transforms.svdcdn.com/production/component/Property-1banner-promo.png?w=864&h=560&auto=compress%2Cformat&fit=crop&dm=1717705873&s=95507d9ad28cab63c9392fa2b87d93f9) ](https://designsystem.umd.edu/components/banner-promo) [Banner Promo](https://designsystem.umd.edu/components/banner-promo)

Promotes important information with short text and a call to action

 

 

   [ ![thumbnail - shows title, text blocks, and button on left side, blocks representing larger text on the right](https://umd-design.transforms.svdcdn.com/production/component/text-pathway.png?w=1728&h=1120&auto=compress%2Cformat&fit=crop&dm=1718056361&s=99aa53eca50ddb750a6d3aa41fcd2ccf) ](https://designsystem.umd.edu/components/text-pathway) [Text Pathway](https://designsystem.umd.edu/components/text-pathway)

A visual option for text content that allows for highlighted text

 

 

   [ ![Thumbnail - representing title on left and call to action on right](https://umd-design.transforms.svdcdn.com/production/component/section-intro-wide.png?w=1728&h=1120&auto=compress%2Cformat&fit=crop&dm=1718050412&s=5918696107473de4f5f069e8d01e77c3) ](https://designsystem.umd.edu/components/section-intro-wide) [Section Intro - Wide](https://designsystem.umd.edu/components/section-intro-wide)

Use with full-width or left-aligned components

 

 

   [ ![thumbnail - shows a quote icon and blocks to represent text and an attribution](https://umd-design.transforms.svdcdn.com/production/component/Property-1simple-quote.png?w=1728&h=1120&auto=compress%2Cformat&fit=crop&dm=1718056489&s=9b66f0efa39af25b9ffd8d48a67f814f) ](https://designsystem.umd.edu/components/simple-quote) [Simple Quote](https://designsystem.umd.edu/components/simple-quote)

Highlights text and can break up space on a page

 

 

   [ ![Featured Quote component thumbnail - red version of shows thumbnail photo and quote text](https://umd-design.transforms.svdcdn.com/production/component/Property-1quote.png?w=864&h=560&auto=compress%2Cformat&fit=crop&dm=1717711398&s=c462a6e3453b9b04f368cffc999e0023) ](https://designsystem.umd.edu/components/feature-quote) [Feature Quote](https://designsystem.umd.edu/components/feature-quote)

A stylized, boxed-off quote option

 

 

   [ ![Thumbnail showing an image of a person at a laptop with a tablet, blocks representing a quote from a person on the left](https://umd-design.transforms.svdcdn.com/production/component/Property-1image-expand-quote.png?w=1728&h=1120&auto=compress%2Cformat&fit=crop&dm=1718056704&s=0040f76bdff041a0fc333bdc1eba52f8) ](https://designsystem.umd.edu/components/image-expand) [Image Expand](https://designsystem.umd.edu/components/image-expand)

A large display of an image that expands to show messaging as the user scrolls