Card

A container used to display content in a box, resembling a physical card. Composed of several sub-components.

When to use

A Card groups related content in a raised box, with an optional header and footer.

• Prefer Well when the content is secondary and sits inset in the page, such as a code sample, a note, or a read-only summary.
• Prefer Separator when adjacent content needs a divider and no box.
• Prefer MediaObject when an icon or a figure sits beside a block of text, with no border.

1import { Card } from "@ngrok/mantle/card";2 3<Card.Root>4	<Card.Body>5		<p>Laborum in aute officia adipisicing elit velit.</p>6	</Card.Body>7</Card.Root>8 9<Card.Root className="shadow-lg">10	<Card.Header>11		<Card.Title>Card Title Here</Card.Title>12	</Card.Header>13	<Card.Body>14		<p>Laborum in aute officia adipisicing elit velit.</p>15	</Card.Body>16	<Card.Footer>17		<p>Card footer</p>18	</Card.Footer>19</Card.Root>20 21<Card.Root>22	<Card.Header>23		<Card.Title>Card Title Here</Card.Title>24	</Card.Header>25	<Card.Body>26		<p>Laborum in aute officia adipisicing elit velit.</p>27	</Card.Body>28</Card.Root>29 30<Card.Root>31	<Card.Body>32		<p>Laborum in aute officia adipisicing elit velit.</p>33	</Card.Body>34	<Card.Footer>35		<p>Card footer</p>36	</Card.Footer>37</Card.Root>

Composition

Compose the parts of a Card together to build your own:

Card.Root├── Card.Header│   └── Card.Title├── Card.Body└── Card.Footer

Polymorphism

Every Card part accepts an asChild prop. When true, the part renders its single child instead of its default element, forwarding all class names, data-* attributes, and the ref onto that child. Reach for this when a card part should also be a more semantic element: for example, rendering Card.Title as an h2 to fit the surrounding document outline.

1import { Card } from "@ngrok/mantle/card";2 3<Card.Root>⋯4	<Card.Header>⋯5		<Card.Title asChild>⋯6			<h2>Card Title as an h2</h2>7		</Card.Title>8	</Card.Header>9	<Card.Body>⋯10		<p>Laborum in aute officia adipisicing elit velit.</p>11	</Card.Body>12</Card.Root>;

API Reference

Card.Root

A container that displays content in a box resembling a physical card. The root component of all Card sub-components.

All props from div, plus:

Card.Body

The main content of a card. Usually composed as a direct child of Card.Root.

All props from div, plus:

Card.Footer

The band below Card.Body. Unless it is the first child, it draws a top border dividing the two. Pass it as a direct child of Card.Root.

All props from div, plus:

Card.Header

The band above Card.Body that holds Card.Title. Pass it as a direct child of Card.Root.

All props from div, plus:

Card.Title

The heading inside Card.Header. Renders an h3 by default — pass asChild to fit the surrounding document outline. Keep it a heading element (h1-h6) for accessibility.

All props from h1-h6, plus: