卡片 Card

通用卡片容器。

基础用法

Create project

Deploy your new project in one-click.

Name

Example

样式变体

variant 属性控制卡片的样式风格。

Default

Standard card with border and shadow.

Outline

Card with a thicker border and no shadow.

Ghost

Card with no border and no shadow.

Secondary

Card with secondary background color.

Example

尺寸

size 属性控制卡片的内边距和字体大小。

Size: XS

Extra small padding and text size.

Size: SM

Small padding and text size.

Size: MD (Default)

Medium padding and text size.

Size: LG

Large padding and text size.

Size: XL

Extra large padding and text size.

Size: 2XL

2X large padding and text size.

Example

交互状态

卡片支持悬停、点击和加载状态。

Hoverable Card

Clickable Card

Loading Card

Example

API

BrCard

Props

属性名	类型	默认值	说明
as	string	'div'	渲染的 HTML 标签或组件。
size	string	'default'	尺寸变体：xs, sm, md, lg, xl, 2xl。
shape	string	'rounded'	形状变体：rounded, square, circle。
shadow	string	'sm'	阴影变体：none, sm, md, lg。
variant	string	'default'	样式变体：default, outline, ghost, secondary。
hoverable	boolean	false	是否开启悬停效果。
clickable	boolean	false	是否开启点击效果。
loading	boolean	false	是否处于加载状态。
disabled	boolean	false	是否禁用。

BrCardHeader

Props

属性名	类型	默认值	说明
as	string	'div'	渲染的 HTML 标签或组件。

BrCardTitle

Props

属性名	类型	默认值	说明
as	string	'h3'	渲染的 HTML 标签或组件。

BrCardDescription

Props

属性名	类型	默认值	说明
as	string	'p'	渲染的 HTML 标签或组件。

BrCardContent

Props

属性名	类型	默认值	说明
as	string	'div'	渲染的 HTML 标签或组件。

BrCardFooter

Props

属性名	类型	默认值	说明
as	string	'div'	渲染的 HTML 标签或组件。