Card
A flexible UI container that groups related content, actions, and media in a structured and visually appealing layout.
Basic
Top spots to hit in 2024, no cap!
Installation
If you hit any issues, make sure you check out the installation guide here for more information.
Manual Installation
Anatomy
With Form
Sometimes, you may need a card with a form inside.
Action
You can add actions to your card, which will be aligned to the right. This example demonstrates using the menu component, but you can use any component you prefer.
With Table
When you place a table inside a card, The table gutter inherits the padding from its parent card to ensure visual consistency.
For table docs, check out the Table docs.
Section Title
Sometimes, you may only need a card header without wrapping container itself. Of course, you need don't want the default padding, right? So I have prop called withoutPadding
to help you out.
Adjust Padding
The padding for all sections of the card—header, content, and footer—is controlled by a CSS variable defined on the card’s parent container. To update the padding for the entire card, simply set the variable via a class on the parent like this: