Card
Displays a card with header, content, and footer.
Basic Usage
Create project
Deploy your new project in one-click.
Example
Variants
The variant prop controls the style of the card.
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
Sizes
The size prop controls the padding and text size of the card.
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
Interactive
The card can be hoverable, clickable, or in a loading state.
Hoverable Card
Clickable Card
Loading Card
Example
API
BrCard
Props
| Name | Type | Default | Description |
|---|---|---|---|
| as | string | 'div' | The element or component the card should render as. |
| size | string | 'default' | Size variants: xs, sm, md, lg, xl, 2xl. |
| shape | string | 'rounded' | Shape variants: rounded, square, circle. |
| shadow | string | 'sm' | Shadow variants: none, sm, md, lg. |
| variant | string | 'default' | Style variants: default, outline, ghost, secondary. |
| hoverable | boolean | false | Whether the card should have a hover effect. |
| clickable | boolean | false | Whether the card should be clickable. |
| loading | boolean | false | Whether the card is in a loading state. |
| disabled | boolean | false | Whether the card is disabled. |
BrCardHeader
Props
| Name | Type | Default | Description |
|---|---|---|---|
| as | string | 'div' | The element or component the header should render as. |
BrCardTitle
Props
| Name | Type | Default | Description |
|---|---|---|---|
| as | string | 'h3' | The element or component the title should render as. |
BrCardDescription
Props
| Name | Type | Default | Description |
|---|---|---|---|
| as | string | 'p' | The element or component the description should render as. |
BrCardContent
Props
| Name | Type | Default | Description |
|---|---|---|---|
| as | string | 'div' | The element or component the content should render as. |
BrCardFooter
Props
| Name | Type | Default | Description |
|---|---|---|---|
| as | string | 'div' | The element or component the footer should render as. |