Card

A container for displaying information.

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

A basic card containing a title, content and an extra corner content. Supports two sizes: medium and small.

No border

A borderless card on a gray background.

Simple card

A simple card only containing a content area.

Customized content

You can use Card.Meta to support more flexible content.

Card in column

Cards usually cooperate with grid column layout in overview page.

Loading card

Shows a loading indicator while the contents of the card is being fetched.

Grid card

Grid style card content.

Inner card

It can be placed inside the ordinary card to display the information of the multilevel structure.

With tabs

Support more content configuration

A Card that supports cover, avatar, title and description.

Custom semantic dom styling

You can customize the semantic dom style of Card by passing objects/functions through classNames and styles.

API

Card, Card.Grid, and Card.Meta are exported from @ceebee/ui/client.

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`	`-`	—
`bordered`	Toggles rendering of the border around the card, please use variant instead	`boolean`	`true`	—
`bodyStyle`	Style of card body, please use styles.body instead	`CSSProperties`	`-`	-
`variant`	Variants of Card	`outlined \| borderless`	`outlined`	5.24.0
`classNames`	Customize class for each semantic structure inside the component. Supports object or function.	`Record<SemanticDOM, string> \| (info: { props })=> Record<SemanticDOM, string>`	`-`	—
`cover`	Card cover	`ReactNode`	`-`	—
`defaultActiveTabKey`	Initial active TabPane's key, if activeTabKey is not set	`string`	`The key of first tab`	—
`extra`	Content to render in the top-right corner of the card	`ReactNode`	`-`	—
`hoverable`	Lift up when hovering card	`boolean`	`false`	—
`headStyle`	Style of card head, please use styles.header instead	`CSSProperties`	`-`	-
`loading`	Shows a loading indicator while the contents of the card are being fetched	`boolean`	`false`	—
`size`	Size of card	`medium \| small`	`medium`	—
`tabBarExtraContent`	Extra content in tab bar	`ReactNode`	`-`	—
`tabList`	List of TabPane's head	`TabItemType[]`	`-`	—
`tabProps`	Tabs	`-`	`-`	—
`title`	Card title	`ReactNode`	`-`	—
`type`	Card style type, can be set to inner or not set	`string`	`-`	—
`styles`	Customize inline style for each semantic structure inside the component. Supports object or function.	`Record<SemanticDOM, CSSProperties> \| (info: { props })=> Record<SemanticDOM, CSSProperties>`	`-`	—
`onTabChange`	Callback when tab is switched	`(key) => void`	`-`	—

Card.Grid

Property	Description	Type	Default	Version
`hoverable`	Lift up when hovering card grid	`boolean`	`true`	—

Card.Meta

Property	Description	Type	Default	Version
`avatar`	Avatar or icon	`ReactNode`	`-`	—
`description`	Description content	`ReactNode`	`-`	—
`title`	Title content	`ReactNode`	`-`	—