Components

Card

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

Updated Jul 19, 2026 by Leonardo Posada

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.