Components

Card

Elevated container that groups related content. Compose from CardHeader / CardContent / CardFooter.

Updated Aug 21, 2026 by Leonardo Posada

Interactive playground

Toggle the props in the panel on the right and see the Card re-render in real time. The code block below reflects the exact JSX with the values you picked, ready to copy into your prototype.

Payment method
Choose how the customer pays at checkout.

Card, wallet or local method.

Playground
<Card>
  <CardHeader>
    <CardTitle>Payment method</CardTitle>
    <CardDescription>Choose how the customer pays at checkout.</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Card, wallet or local method.</p>
  </CardContent>
  <CardFooter>
    <Button>Configure</Button>
  </CardFooter>
</Card>

Anatomy

Payments summary
Last 30 days across all providers.
$128,450.20
  1. 1
    Card

    The container: rounded-xl (14px), 1px border, bg-card, shadow-sm.

  2. 2
    CardHeader

    Top section (p-6, gap-1.5). Title + description, or a logo + title in a row.

  3. 3
    CardTitle

    text-base font-semibold — the card heading.

  4. 4
    CardDescription

    text-sm muted-foreground — supporting line under the title.

  5. 5
    CardContent

    The body (p-6 pt-0). Metrics, fields, previews.

  6. 6
    CardFooter

    Actions row (p-6 pt-0). Add border-t for a divided footer.

Basic

Payments summary
Last 30 days across all providers.
$128,450.20
+12.4% vs previous period
<Card className="w-full max-w-md">
  <CardHeader>
    <CardTitle>Payments summary</CardTitle>
    <CardDescription>Last 30 days across all providers.</CardDescription>
  </CardHeader>
  <CardContent>
    <div className="text-2xl font-semibold">$128,450.20</div>
    <div className="text-xs text-muted-foreground mt-1">+12.4% vs previous period</div>
  </CardContent>
  <CardFooter>
    <Button variant="outline" size="sm">View report <ArrowRight weight="light" /></Button>
  </CardFooter>
</Card>
Provider logos come from Yuno's CDN
Every payment-provider logo used in these product-card recipes is pulled fromhttps://icons.prod.y.uno/{provider}_logosimbolo.png— swap the slug (stripe / adyen / dlocal / payu / mercadopago / 2c2p / visa / mastercard / amex …) and you get the correct logo. Same pattern the Table "Provider (logo + name)" cell type uses. Never ship a fake stand-in when the real logo is one URL away.

Recipes

Ready-to-copy compositions covering the most common Yuno usages of this atom.

Connection card

A provider card in both states — not-connected (logo on top, name below, Connect button) and connected (checkbox + copy/menu actions, an Active status badge, and the provider logos with a count).

Adyen
Processor
Adyen
This is a card description.
Active
{/* Not connected: logo on top, name below, Processor + Connect in the footer */}
<Card className="w-full max-w-sm shadow-none transition-all hover:border-primary hover:shadow-xl">
  <CardHeader className="gap-4">
    <IconWrapper variant="logos" size="xl">
  <img src="https://icons.prod.y.uno/adyen_logosimbolo.png" alt="Adyen" className="size-full object-contain" />
</IconWrapper>
    <CardTitle>Adyen</CardTitle>
  </CardHeader>
  <CardFooter className="justify-between border-t px-6 py-4">
    <Badge variant="outline">Processor</Badge>
    <Button size="sm">Connect</Button>
  </CardFooter>
</Card>

{/* Connected: checkbox + logo + actions, Active badge + provider logos */}
<Card className="w-full max-w-sm shadow-none transition-all hover:border-primary hover:shadow-xl">
  <CardHeader className="gap-4">
    <div className="flex items-center justify-between">
      <div className="flex items-center gap-4">
        <Checkbox defaultChecked />
        <IconWrapper variant="logos" size="xl">
  <img src="https://icons.prod.y.uno/adyen_logosimbolo.png" alt="Adyen" className="size-full object-contain" />
</IconWrapper>
      </div>
      <div className="flex items-center gap-3 text-muted-foreground">
        <CopySimple weight="light" className="size-5" />
        <DotsThreeOutline weight="fill" className="size-4" />
      </div>
    </div>
    <div className="flex flex-col gap-1.5">
      <CardTitle>Adyen</CardTitle>
      <CardDescription>This is a card description.</CardDescription>
    </div>
  </CardHeader>
  <CardFooter className="justify-between border-t px-6 py-4">
    <StatusBadge status="succeeded">Active</StatusBadge>
    <div className="flex items-center gap-2">{/* provider logos */}<Button variant="outline" size="sm">+5</Button></div>
  </CardFooter>
</Card>
Onboarding card

A get-started card: category badges, an image slot, a title with an Info icon, a description, and a Learn more footer.

Get startedDevelopers
Image (swap it with your content)
Title
This is a card description.
<Card className="w-full max-w-sm shadow-none transition-all hover:border-primary hover:shadow-xl">
  <CardHeader className="gap-4">
    <div className="flex gap-2">
      <Badge variant="outline">Get started</Badge>
      <Badge variant="outline">Developers</Badge>
    </div>
    <div className="flex h-30 items-center justify-center rounded-md bg-muted text-sm text-muted-foreground">
      Image (swap it with your content)
    </div>
    <div className="flex flex-col gap-2">
      <CardTitle className="flex items-center gap-2"><Info weight="light" className="size-4" />Title</CardTitle>
      <CardDescription>This is a card description.</CardDescription>
    </div>
  </CardHeader>
  <CardFooter className="border-t px-6 py-4">
    <Button variant="outline" size="sm">Learn more</Button>
  </CardFooter>
</Card>
Routing card

Two types — Explore (logo + name) and Route (selectable, with a checkbox + overflow menu) — each with Payin/Payouts badges and a published / not-published state (Set up vs View).

Payouts
Adyen
Not published
Payouts
Adyen
Version 22
Published
Payouts
Adyen
Version 22
Not published
Payouts
Adyen
Version 22
Published
{/* Not published + Published */}
<Card className="w-full max-w-sm shadow-none transition-all hover:border-primary hover:shadow-xl">
  <CardHeader className="gap-4">
    <div className="flex items-center justify-between">
      <IconWrapper variant="logos" size="xl">
  <img src="https://icons.prod.y.uno/adyen_logosimbolo.png" alt="Adyen" className="size-full object-contain" />
</IconWrapper>
      <Badge variant="secondary">Payouts</Badge>
    </div>
    <CardTitle>Adyen</CardTitle>
  </CardHeader>
  <CardFooter className="justify-between border-t px-6 py-4">
    <Badge variant="outline">Not published</Badge>
    <Button size="sm">Set up</Button>
  </CardFooter>
</Card>
Connection card (compact)

A horizontal marketplace row: logo + name, with a category Badge, a More info link, and an Add button.

2C2P
Payins
<Card className="w-full max-w-md p-4 shadow-none transition-all hover:border-primary hover:shadow-xl">
  <div className="flex items-center gap-4">
    <div className="flex flex-1 items-center gap-4">
      <IconWrapper variant="logos" size="xl">
        <img src="https://icons.prod.y.uno/2c2p_logosimbolo.png" alt="2C2P" className="size-full object-contain" />
      </IconWrapper>
      <span className="text-base font-semibold">2C2P</span>
    </div>
    <div className="flex items-center gap-2">
      <Badge variant="secondary">Payins</Badge>
      <Button variant="link" size="sm">More info</Button>
      <Button size="sm">Add</Button>
    </div>
  </div>
</Card>
Payment-method row

A draggable list row: drag handle + logo + name + count, with a Switch and an overflow menu.

Mastercard2
<Card className="w-full max-w-md px-4 py-3 shadow-none transition-colors hover:bg-muted/40">
  <div className="flex items-center gap-4">
    <div className="flex flex-1 items-center gap-3">
      <DotsSixVertical weight="light" className="size-4 text-muted-foreground" />
      <IconWrapper variant="logos" size="md">
        <img src="https://icons.prod.y.uno/mastercard_logosimbolo.png" alt="Mastercard" className="size-full object-contain" />
      </IconWrapper>
      <span className="text-sm font-semibold">CPWP</span>
      <BadgeNumber className="bg-primary/15 text-foreground">2</BadgeNumber>
    </div>
    <div className="flex items-center gap-4">
      <Switch />
      <DotsThreeOutline weight="fill" className="size-4 text-muted-foreground" />
    </div>
  </div>
</Card>

Import

Copy this import line at the top of the file where you compose this atom.

Every section is optional — compose only the ones you need.
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from "@/components/ui/card";

Props

Everything else from the underlying HTML or Radix primitive is forwarded via ...props.

PropTypeDefaultDescription
Carddiv props—The container: rounded-xl, border, bg-card, shadow-sm. Add shadow-none for a flat, border-only product card.
CardHeaderdiv props—Top section: flex flex-col gap-1.5 p-6. Override the gap or add rows for logos + actions.
CardTitlediv props—text-base font-semibold — the card heading.
CardDescriptiondiv props—text-sm text-muted-foreground. Sub-text under the title.
CardContentdiv props—Body section: p-6 pt-0 (no double top padding under the header).
CardFooterdiv props—Actions row: flex items-center p-6 pt-0. Add border-t for a divided footer.

When to use

  • Grouping related fields, metrics, or actions.
  • Dashboard KPI tiles.
  • Preview of a resource (rule, transaction, product).

When not to use

  • Full-page layout — use a Template.
  • Modal-like content — use Dialog or Sheet.

Usage

Do
  • Use CardHeader + CardTitle + CardDescription when there's a heading.
  • Keep padding consistent (p-5 dense, p-6 default).
  • For actions, put them in CardFooter aligned to the right.
Don't
  • Don't nest Cards inside Cards — flatten the hierarchy.
  • Don't rely on shadow alone — border + shadow-sm is the Yuno signature.

Related

Cross-links to atoms and patterns you may reach for next.

  • BadgeStatus and category chips inside the header or footer.
  • ButtonThe card's primary and secondary actions, in CardFooter.
  • Icon wrapperThe logo / tinted-icon container used in product cards.