Card

A bounded surface for one thing: a title, a body, an optional cover and a row of actions along the bottom.

Basic

Set title to add a header, or leave it out for a plain surface, and set hoverable to lift the card on hover.

Variant

Set variant="borderless" for a flat card with no shadow, next to the default outlined card, which rests on a soft shadow.

Size

Set size="small" to tighten the header and body padding, for cards in dense grids and side panels.

Color

Set color to one of the theme's hues and emphasis to choose how loud it is: subtle colors only the text, strong fills the card, and type="inset" colors just the frame.

Shape

Set shape="squircle" to bend the corners into a superellipse on a larger radius, next to a card with the default corners.

Inner

Set type="inner" on a card inside a card to give it a lighter header, so it reads as a section of its parent.

Inset

Set type="inset" to tint the card and put the body, the cover and the actions on their own raised surface inside it.

Cover and Meta

Pass cover a full-width image or banner above the body, and use Card.Meta for an avatar, a title and a description in one row.

Actions

Pass actions an array of nodes, each with a key, to add a bottom row split into equal slots for buttons or icons.
Pass footer for a row below the body with a divider above it, or under type="inset" a row on the tinted frame outside the raised surface.

Tabs

Pass tabList to put tabs in the header, activeTabKey and onTabChange to control them, and tabBarExtraContent for a button at the end.

Grid cells

Put Card.Grid cells in the body to split it into tiles that lift on hover, and set hoverable={false} on a cell to keep it still.

Loading

Set loading to show a skeleton in the body while the header, the cover and the actions stay in place, here toggled by a switch.

Disabled

Set disabled to dim a card and block every click, focus and screen reader visit inside it, next to an active card.

Linked card

Wrap a hoverable card in an <a> with the block class to make the whole card a link.
Put a Dropdown button in extra to give the card a menu of actions in its header, like view, edit and delete.

Expandable

A usage card with a Details button in extra that shows the cost breakdown in the body, kept in local state.

Cards in a grid

Place cards in a Row with a gutter, each in a responsive Col, for a row of stat cards that stacks on small screens.

In context

The component inside real screens, with the components it usually sits beside.

Project grid

A grid of project cards, each with a cover, a stacked avatar group, a short description, tags and an actions row.

API Reference

Card
Card's props. Rows marked antuikit in the Version column are added by the kit.
Card.Grid
Card.Grid's props.
Card.Meta
Card.Meta's props.