Overview
The Card Grid component displays a series of cards arranged in a grid. Each card can include a title, optional image or sticker, teaser text, and a link.
Common uses
- Highlight top-level categories on a landing page
- Direct users to related resources or priority actions (e.g., Apply, Explore, Visit)
- Feature research areas, academic concentrations, or student tools
- Create a visual menu of services or programs
Component example
Component fields
| Element name | Required | Multiple |
|---|---|---|
|
Title
Card title. Limit to a few words or a short phrase.
|
Yes
|
No
|
|
Eyebrow
Optional. Small label above the title. Limit to 1–2 words.
|
No
|
No
|
|
Badge
Optional. Short text that appears on card in colored badge.
|
No
|
No
|
|
Teaser
Optional. Short supporting text. Limit to a few sentences.
|
No
|
No
|
|
Link
Optional. Destination when the card is clicked (Page, File, or External Link).
|
No
|
No
|
|
Visual type
Visual type for the card (none, image, or sticker).
|
Yes
|
No
|
|
Image
Optional. 720×480.
|
No
|
No
|
|
Image alt text
Alternative text for the image. Required if an image is used.
|
Yes
|
No
|
|
Sticker ID
Rivet sticker ID. See the Rivet website for a list of stickers.
|
No
|
No
|
Accessibility
-
Use clear and concise headingsScreen readers rely on them for navigation.
-
Pair visuals with clear headingsDon’t use stickers or images as the only way to convey meaning—always include a title, teaser, and clear link text.
-
Use descriptive link textAvoid vague labels like Read more or Click here.
Do
- Use to present topics, categories, or important content
- Keep card titles short and scannable
- Use stickers for simple categories and images for visual storytelling
- Add teasers to explain what the user will find after clicking
- Link cards to relevant content clusters or resources