Card

A styled surface container that groups related content into Header, Content, and Footer zones. Use it to visually separate distinct sections of a page or flow.

Playground

Props

Prop	Type	Default	Value
alignment	`'start' \| 'center'`	`'start'`
elevation	`'card' \| 'flush' \| 'overlay'`	`'card'`
className	`string`	—	—
style	`CSSProperties`	—	—

Usage

import { Card } from '@clerk/ui/mosaic/components/card';

<Card.Root>
  <Card.Header>Heading</Card.Header>
  <Card.Content>Body content.</Card.Content>
  <Card.Footer>Footer actions</Card.Footer>
</Card.Root>

Examples

Centered

Verify your email

We sent a verification code to your email address

Enter the code below to continue.