Card

containment

Cards contain content and actions about a single subject. They are surfaces that display content and actions on a single topic.

Variants

Elevated

Default

Card with shadow elevation

Filled

Card with filled background, no shadow

Outlined

Card with outline border, no shadow

Properties

Name Type Required Default Description
variant enum - elevated Visual style of the card
clickable boolean - - Whether the entire card is clickable
draggable boolean - - Whether the card can be dragged

States

enabled

Default state

hovered

Mouse hover state (interactive cards)

focused

Keyboard focus state (interactive cards)

pressed

Active/pressed state (interactive cards)

dragged

Being dragged (draggable cards)

Accessibility

Role: article (content) or button (clickable)
Keyboard Support:
  • Tab - Move focus to card (clickable) or first focusable element
  • Enter/Space - Activate clickable card
Screen Reader Notes: Use role="article" for content cards. Clickable cards should be role="button" or use a button/link inside. Ensure card content is accessible.

LLM Context

Intent: Group related content and actions about a single subject
Anti-Patterns:
  • Cards with too much content
  • Clickable cards with too many internal actions
  • Cards without clear visual hierarchy
  • Using cards as general-purpose containers
Example Usage: 
<md-elevated-card><div slot="headline">Card Title</div><div slot="supporting-text">Card content goes here.</div><div slot="actions"><md-text-button>Action</md-text-button></div></md-elevated-card>
<md-outlined-card clickable><div slot="headline">Clickable Card</div></md-outlined-card>
<md-filled-card><img slot="media" src="image.jpg"><div slot="headline">Image Card</div></md-filled-card>