Cards

Cards display content and actions about a single subject

Use a card to display content and actions on a single topic.

Cards should be easy to scan for relevant and actionable information. Elements like text and images, should be placed on cards in a way that clearly indicates hierarchy.

Import

import { Card, CardMedia, CardContent, CardActionArea } from "@m3-components/solid";

With Image

Mount Everest

Mount Everest is the tallest mountain in the world, at 8,849 meters (29,032 feet). It sits on the border between Nepal and Tibet, part of the Himalayas.

<Card variant="outlined" class="w-120">
	<CardMedia src={Mountain.src} class="h-50" alt="An image of Mount Everest" />
	<CardContent>
		<Typography.Headline variant="small">Mount Everest</Typography.Headline>
		<Typography.Body>
			Mount Everest is the tallest mountain in the world, at 8,849 meters (29,032 feet). It sits on the border
			between Nepal and Tibet, part of the Himalayas.
		</Typography.Body>
	</CardContent>
</Card>

Action

You can wrap the content within the card with CardActionArea component to allow users to interact with the card.

Mount Everest

Mount Everest is the tallest mountain in the world, at 8,849 meters (29,032 feet). It sits on the border between Nepal and Tibet, part of the Himalayas.

<Card variant="outlined" class="w-120">
	<CardActionArea>
		<CardMedia src={Mountain.src} class="h-50" alt="An image of Mount Everest" />
		<CardContent>
			<Typography.Headline variant="small">Mount Everest</Typography.Headline>
			<Typography.Body>
				Mount Everest is the tallest mountain in the world, at 8,849 meters (29,032 feet). It sits on the border
				between Nepal and Tibet, part of the Himalayas.
			</Typography.Body>
		</CardContent>
	</CardActionArea>
</Card>