Card

Bordered surface container for grouped content.

Previewlive — edit controls below

Revenue is up 12% this quarter.

Content

Basic

import { Card } from "@loom/muslin-react";

<Card>Content</Card>

Content sections

Heading, supporting text, and an action inside a card.

import { Button, Card } from "@loom/muslin-react";

<Card>
  <h3 className="text-[15px] font-semibold">Invoices</h3>
  <p className="mt-1 text-[13px] text-[var(--color-text-secondary)]">
    12 drafts waiting for review.
  </p>
  <div className="mt-3">
    <Button size="sm">Review now</Button>
  </div>
</Card>