Card

Basic

Top spots to hit in 2024, no cap!

Installation

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.

<CardHeader
  title="List Daemons"
  description="List of daemons to use in your sites."
/>

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:

<Card className='[--card-spacing:--spacing(2)'/>