Card

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

import { Card } from "@ngrok/mantle/card";

<Card.Root>
	<Card.Body>
		<p>Laborum in aute officia adipisicing elit velit.</p>
	</Card.Body>
</Card.Root>

<Card.Root className="shadow-lg">
	<Card.Header>
		<Card.Title>Card Title Here</Card.Title>
	</Card.Header>
	<Card.Body>
		<p>Laborum in aute officia adipisicing elit velit.</p>
	</Card.Body>
	<Card.Footer>
		<p>Card footer</p>
	</Card.Footer>
</Card.Root>

<Card.Root>
	<Card.Header>
		<Card.Title>Card Title Here</Card.Title>
	</Card.Header>
	<Card.Body>
		<p>Laborum in aute officia adipisicing elit velit.</p>
	</Card.Body>
</Card.Root>

<Card.Root>
	<Card.Body>
		<p>Laborum in aute officia adipisicing elit velit.</p>
	</Card.Body>
	<Card.Footer>
		<p>Card footer</p>
	</Card.Footer>
</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 footer container of a card. Usually composed as a direct child of Card.Root.

All props from div, plus:

Card.Header

The header container of a card. Usually composed as a direct child of Card.Root.

All props from div, plus:

Card.Title

The title of a card. Usually composed as a direct child of Card.Header. Renders as an h3 element by default, but can be changed to any other element by using the asChild prop. Prefer using a heading element (h1-h6) for accessibility.

All props from h1-h6, plus: