Card

Code

Install

Import

The axes

• variant takes outlined (the default) and borderless. An outlined card rests on a soft shadow with no visible border, and a borderless one is flat. An outlined card carries ant-card-bordered, and a borderless one carries no class of its own.
• size takes medium (the default) and small. middle and default still work as older names for medium, and there is no large. A ConfigProvider with componentSize can set it too.
• type takes inner and inset. inner gives the header a lighter fill, for a card inside a card. inset tints the card and puts the cover, body and actions on a raised surface inside it, with the header and the footer on the tint.
• shape takes default and squircle. squircle bends the corners into a superellipse on twice the large radius, and browsers without corner-shape, like Safari today, keep the default corners.
• emphasis takes default, subtle and strong, and sets how strongly color shows: a light tint with colored text, a neutral ground with colored text, or a solid fill with white text. Without a color, only subtle does anything.

Flags

• loading replaces the body only. The header, cover, actions and footer stay, so the card keeps its size when the data arrives.
• hoverable lifts the card a step up the shadow ramp, and Card.Grid cells lift to the same height.
• disabled blocks the keyboard too. It dims the card and sets inert, so buttons and links inside cannot be clicked, focused or read by a screen reader. A pointer-events-auto or opacity-100 in className still wins.

Slots

• title and extra fill the header, the title at the start and the extra at the end. The header appears only when one of them, or tabList, is set.
• cover renders above the body with no padding, so a full-width image meets the card's rounded corners. A cover under a header has square top corners, because they are rounded only when the cover is the first thing in the card.
• actions is an array, rendered as a <ul> of equal cells along the bottom, in array order. Icons from the kit follow your icon pack.
• footer is a row below the body and the actions, with a divider above it and the header's padding and height. It takes any node, so lay out its buttons yourself, usually with a Flex that ends them at justify="end".
• The tab bar uses the kit's Tabs style. tabList puts a Tabs bar in the header, floating and neutral by default, at a size that matches the card. tabBarExtraContent adds a node at its end, and tabProps takes the kit's Tabs props, so { type: "line", color: "primary" } gives Ant Design's look and { size: "large" } its size.
• Import Card.Grid and Card.Meta from antd. The kit's Card does not include them.

Events

• onTabChange

Styling