---
title: Expert Feed Overlay Cards
date: 2026-02-06T14:10:00-08:00
author: Zaida Jocson
canonical_url: "https://designsystem.umd.edu/components/experts-overlay-cards"
section: Components
---
# Expert Feed Overlay Cards

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 Office of Marketing & Communications. For more information about experts, contact mediainfo@umd.edu. 
Card grid display of experts including large photo, name, expertise topics, and college/school/unit.
## Dos
- Choose the number of cards to display per row based on the number of experts available and container width
- Ensure large-format portraits of experts are available to display
## Don'ts
- Don't include too many cards in a narrow space
## Variations

[View component playground: Expert Feed Overlay Cards](https://playground.designsystem.umd.edu/?path=/story/components-people-and-experts-overlay-card--experts-feed&singleStory=false)

## Accessibility

### Built in accessibility

**Consistency**
Styles are applied to the card consistently including line height, font style, weight, spacing and color of text. The heights of cards are maintained consistently when cards are grouped together in a row. This provides balance and allows for greater readability. WCAG 1.4.12: Text Spacing 

**Hover and Focus State**
Actionable items each have distinctive styling on hover/focus to provide a visual cue to the user that the element is focused and there is an action that can be taken. WCAG 1.4.13: Content on hover or focus

### Requirements for use

**Image**
Provide effective alt text of the image that is concise and relevant. Avoid phrases like “image of” since screen readers often already announce the type of element. WCAG 1.1: Text AlternativesDo not use an image to present text. True text should be used whenever possible, as it supports translation, is searchable, and is easier to maintain and customize.  WCAG 1.4.5: Images of Text

## Content

Expert data
| Expertise topics will be limited to 3 on card display | 
| Expert photo should be minimum 600px × 600px | 
## Layout

[View Figma design: Expert Feed Overly Card](https://www.figma.com/design/YqgNlOMETaJbcI67sv8HUp/Downloadable-Components-File?node-id=114336-1415&t=0GTzlSosBjmM2iMb-1)