Cards

Cards are used to group related content and tasks. They can be used to display information, tasks, or actions.

Signature

Copy
import { Card } from "tabler-react-2";

<Card {...props}>{children}</Card>;

Props

Basic Usage

The Card component wraps a div with some default styles.

Copy
<Card>
  <p>Card content</p>
</Card>

Title

The title prop can be used to add a title to the card. The title is rendered as a heading element.

Copy
<Card title="Card Title">
  <p>Card content</p>
</Card>

Sizes

Cards can be sized using the size prop. The size prop accepts a string value of sm, md, or lg.

Copy
<Card size="sm">
  <p>Small card</p>
</Card>
<Card size="md">
  <p>Medium card</p>
</Card>
<Card size="lg">
  <p>Large card</p>
</Card>

Colors

Cards can be colored using the variant prop. The variant prop accepts a string value of any color.

Copy
<Card variant="primary">
  <p>Card content</p>
</Card>

Variant Position

You can change the position of the colored bar by passing the variantPos prop. The variantPos prop accepts a string value of top or side.

Copy
<Card variant="danger" variantPos="side">
  <p>side card</p>
</Card>

Stacked Cards

You can pass a stacked prop to the Card component to create the effect of a stacked card. This is useful for signifying a list of cards.

Copy
<Card stacked>
  <p>Stacked Card</p>
</Card>

Note: Stacked cards do not support size props.

Tabs

The Card component can be used to display tabs. The tabs prop accepts a TabList type (see below).

Copy
<Card
  size="md"
  variantPos="top"
  tabs={[
    { title: "Tab 1", content: <p>Content of Tab 1</p> },
    { title: "Tab 2", content: <p>Content of Tab 2</p> },
  ]}
/>

TabList

The TabList type is used to define the tabs for a Card component. The TabList type inherits from Array and expects each object to have a title and content property.

Copy
type TabList = Array<{
  title: string;
  content: React.ReactNode;
}>;