Action card

An action card turns a whole card into one click target that opens a link or runs an action. Its three variants set how far the card stands out from its surroundings, and a built-in badge saves you a separate counter element. Press any card below, and watch one badge come and go while another card sells out and returns.

Dal tadka

Quick rice

Soup of the day

Saved recipes

Plum and star anise tart

add_shopping_cart

timer

star

Cooking for six

Notes

Market stall

Last slice

favorite

Leftovers

bookmark

Reference docs⁠

Blazor

React

Web

Overview

Examples

API

Styling

Accessibility

Choosing a card⁠

Two components share the card's surface. Each suits a different job:

Card: a container grouping content about one subject, with its own buttons if it needs them, such as a recipe summary.
Action card: a whole card that is one click target, opening or doing one thing, such as a product tile.

Two jobs belong elsewhere. A single action is a button, and items in a column are a list.

Choosing a variant⁠

Three variants set how far an action card stands out from its surroundings, from most to least:

Elevated: a card that has to lift off a patterned or same-color surface, such as a product tile on a photo wall.
Filled: the middle ground, such as a recipe tile on a plain page.
Outlined: a quiet card among equals, such as one choice in a row of options on a surface of the same color.

Built in⁠

One click target: without href the whole card is a button, and with it a link.
A touch target of at least 48 by 48 pixels, even when the card paints smaller (touch-target).
A badge that needs no separate element: badge-value, badge-dot, and badge-concealed.
A tooltip (tooltip-value) that a screen reader reads as the card's description.
A soft-disabled state (soft-disabled) that keeps a button card focusable while it blocks the click.

Using action cards well⁠

Give each card one primary action. Put several actions in a Card with buttons inside it.
Choose one variant for a group of cards, and keep elevated, filled, and outlined from mixing in one list.
Keep buttons and links out of a button card: HTML does not allow interactive content inside a button.
Make a whole-card link with href, so the card keeps its state layer, focus ring, and touch target.
Let a card's width follow its grid cell or column rather than its content.
Clip at the document, never on a wrapper around a card: the touch target paints outside the card's box, and a clipping ancestor cuts it off.

These rules follow Material 3 Expressive's guidance for cards, on material.io.

Variants⁠

variant takes three values: elevated, filled, and outlined. Omit it and the card takes the variant from your style configuration, which is outlined unless you have changed it. The Overview says when to choose each.

Size⁠

touch-target sets the area that takes a touch, which is at least 48 by 48 pixels and centered on the card. The default is overflow unless your style configuration changes it: a card smaller than 48 pixels takes touches outside its box.

wrapper makes the card occupy the space the touch target needs, and none reduces the target to the card's own size.

Badges⁠

badge-value sets the badge's text, and badge-dot shows a small dot instead, with or without a value. badge-concealed hides the badge and keeps its settings, so clearing it brings the same badge back.

Tooltips⁠

tooltip-value adds a tooltip that opens on hover and on focus, and tooltip-position places it. The position defaults to end-center unless your style configuration changes it. A card with no tooltip-value has no tooltip.

Links⁠

href turns the card into a link. target says where the link opens.

The preview refuses _blank, so the second card below does nothing there. On your own page it opens a new tab.

Disabled and soft-disabled⁠

disabled takes the card out of the Tab order and blocks the click. soft-disabled keeps the card focusable, announces it as disabled, and blocks the click, which suits a card that needs to stay visible and findable.

A card with href ignores both and stays a working link.

Properties⁠

Property	Attribute	Type	Description
`badgeConcealed`	`badge-concealed`	`boolean`default `false`	Hides the badge while keeping its value and dot setting, so clearing this property shows the same badge again. See Badges.
`badgeDot`	`badge-dot`	`boolean`default `false`	Shows the badge as a small dot with no text, whether or not `badgeValue` is set. See Badges.
`badgeValue`	`badge-value`	`string`	The badge's text. While it is empty and `badgeDot` is not set, no badge renders. Ignored if `badgeDot` is set. See Badges.
`disabled`	`disabled`	`boolean`default `false`	Whether or not the card is disabled. A disabled link card cannot be followed. See Disabled and soft-disabled.
`download`	`download`	`string`	Downloads the linked URL instead of navigating to it. A file name saves it under that name, and an empty string downloads it under the server's own name, like the bare HTML attribute. Unset, it navigates. Ignored unless `href` is set.
`href`	`href`	`string`	Makes the card a link to this URL. A screen reader announces it as a link rather than a button. A disabled or soft-disabled link card cannot be followed. See Links, Disabled and soft-disabled.
`maskContent`	`mask-content`	`boolean`	Clips the content to the component's shape, so anything that extends past a rounded corner is cut off.
`rel`	`rel`	`string`	The link's relationship to the linked URL, as the anchor's `rel`, used exactly as given. Unset, the anchor has no `rel`. Ignored unless `href` is set.
`softDisabled`	`soft-disabled`	`boolean`default `false`	Whether or not the card is "soft-disabled" (disabled but still focusable). A soft-disabled link card cannot be followed.Use this when a card needs increased visibility when disabled. For when this is needed, see WAI-ARIA Authoring Practices: disabled controls. See Disabled and soft-disabled.
`target`	`target_blank`, `_self`, `_parent`, `_top`, `""`	`UrlTargetUrlTarget.Blank`, `.Self`, `.Parent`, `.Top`, `.Empty`default `UrlTarget.Empty`	Where to display the linked `href` URL. Common options include `_blank` to open in a new tab. Ignored unless `href` is set. See Links.
`tooltipPosition`	`tooltip-positionstart-start`, `start-center`, `start-end`, `center-start`, `center-end`, `end-start`, `end-center`, `end-end`	`TooltipPositionTooltipPosition.StartStart`, `.StartCenter`, `.StartEnd`, `.CenterStart`, `.CenterEnd`, `.EndStart`, `.EndCenter`, `.EndEnd`default `TooltipPosition.EndCenter`, from the style configuration	Where the tooltip appears around the element, such as above or beside it. It has no effect without `tooltipValue`. See Tooltips.
`tooltipValue`	`tooltip-value`	`string`	The tooltip's text. The tooltip opens on hover and on focus, and a screen reader announces it as the control's description unless it only repeats the control's name. No tooltip renders while it is empty. See Tooltips.
`touchTarget`	`touch-targetnone`, `overflow`, `wrapper`	`TouchTargetTouchTarget.None`, `.Overflow`, `.Wrapper`default `TouchTarget.Overflow`, from the style configuration	The area that takes a touch, at least 48 by 48 pixels and centered on the component. `overflow` extends it past the component without changing the component's layout size, `wrapper` makes the component take up the whole area in the layout, and `none` limits it to the component's own size. See Size.
`variant`	`variantelevated`, `filled`, `outlined`	`CardVariantCardVariant.Elevated`, `.Filled`, `.Outlined`default `CardVariant.Outlined`, from the style configuration	Sets whether the card is raised with a shadow, filled with a solid color, or flat with an outline. See Variants.

A target other than _self opens the link without giving the new page access to the page that opened it.

Slots⁠

Slot	Description
(default)	The card's content.

Events⁠

Event	Type	Detail	Description
`link-activate`	`LinkActivateEvent`	`LinkActivateEventDetail`	Fired when the link is followed in the same tab, before the browser navigates. Cancel it to navigate with a router instead. It bubbles, is composed, and is cancelable.
`click`	`MouseEvent`	—	Dispatched when the card is clicked. A disabled or soft-disabled card does not dispatch it. It bubbles, is composed, and is cancelable.

A soft-disabled click never reaches a listener on the card, but a capture-phase listener on an ancestor still sees it.

Props⁠

Prop	Type	Description
`badgeConcealed`	`boolean`default `false`	Hides the badge while keeping its value and dot setting, so clearing this property shows the same badge again. See Badges.
`badgeDot`	`boolean`default `false`	Shows the badge as a small dot with no text, whether or not `badgeValue` is set. See Badges.
`badgeValue`	`string`	The badge's text. While it is empty and `badgeDot` is not set, no badge renders. Ignored if `badgeDot` is set. See Badges.
`disabled`	`boolean`default `false`	Whether or not the card is disabled. A disabled link card cannot be followed. See Disabled and soft-disabled.
`download`	`string`	Downloads the linked URL instead of navigating to it. A file name saves it under that name, and an empty string downloads it under the server's own name, like the bare HTML attribute. Unset, it navigates. Ignored unless `href` is set.
`href`	`string`	Makes the card a link to this URL. A screen reader announces it as a link rather than a button. A disabled or soft-disabled link card cannot be followed. See Links, Disabled and soft-disabled.
`maskContent`	`boolean`	Clips the content to the component's shape, so anything that extends past a rounded corner is cut off.
`onNavigate`	`(detail: LinkActivateEventDetail, event: LinkActivateEvent) => void`	Called when the link points inside the app: the same origin, opening in the same tab. The browser's navigation is canceled first, so this handler navigates, and it replaces the navigation `ChameleonRouterProvider` would make.
`rel`	`string`	The link's relationship to the linked URL, as the anchor's `rel`, used exactly as given. Unset, the anchor has no `rel`. Ignored unless `href` is set.
`softDisabled`	`boolean`default `false`	Whether or not the card is "soft-disabled" (disabled but still focusable). A soft-disabled link card cannot be followed.Use this when a card needs increased visibility when disabled. For when this is needed, see WAI-ARIA Authoring Practices: disabled controls. See Disabled and soft-disabled.
`target`	`UrlTargetTypeUrlTarget.Blank`, `.Self`, `.Parent`, `.Top`, `.Empty`default `UrlTarget.Empty`	Where to display the linked `href` URL. Common options include `_blank` to open in a new tab. Ignored unless `href` is set. See Links.
`tooltipPosition`	`TooltipPositionTypeTooltipPosition.StartStart`, `.StartCenter`, `.StartEnd`, `.CenterStart`, `.CenterEnd`, `.EndStart`, `.EndCenter`, `.EndEnd`default `TooltipPosition.EndCenter`, from the style configuration	Where the tooltip appears around the element, such as above or beside it. It has no effect without `tooltipValue`. See Tooltips.
`tooltipValue`	`string`	The tooltip's text. The tooltip opens on hover and on focus, and a screen reader announces it as the control's description unless it only repeats the control's name. No tooltip renders while it is empty. See Tooltips.
`touchTarget`	`TouchTargetTypeTouchTarget.None`, `.Overflow`, `.Wrapper`default `TouchTarget.Overflow`, from the style configuration	The area that takes a touch, at least 48 by 48 pixels and centered on the component. `overflow` extends it past the component without changing the component's layout size, `wrapper` makes the component take up the whole area in the layout, and `none` limits it to the component's own size. See Size.
`variant`	`CardVariantTypeCardVariant.Elevated`, `.Filled`, `.Outlined`default `CardVariant.Outlined`, from the style configuration	Sets whether the card is raised with a shadow, filled with a solid color, or flat with an outline. See Variants.

A target other than _self opens the link without giving the new page access to the page that opened it.

Children⁠

Child	Description
`children`	The card's content.

Events⁠

Prop	Argument	Description
`onLinkActivate`	`LinkActivateEvent`	Fired when the link is followed in the same tab, before the browser navigates. Cancel it to navigate with a router instead. It bubbles, is composed, and is cancelable. Its `detail` carries `href`, `target`, `download`, `rel`, `altKey`, `ctrlKey`, `metaKey`, `shiftKey`, and `originalEvent`.
`onClick`	`React.MouseEvent<HTMLElement>`	Dispatched when the card is clicked. A disabled or soft-disabled card does not dispatch it. It bubbles, is composed, and is cancelable.

A soft-disabled click never reaches a listener on the card, but a capture-phase listener on an ancestor still sees it.

Parameters⁠

Parameter	Type	Description
`BadgeConcealed`	`bool?`default `false`	Hides the badge while keeping its value and dot setting, so clearing this property shows the same badge again. See Badges.
`BadgeDot`	`bool?`default `false`	Shows the badge as a small dot with no text, whether or not `BadgeValue` is set. See Badges.
`BadgeValue`	`string?`	The badge's text. While it is empty and `BadgeDot` is not set, no badge renders. Ignored if `BadgeDot` is set. See Badges.
`Disabled`	`bool?`default `false`	Whether or not the card is disabled. A disabled link card cannot be followed. See Disabled and soft-disabled.
`Download`	`string?`	Downloads the linked URL instead of navigating to it. A file name saves it under that name, and an empty string downloads it under the server's own name, like the bare HTML attribute. Unset, it navigates. Ignored unless `Href` is set.
`Href`	`string?`	Makes the card a link to this URL. A screen reader announces it as a link rather than a button. A disabled or soft-disabled link card cannot be followed. See Links, Disabled and soft-disabled.
`MaskContent`	`bool?`	Clips the content to the component's shape, so anything that extends past a rounded corner is cut off.
`OnNavigate`	`EventCallback<LinkActivateEventArgs>`	Navigates for a link that points inside the app: the same base address, opening in the same tab. The browser's navigation is canceled first, and this callback replaces the NavigationManager.NavigateTo the component calls by default. It is not called for any other link.
`Rel`	`string?`	The link's relationship to the linked URL, as the anchor's `Rel`, used exactly as given. Unset, the anchor has no `Rel`. Ignored unless `Href` is set.
`SoftDisabled`	`bool?`default `false`	Whether or not the card is "soft-disabled" (disabled but still focusable). A soft-disabled link card cannot be followed.Use this when a card needs increased visibility when disabled. For when this is needed, see WAI-ARIA Authoring Practices: disabled controls. See Disabled and soft-disabled.
`Target`	`UrlTarget?UrlTarget.Blank`, `.Self`, `.Parent`, `.Top`, `.Empty`default `UrlTarget.Empty`	Where to display the linked `Href` URL. Common options include `_blank` to open in a new tab. Ignored unless `Href` is set. See Links.
`TooltipPosition`	`TooltipPosition?TooltipPosition.StartStart`, `.StartCenter`, `.StartEnd`, `.CenterStart`, `.CenterEnd`, `.EndStart`, `.EndCenter`, `.EndEnd`default `TooltipPosition.EndCenter`, from the style configuration	Where the tooltip appears around the element, such as above or beside it. It has no effect without `TooltipValue`. See Tooltips.
`TooltipValue`	`string?`	The tooltip's text. The tooltip opens on hover and on focus, and a screen reader announces it as the control's description unless it only repeats the control's name. No tooltip renders while it is empty. See Tooltips.
`TouchTarget`	`TouchTarget?TouchTarget.None`, `.Overflow`, `.Wrapper`default `TouchTarget.Overflow`, from the style configuration	The area that takes a touch, at least 48 by 48 pixels and centered on the component. `overflow` extends it past the component without changing the component's layout size, `wrapper` makes the component take up the whole area in the layout, and `none` limits it to the component's own size. See Size.
`Variant`	`CardVariant?CardVariant.Elevated`, `.Filled`, `.Outlined`default `CardVariant.Outlined`, from the style configuration	Sets whether the card is raised with a shadow, filled with a solid color, or flat with an outline. See Variants.

A target other than _self opens the link without giving the new page access to the page that opened it.

Render fragments⁠

Parameter	Type	Description
`ChildContent`	`RenderFragment?`	The card's content.

Event callbacks⁠

Parameter	Type	Description
`OnLinkActivate`	`EventCallback<LinkActivateEventArgs>`	Fired when the link is followed in the same tab, before the browser navigates. Cancel it to navigate with a router instead. It bubbles, is composed, and is cancelable. Its `detail` carries `Href`, `Target`, `Download`, `Rel`, `altKey`, `ctrlKey`, `metaKey`, `shiftKey`, and `originalEvent`.
`OnClick`	`EventCallback<MouseEventArgs>`	Dispatched when the card is clicked. A disabled or soft-disabled card does not dispatch it. It bubbles, is composed, and is cancelable.

A soft-disabled click never reaches a listener on the card, but a capture-phase listener on an ancestor still sees it.

Inputs⁠

Input	Type	Description
`badgeConcealed`	`boolean`default `false`	Hides the badge while keeping its value and dot setting, so clearing this property shows the same badge again. See Badges.
`badgeDot`	`boolean`default `false`	Shows the badge as a small dot with no text, whether or not `badgeValue` is set. See Badges.
`badgeValue`	`string`	The badge's text. While it is empty and `badgeDot` is not set, no badge renders. Ignored if `badgeDot` is set. See Badges.
`disabled`	`boolean`default `false`	Whether or not the card is disabled. A disabled link card cannot be followed. See Disabled and soft-disabled.
`download`	`string`	Downloads the linked URL instead of navigating to it. A file name saves it under that name, and an empty string downloads it under the server's own name, like the bare HTML attribute. Unset, it navigates. Ignored unless `href` is set.
`href`	`string`	Makes the card a link to this URL. A screen reader announces it as a link rather than a button. A disabled or soft-disabled link card cannot be followed. See Links, Disabled and soft-disabled.
`maskContent`	`boolean`	Clips the content to the component's shape, so anything that extends past a rounded corner is cut off.
`rel`	`string`	The link's relationship to the linked URL, as the anchor's `rel`, used exactly as given. Unset, the anchor has no `rel`. Ignored unless `href` is set.
`softDisabled`	`boolean`default `false`	Whether or not the card is "soft-disabled" (disabled but still focusable). A soft-disabled link card cannot be followed.Use this when a card needs increased visibility when disabled. For when this is needed, see WAI-ARIA Authoring Practices: disabled controls. See Disabled and soft-disabled.
`target`	`UrlTargetTypeUrlTarget.Blank`, `.Self`, `.Parent`, `.Top`, `.Empty`default `UrlTarget.Empty`	Where to display the linked `href` URL. Common options include `_blank` to open in a new tab. Ignored unless `href` is set. See Links.
`tooltipPosition`	`TooltipPositionTypeTooltipPosition.StartStart`, `.StartCenter`, `.StartEnd`, `.CenterStart`, `.CenterEnd`, `.EndStart`, `.EndCenter`, `.EndEnd`default `TooltipPosition.EndCenter`, from the style configuration	Where the tooltip appears around the element, such as above or beside it. It has no effect without `tooltipValue`. See Tooltips.
`tooltipValue`	`string`	The tooltip's text. The tooltip opens on hover and on focus, and a screen reader announces it as the control's description unless it only repeats the control's name. No tooltip renders while it is empty. See Tooltips.
`touchTarget`	`TouchTargetTypeTouchTarget.None`, `.Overflow`, `.Wrapper`default `TouchTarget.Overflow`, from the style configuration	The area that takes a touch, at least 48 by 48 pixels and centered on the component. `overflow` extends it past the component without changing the component's layout size, `wrapper` makes the component take up the whole area in the layout, and `none` limits it to the component's own size. See Size.
`variant`	`CardVariantTypeCardVariant.Elevated`, `.Filled`, `.Outlined`default `CardVariant.Outlined`, from the style configuration	Sets whether the card is raised with a shadow, filled with a solid color, or flat with an outline. See Variants.

A target other than _self opens the link without giving the new page access to the page that opened it.

Content projection⁠

Content	Description
content with no `slot`	The card's content.

Outputs⁠

Output	Event	Description
`cwLinkActivate`	`LinkActivateEvent`	Fired when the link is followed in the same tab, before the browser navigates. Cancel it to navigate with a router instead. It bubbles, is composed, and is cancelable. Its `detail` carries `href`, `target`, `download`, `rel`, `altKey`, `ctrlKey`, `metaKey`, `shiftKey`, and `originalEvent`.
`cwClick`	`MouseEvent`	Dispatched when the card is clicked. A disabled or soft-disabled card does not dispatch it. It bubbles, is composed, and is cancelable.

A soft-disabled click never reaches a listener on the card, but a capture-phase listener on an ancestor still sees it.

Props⁠

Prop	Type	Description
`badgeConcealed`	`boolean`default `false`	Hides the badge while keeping its value and dot setting, so clearing this property shows the same badge again. See Badges.
`badgeDot`	`boolean`default `false`	Shows the badge as a small dot with no text, whether or not `badgeValue` is set. See Badges.
`badgeValue`	`string`	The badge's text. While it is empty and `badgeDot` is not set, no badge renders. Ignored if `badgeDot` is set. See Badges.
`disabled`	`boolean`default `false`	Whether or not the card is disabled. A disabled link card cannot be followed. See Disabled and soft-disabled.
`download`	`string`	Downloads the linked URL instead of navigating to it. A file name saves it under that name, and an empty string downloads it under the server's own name, like the bare HTML attribute. Unset, it navigates. Ignored unless `href` is set.
`href`	`string`	Makes the card a link to this URL. A screen reader announces it as a link rather than a button. A disabled or soft-disabled link card cannot be followed. See Links, Disabled and soft-disabled.
`maskContent`	`boolean`	Clips the content to the component's shape, so anything that extends past a rounded corner is cut off.
`rel`	`string`	The link's relationship to the linked URL, as the anchor's `rel`, used exactly as given. Unset, the anchor has no `rel`. Ignored unless `href` is set.
`softDisabled`	`boolean`default `false`	Whether or not the card is "soft-disabled" (disabled but still focusable). A soft-disabled link card cannot be followed.Use this when a card needs increased visibility when disabled. For when this is needed, see WAI-ARIA Authoring Practices: disabled controls. See Disabled and soft-disabled.
`target`	`UrlTargetTypeUrlTarget.Blank`, `.Self`, `.Parent`, `.Top`, `.Empty`default `UrlTarget.Empty`	Where to display the linked `href` URL. Common options include `_blank` to open in a new tab. Ignored unless `href` is set. See Links.
`tooltipPosition`	`TooltipPositionTypeTooltipPosition.StartStart`, `.StartCenter`, `.StartEnd`, `.CenterStart`, `.CenterEnd`, `.EndStart`, `.EndCenter`, `.EndEnd`default `TooltipPosition.EndCenter`, from the style configuration	Where the tooltip appears around the element, such as above or beside it. It has no effect without `tooltipValue`. See Tooltips.
`tooltipValue`	`string`	The tooltip's text. The tooltip opens on hover and on focus, and a screen reader announces it as the control's description unless it only repeats the control's name. No tooltip renders while it is empty. See Tooltips.
`touchTarget`	`TouchTargetTypeTouchTarget.None`, `.Overflow`, `.Wrapper`default `TouchTarget.Overflow`, from the style configuration	The area that takes a touch, at least 48 by 48 pixels and centered on the component. `overflow` extends it past the component without changing the component's layout size, `wrapper` makes the component take up the whole area in the layout, and `none` limits it to the component's own size. See Size.
`variant`	`CardVariantTypeCardVariant.Elevated`, `.Filled`, `.Outlined`default `CardVariant.Outlined`, from the style configuration	Sets whether the card is raised with a shadow, filled with a solid color, or flat with an outline. See Variants.

A target other than _self opens the link without giving the new page access to the page that opened it.

Slots⁠

Slot	Description
`default`	The card's content.

Events⁠

Event	Type	Description
`linkActivate`	`LinkActivateEvent`	Fired when the link is followed in the same tab, before the browser navigates. Cancel it to navigate with a router instead. It bubbles, is composed, and is cancelable. Its `detail` carries `href`, `target`, `download`, `rel`, `altKey`, `ctrlKey`, `metaKey`, `shiftKey`, and `originalEvent`.
`click`	`MouseEvent`	Dispatched when the card is clicked. A disabled or soft-disabled card does not dispatch it. It bubbles, is composed, and is cancelable.

A soft-disabled click never reaches a listener on the card, but a capture-phase listener on an ancestor still sees it.

Props⁠

Prop	Type	Description
`badgeConcealed`	`boolean`default `false`	Hides the badge while keeping its value and dot setting, so clearing this property shows the same badge again. See Badges.
`badgeDot`	`boolean`default `false`	Shows the badge as a small dot with no text, whether or not `badgeValue` is set. See Badges.
`badgeValue`	`string`	The badge's text. While it is empty and `badgeDot` is not set, no badge renders. Ignored if `badgeDot` is set. See Badges.
`disabled`	`boolean`default `false`	Whether or not the card is disabled. A disabled link card cannot be followed. See Disabled and soft-disabled.
`download`	`string`	Downloads the linked URL instead of navigating to it. A file name saves it under that name, and an empty string downloads it under the server's own name, like the bare HTML attribute. Unset, it navigates. Ignored unless `href` is set.
`href`	`string`	Makes the card a link to this URL. A screen reader announces it as a link rather than a button. A disabled or soft-disabled link card cannot be followed. See Links, Disabled and soft-disabled.
`maskContent`	`boolean`	Clips the content to the component's shape, so anything that extends past a rounded corner is cut off.
`rel`	`string`	The link's relationship to the linked URL, as the anchor's `rel`, used exactly as given. Unset, the anchor has no `rel`. Ignored unless `href` is set.
`softDisabled`	`boolean`default `false`	Whether or not the card is "soft-disabled" (disabled but still focusable). A soft-disabled link card cannot be followed.Use this when a card needs increased visibility when disabled. For when this is needed, see WAI-ARIA Authoring Practices: disabled controls. See Disabled and soft-disabled.
`target`	`UrlTargetTypeUrlTarget.Blank`, `.Self`, `.Parent`, `.Top`, `.Empty`default `UrlTarget.Empty`	Where to display the linked `href` URL. Common options include `_blank` to open in a new tab. Ignored unless `href` is set. See Links.
`tooltipPosition`	`TooltipPositionTypeTooltipPosition.StartStart`, `.StartCenter`, `.StartEnd`, `.CenterStart`, `.CenterEnd`, `.EndStart`, `.EndCenter`, `.EndEnd`default `TooltipPosition.EndCenter`, from the style configuration	Where the tooltip appears around the element, such as above or beside it. It has no effect without `tooltipValue`. See Tooltips.
`tooltipValue`	`string`	The tooltip's text. The tooltip opens on hover and on focus, and a screen reader announces it as the control's description unless it only repeats the control's name. No tooltip renders while it is empty. See Tooltips.
`touchTarget`	`TouchTargetTypeTouchTarget.None`, `.Overflow`, `.Wrapper`default `TouchTarget.Overflow`, from the style configuration	The area that takes a touch, at least 48 by 48 pixels and centered on the component. `overflow` extends it past the component without changing the component's layout size, `wrapper` makes the component take up the whole area in the layout, and `none` limits it to the component's own size. See Size.
`variant`	`CardVariantTypeCardVariant.Elevated`, `.Filled`, `.Outlined`default `CardVariant.Outlined`, from the style configuration	Sets whether the card is raised with a shadow, filled with a solid color, or flat with an outline. See Variants.

A target other than _self opens the link without giving the new page access to the page that opened it.

Snippets⁠

Snippet	Description
`children`	The card's content.

Events⁠

Prop	Type	Description
`onLinkActivate`	`LinkActivateEvent`	Fired when the link is followed in the same tab, before the browser navigates. Cancel it to navigate with a router instead. It bubbles, is composed, and is cancelable. Its `detail` carries `href`, `target`, `download`, `rel`, `altKey`, `ctrlKey`, `metaKey`, `shiftKey`, and `originalEvent`.
`onClick`	`MouseEvent`	Dispatched when the card is clicked. A disabled or soft-disabled card does not dispatch it. It bubbles, is composed, and is cancelable.

A soft-disabled click never reaches a listener on the card, but a capture-phase listener on an ancestor still sees it.

Each attribute value has its own tokens; a cell shows its token's value, and selecting the cell shows the token's fallback path, with each name and value ready to copy. For example, the outlined column's container-shadow-color row is --ct-card-outlined-container-shadow-color, which defaults to --ct-sys-color-shadow.

Variant⁠

Name	`elevated`	`filled`	`outlined`
`container-color`	same as `--ct-card-container-color` `--ct-card-elevated-container-color`	same as `--ct-card-container-color` `--ct-card-filled-container-color`	same as `--ct-card-container-color` `--ct-card-outlined-container-color`
`container-elevation`	same as `--ct-card-container-elevation` `--ct-card-elevated-container-elevation`	same as `--ct-card-container-elevation` `--ct-card-filled-container-elevation`	same as `--ct-card-container-elevation` `--ct-card-outlined-container-elevation`
`container-shadow-color`	`--ct-sys-color-shadow` `--ct-card-elevated-container-shadow-color`	`--ct-sys-color-shadow` `--ct-card-filled-container-shadow-color`	`--ct-sys-color-shadow` `--ct-card-outlined-container-shadow-color`
`outline-color`	`transparent` `--ct-card-elevated-outline-color`	`transparent` `--ct-card-filled-outline-color`	`--ct-sys-color-outline-variant` `--ct-card-outlined-outline-color`
`outline-opacity`	`1` `--ct-card-elevated-outline-opacity`	`1` `--ct-card-filled-outline-opacity`	`1` `--ct-card-outlined-outline-opacity`
`outline-width`	`0px` `--ct-card-elevated-outline-width`	`0px` `--ct-card-filled-outline-width`	`1px` `--ct-card-outlined-outline-width`
`hover-container-elevation`	`--ct-sys-elevation-level2` `--ct-card-elevated-hover-container-elevation`	`--ct-sys-elevation-level1` `--ct-card-filled-hover-container-elevation`	`--ct-sys-elevation-level0` `--ct-card-outlined-hover-container-elevation`
`hover-state-layer-color`	`--ct-sys-color-on-surface-variant` `--ct-card-elevated-hover-state-layer-color`	`--ct-sys-color-on-surface-variant` `--ct-card-filled-hover-state-layer-color`	`--ct-sys-color-on-surface-variant` `--ct-card-outlined-hover-state-layer-color`
`hover-state-layer-opacity`	`--ct-sys-state-hover-state-layer-opacity` `--ct-card-elevated-hover-state-layer-opacity`	`--ct-sys-state-hover-state-layer-opacity` `--ct-card-filled-hover-state-layer-opacity`	`--ct-sys-state-hover-state-layer-opacity` `--ct-card-outlined-hover-state-layer-opacity`
`focus-container-elevation`	`--ct-sys-elevation-level1` `--ct-card-elevated-focus-container-elevation`	`--ct-sys-elevation-level0` `--ct-card-filled-focus-container-elevation`	`--ct-sys-elevation-level0` `--ct-card-outlined-focus-container-elevation`
`pressed-container-elevation`	`--ct-sys-elevation-level1` `--ct-card-elevated-pressed-container-elevation`	`--ct-sys-elevation-level0` `--ct-card-filled-pressed-container-elevation`	`--ct-sys-elevation-level0` `--ct-card-outlined-pressed-container-elevation`
`pressed-state-layer-color`	`--ct-sys-color-on-surface-variant` `--ct-card-elevated-pressed-state-layer-color`	`--ct-sys-color-on-surface-variant` `--ct-card-filled-pressed-state-layer-color`	`--ct-sys-color-on-surface-variant` `--ct-card-outlined-pressed-state-layer-color`
`pressed-state-layer-opacity`	`--ct-sys-state-pressed-state-layer-opacity` `--ct-card-elevated-pressed-state-layer-opacity`	`--ct-sys-state-pressed-state-layer-opacity` `--ct-card-filled-pressed-state-layer-opacity`	`--ct-sys-state-pressed-state-layer-opacity` `--ct-card-outlined-pressed-state-layer-opacity`
`disabled-container-color`	`--ct-sys-color-surface` `--ct-card-elevated-disabled-container-color`	`--ct-sys-color-surface-variant` `--ct-card-filled-disabled-container-color`	`--ct-sys-color-surface-bright` `--ct-card-outlined-disabled-container-color`
`disabled-container-elevation`	`--ct-sys-elevation-level1` `--ct-card-elevated-disabled-container-elevation`	`--ct-sys-elevation-level0` `--ct-card-filled-disabled-container-elevation`	`--ct-sys-elevation-level0` `--ct-card-outlined-disabled-container-elevation`
`disabled-container-opacity`	`0.38` `--ct-card-elevated-disabled-container-opacity`	`0.38` `--ct-card-filled-disabled-container-opacity`	`0.38` `--ct-card-outlined-disabled-container-opacity`
`disabled-outline-color`	`transparent` `--ct-card-elevated-disabled-outline-color`	`transparent` `--ct-card-filled-disabled-outline-color`	`--ct-sys-color-outline` `--ct-card-outlined-disabled-outline-color`
`disabled-outline-opacity`	`1` `--ct-card-elevated-disabled-outline-opacity`	`1` `--ct-card-filled-disabled-outline-opacity`	`0.12` `--ct-card-outlined-disabled-outline-opacity`

Other tokens⁠

Token	Value
`--ct-card-container-color`	`--ct-sys-color-surface-container-low` `--ct-card-container-color`
`--ct-card-container-elevation`	`--ct-sys-elevation-level1` `--ct-card-container-elevation`

Names and states⁠

An action card is announced as a button and follows the WAI-ARIA Authoring Practices: Button pattern; with href it is announced as a link and follows the WAI-ARIA Authoring Practices: Link pattern.

The accessible name is the card's content, in both forms.
A button card can take its own name: aria-label on the card names it. A link card cannot, because its name is fixed to the content.
A button card accepts exactly three ARIA attributes: aria-label, aria-haspopup and aria-expanded. Any other, role included, has no effect, and a link card accepts none.
The tooltip text is the focused control's description: a screen reader announces it after the name, unless it only repeats the name, which is skipped.
The badge is visual only. Put what it means in the card's content or its tooltip.
A click on the card never submits a form.
Several actions belong in a Card with a button for each, and a single action that needs no card is a button.

Keyboard and focus⁠

Key	Action
Tab	Moves focus to the card's button or link
Enter	Activates a button card, or follows a link card
Space	Activates a button card; a link card does not respond

A keyboard focus draws a focus ring around the card.
disabled removes a button card from the Tab order.
soft-disabled keeps a button card in the Tab order, announces it as disabled, and blocks the click.
A link card ignores both properties: they reset to false, and the link stays focusable and working.

Pointer and touch⁠

touch-target defaults to overflow: a touch target at least 48 by 48 pixels, centered on the card, which exceeds the 24 by 24 pixels that WCAG 2.5.8 asks for.
none reduces the target to the card's own size, which meets 2.5.8 only for a card of at least 24 by 24 pixels.
A clipping ancestor, whether overflow: hidden, overflow: clip, or a clip-path, cuts off the part of the target that overflows.

Display settings⁠

In forced colors, the card's surface takes the Canvas color and slotted content paints at full opacity.

Standards⁠

With its defaults, an action card meets seven WCAG 2.2 success criteria:

2.1.1 Keyboard (A)
2.1.2 No Keyboard Trap (A)
2.5.2 Pointer Cancellation (A)
2.4.7 Focus Visible (AA)
2.5.8 Target Size (Minimum) (AA)
1.3.1 Info and Relationships (A)
1.4.13 Content on Hover or Focus (AA)

Four more depend on how you use it:

4.1.2 Name, Role, Value (A): give the card content that names it, or an aria-label on a button card with none.
2.5.3 Label in Name (A): keep the visible words in any aria-label on a button card.
2.4.6 Headings and Labels (AA): write content that says what the card does.
2.4.4 Link Purpose (In Context) (A): write a link card's content to say where it goes.

Action card

Reference docs⁠link

Choosing a card⁠link

Choosing a variant⁠link

Built in⁠link

Using action cards well⁠link

Variants⁠link

Size⁠link

Badges⁠link

Tooltips⁠link

Links⁠link

Disabled and soft-disabled⁠link

Properties⁠link

Slots⁠link

Events⁠link

Props⁠link

Children⁠link

Events⁠link

Parameters⁠link

Render fragments⁠link

Event callbacks⁠link

Inputs⁠link

Content projection⁠link

Outputs⁠link

Props⁠link

Slots⁠link

Events⁠link

Props⁠link

Snippets⁠link

Events⁠link

Variant⁠link

Other tokens⁠link

Names and states⁠link

Keyboard and focus⁠link

Pointer and touch⁠link

Display settings⁠link

Standards⁠link

Reference docs⁠

Choosing a card⁠

Choosing a variant⁠

Built in⁠

Using action cards well⁠

Variants⁠

Size⁠

Badges⁠

Tooltips⁠

Links⁠

Disabled and soft-disabled⁠

Properties⁠

Slots⁠

Events⁠

Props⁠

Children⁠

Events⁠

Parameters⁠

Render fragments⁠

Event callbacks⁠

Inputs⁠

Content projection⁠

Outputs⁠

Props⁠

Slots⁠

Events⁠

Props⁠

Snippets⁠

Events⁠

Variant⁠

Other tokens⁠

Names and states⁠

Keyboard and focus⁠

Pointer and touch⁠

Display settings⁠

Standards⁠