Card

Installation

npx usmds add card

Usage

import { Card } from '@components/Card';
 
<Card
  title="Card title"
  description="Card description text goes here."
  buttonText="Button"
  variant="default"
/>

Props

Card

Extends View props.

Prop	Type	Default	Description
variant	`'default' \| 'media-first' \| 'inset'`	`'default'`	The visual style variant of the card.
title	`string`	-	The title text of the card.
description	`string`	-	The description text of the card.
buttonText	`string`	-	The text for the card's action button.
mediaUrl	`string`	-	URL for the card's media content.
showMedia	`boolean`	`false`	Whether to display the media content.
className	`string`	-	Additional Tailwind classes to apply.

Variants

Default

Basic card layout without media.

<Card
  variant="default"
  title="Card title"
  description="Card description text goes here."
  buttonText="Learn More"
/>

Media First

Card with media content at the top.

<Card
  variant="media-first"
  title="Card title"
  description="Card description text goes here."
  buttonText="Learn More"
  mediaUrl="https://example.com/image.jpg"
  showMedia
/>

Inset

Card with inset media content below the title.

<Card
  variant="inset"
  title="Card title"
  description="Card description text goes here."
  buttonText="Learn More"
  mediaUrl="https://example.com/image.jpg"
  showMedia
/>

Styling

The Card component uses Tailwind CSS classes for styling. The appearance can be customized using the className prop:

<Card
  className="shadow-lg"
  title="Custom Card"
  description="This card has custom styling."
  buttonText="Learn More"
/>

Default styling includes:

Width: 329px
Minimum height: 471px
White background
Light border
Rounded corners (4px)
Consistent padding
Flexible content layout

Media Dimensions

Media First variant: 327px × 188px (top-rounded corners)
Inset variant: 100% width × 162px (no rounded corners)

Accessibility

The Card component:

Uses semantic HTML structure
Maintains proper text contrast
Provides clear visual hierarchy
Ensures interactive elements are accessible
Supports keyboard navigation

Card

On this page