ant-design/components/card/index.en-US.md
afc163 ac143ffb4d
docs: fix component demo column number (#38631)
* docs: fix component demo column number

* test: skip test case
2022-11-17 18:28:13 +08:00

3.3 KiB

category group title cover
Components Data Display Card https://gw.alipayobjects.com/zos/alicdn/keNB-R8Y9/Card.svg

Simple rectangular container.

When To Use

A card can be used to display content related to a single subject. The content can consist of multiple elements of varying types and sizes.

Examples

Basic card No border Simple card Customized content Card in column Loading card Grid card Inner card With tabs Support more content configuration

API

<Card title="Card title">Card content</Card>

Card

Property Description Type Default Version
actions The action list, shows at the bottom of the Card Array<ReactNode> -
activeTabKey Current TabPane's key string -
bodyStyle Inline style to apply to the card content CSSProperties -
bordered Toggles rendering of the border around the card boolean true
cover Card cover ReactNode -
defaultActiveTabKey Initial active TabPane's key, if activeTabKey is not set string -
extra Content to render in the top-right corner of the card ReactNode -
headStyle Inline style to apply to the card head CSSProperties -
hoverable Lift up when hovering card boolean false
loading Shows a loading indicator while the contents of the card are being fetched boolean false
size Size of card default | small default
tabBarExtraContent Extra content in tab bar ReactNode -
tabList List of TabPane's head Array<{key: string, tab: ReactNode}> -
tabProps Tabs - -
title Card title ReactNode -
type Card style type, can be set to inner or not set string -
onTabChange Callback when tab is switched (key) => void -

Card.Grid

Property Description Type Default Version
className The className of container string -
hoverable Lift up when hovering card grid boolean true
style The style object of container CSSProperties -

Card.Meta

Property Description Type Default Version
avatar Avatar or icon ReactNode -
className The className of container string -
description Description content ReactNode -
style The style object of container CSSProperties -
title Title content ReactNode -