Button-Style Cards
Provide quick, prominent links to related content or tasks
This component helps surface key destinations in a grid layout, supporting scannability and clear calls to action.
Example page context showing where a Button-Style Card is typically used
✓ Use this component when:
- You need to provide quick access to related links
- Users are navigating between tasks, journeys, or resources
- Links are of equal importance
- A grid layout improves clarity and scanning
✕ Avoid using this component when:
- You are highlighting a single primary story (use 50/50 Card instead)
- Links require long descriptions or detailed explanation
- Content needs to be read sequentially
- You need dense, text-heavy content
Choosing between similar components
If your goal is…
| Your goal | Use this component |
|---|---|
Provide quick links to related content | Button-Style Cards |
Highlight one primary feature | 50/50 Card |
Display multiple content previews with summaries | Vertical Cards |
Provide a simple inline call to action | Call to Action Links |
Button-Style Cards overview
A Button-Style Card is a clickable card that displays an icon or image, link, and short description. Button-Style Cards are often grouped and displayed as a grid to provide prominent links to common resources.
Example: Providing quick access to key resources
This example shows Button-Style Cards used to provide quick access to related resources. Each card represents a destination of equal importance, allowing users to scan and select what they need.
Elements of Button-Style Cards
| Element | Purpose |
|---|---|
Icon or image | Displays at the top of the card |
Heading | Describes the topic of the card and links to more details about the topic |
Text | Provides descriptive details about the topic |
Guidance on using Button-Style Cards
- Group related links. Use a group of Button-Style Cards to provide links to related user journeys, tasks, or topics.
- Use concise, descriptive headings. Provide headings that both describe the topic of the card and serve as descriptive link text.
- Provide a summary. Provide a brief summary of the topic or task supported by the linked content.
- Use relevant images. Use icons and images that signpost the source or topic of the linked content as well as provide visual interest.
Content guidelines
Write clear, descriptive headings
Headings should clearly communicate the destination or task.
Use brief supporting text
Summaries should provide context without overwhelming the layout.
Avoid redundancy
Do not repeat information already conveyed in headings or icons.
Ensure link clarity
Card text and visuals should make the destination obvious before clicking.
Accessibility considerations
- Ensure sufficient color contrast between text and background
- Use descriptive headings that function as clear link text
- Avoid relying solely on icons to communicate meaning
- Maintain logical focus order for keyboard navigation
Button-Style Cards features
| Feature | Standard |
|---|---|
Optimized color contrast | Minimum Contrast |
Heading links with underlines | Link Indicators |
Heading used as card control name | Control Names |
Left-aligned headings and text | Text Block Alignment |
Button-Style Cards Showcase
This example shows the Button-Style Cards component with two linked cards, each with a centered filled icon followed by a heading and short text summary.
This example shows the Button-Style Cards component with two linked cards, each with an image followed by a heading and short text summary.
This example shows the Button-Style Cards component with two linked cards, each with an image followed by a heading.