Card

A container used to display content in a box, resembling a physical card.

Laborum in aute officia adipisicing elit velit.

Card Title Here

Laborum in aute officia adipisicing elit velit.

Card footer

Card Title Here

Laborum in aute officia adipisicing elit velit.

Card footer

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

The Card is a container used to display content in a box, resembling a physical card. It is composed of several sub-components.

Card

A container that can be used to display content in a box resembling a physical card. The root component of the all Card sub-components.

All props from div, plus:

Prop	Type	Default	Description
asChild	boolean	false	Use the `asChild` prop to compose the `Card` styling and functionality onto alternative element types or your own React components.

Card.Body

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

All props from div, plus:

Prop	Type	Default	Description
asChild	boolean	false	Use the `asChild` prop to compose the `Card.Body` styling and functionality onto alternative element types or your own React components.

Card.Footer

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

All props from div, plus:

Prop	Type	Default	Description
asChild	boolean	false	Use the `asChild` prop to compose the `Card.Footer` styling and functionality onto alternative element types or your own React components.

Card.Header

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

All props from div, plus:

Prop	Type	Default	Description
asChild	boolean	false	Use the `asChild` prop to compose the `Card.Header` styling and functionality onto alternative element types or your own React components.

Card.Title

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

All props from h1-h6, plus:

Prop	Type	Default	Description
asChild	boolean	false	Use the `asChild` prop to compose the `Card.Title` styling and functionality onto alternative element types or your own React components.