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, CardBody, CardFooter, CardHeader, CardTitle } from "@ngrok/mantle/card";

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

<Card className="shadow-lg">
	<CardHeader>
		<CardTitle>Card Title Here</CardTitle>
	</CardHeader>
	<CardBody>
		<p>Laborum in aute officia adipisicing elit velit.</p>
	</CardBody>
	<CardFooter>
		<p>Card footer</p>
	</CardFooter>
</Card>

<Card>
	<CardHeader>
		<CardTitle>Card Title Here</CardTitle>
	</CardHeader>
	<CardBody>
		<p>Laborum in aute officia adipisicing elit velit.</p>
	</CardBody>
</Card>

<Card>
	<CardBody>
		<p>Laborum in aute officia adipisicing elit velit.</p>
	</CardBody>
	<CardFooter>
		<p>Card footer</p>
	</CardFooter>
</Card>

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.

CardBody

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

All props from div, plus:

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

CardFooter

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

All props from div, plus:

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

CardHeader

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

All props from div, plus:

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

CardTitle

The title of a card. Usually composed as a direct child of aCardHeader 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 `CardTitle` styling and functionality onto alternative element types or your own React components.