Murasaki
Components

Card

Displays a card with header, content, and footer.

Create project
Deploy your new project in one click.

Usage

import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@murasakijs/ui";
<Card>
  <CardHeader>
    <CardTitle>Card title</CardTitle>
    <CardDescription>Card description</CardDescription>
  </CardHeader>
  <CardContent>Content</CardContent>
  <CardFooter>Footer</CardFooter>
</Card>

API Reference

Subcomponents

ComponentRenders
CardThe outer bordered container.
CardHeaderVertical stack for CardTitle / CardDescription.
CardTitleThe card's heading.
CardDescriptionMuted supporting text under the title.
CardContentThe main body of the card.
CardFooterA row for actions, typically buttons.

All subcomponents extend HTMLAttributes<HTMLDivElement> — pass any native <div> prop (className, onClick, ...) to any of them.

Improve this page on GitHub

On this page