@ds-kit/card

---

title: "Card" slug: "/packages/card" category: "cards" componentNames:

• "Card"

---

Card

The Card component is a low-level helper component used by the more complex card components (AppCard, StoryCard, UpdateCard, etc.).

import { Card } from "@ds-kit/card"

Basic example

The simplest use case of a card looks like this.

<Card>Basic cards are invisible</Card>

Raised Card

Cards can have a drop shadow and rounded corners. The p prop can be used to add padding.

<Card interactive raised borderRadius="lg" p="2.5rem">
  Card content
</Card>