---
url: /components/cards/overview.md
description: Cards display content and actions about a single subject.
---

# Cards

Cards display content and actions about a single subject.

**Overview** · [Specs](specs.md) · [Guidelines](guidelines.md) · [Accessibility](accessibility.md)

![Cards](/assets/e6cac4be-mrol77ga-card.C3FhQW7I.webp)

* Use cards to contain related elements
* Three variants: elevated, filled, outlined
* Contents can include anything from images to headlines, supporting text, [buttons](../buttons/overview.md "Buttons let people take action and make choices with one tap."), and [lists](../lists/overview.md "Lists are continuous, vertical indexes of text and images.")
* Can also contain other components
* Cards have flexible [layouts](../../foundations/layout/layout-overview/overview.md "Layout is the visual arrangement of elements on the screen.") and dimensions based on their contents

![3 variants of cards](/assets/1a45b319-lwuilyza-1.DJ02V-RI.webp)

1. Elevated card
2. Filled card
3. Outlined card

## Availability & resources

| Type | Resource | Status |
| --- | --- | --- |
| Design | [Design Kit (Figma)](https://www.figma.com/community/file/1035203688168086460) | Available |
| Implementation | [Flutter](https://api.flutter.dev/flutter/material/Card-class.html) | Available |
| Implementation | [Android Views (MDC-Android)](https://github.com/material-components/material-components-android/blob/master/docs/components/Card.md) | Available |
| Implementation | [Jetpack Compose](https://developer.android.com/develop/ui/compose/components/card) | Available |
| Implementation | Web | Unavailable |

## Differences from M2

* Color: New color mappings and compatibility with [dynamic color](../../styles/color/dynamic/choosing-a-source.md "Dynamic color takes a single color from a user's wallpaper or in-app content and creates an accessible color scheme assigned to elements in the UI.")
* Elevation: Lower elevation and no shadow by default
* Variants: Three official card variants – elevated, filled, and outlined

![M3-style card](/assets/3bfd633d-lwuimnd8-2.CBz5tcVx.webp)

Cards have updated colors, elevation, and variants