Skip to content
WeDanceDocs
Componentsbeta

Card

A white surface that groups everything about one thing — an event, a festival, a teacher. Composed from six small parts.

Demo

Salsa Weekender Munich

3 days · 14 workshops · 3 parties

Cuban salsa, rumba and son with teachers from Havana and Berlin.

vue
<Card>
  <CardHeader>
    <CardTitle>Salsa Weekender Munich</CardTitle>
    <CardDescription>3 days · 14 workshops · 3 parties</CardDescription>
  </CardHeader>
  <CardContent>
    <p class="text-sm text-muted-foreground">
      Cuban salsa, rumba and son with teachers from Havana and Berlin.
    </p>
  </CardContent>
  <CardFooter class="justify-end gap-2">
    <Button variant="outline" size="sm">Details</Button>
    <Button size="sm">Add to plan</Button>
  </CardFooter>
</Card>

Anatomy

Six parts, all optional. Use only what the content needs — a teacher tile may be just Card + CardContent.

PartElementBase classesRole
Carddivrounded-lg border bg-card text-card-foreground shadow-smThe surface. White on cream, hairline border.
CardHeaderdivflex flex-col gap-y-1.5 p-6Groups title and description.
CardTitleh3text-2xl font-semibold leading-none tracking-tightThe card’s heading — an h3.
CardDescriptionptext-sm text-muted-foregroundOne line of supporting text.
CardContentdivp-6 pt-0Body: text, tags, media, form fields.
CardFooterdivflex items-center p-6 pt-0Actions, aligned with justify-*.

WeDance event card

The base card is shadcn-neutral. On product pages we round it to rounded-2xl, set the title in font-display and add the amber eyebrow. An event/festival card pattern is planned — until then, copy this.

Singer with a microphone on a crowded stage
Concert · Sat 23 May

Charanga Habanera

La Rumba, Munich

Timba
Live band
DJ smiling behind the decks
Social · Every Thursday

Thursday Latin Social

21:00 – 01:00 · Munich

Salsa
Bachata
Merengue
vue
<Card class="rounded-2xl overflow-hidden">
  <img src="/alosha-charanga.jpg" alt="Singer with a microphone on a crowded stage" class="h-40 w-full object-cover" />
  <CardHeader class="p-5">
    <span class="text-[10px] uppercase tracking-[0.3em] font-bold text-secondary">Concert · Sat 23 May</span>
    <CardTitle class="font-display font-bold text-2xl">Charanga Habanera</CardTitle>
    <CardDescription class="flex items-center gap-1.5">
      <MapPin class="w-4 h-4" aria-hidden="true" /> La Rumba, Munich
    </CardDescription>
  </CardHeader>
  <CardContent class="px-5 pb-5 flex flex-wrap gap-1.5">
    <Badge variant="outline">Timba</Badge>
    <Badge variant="outline">Live band</Badge>
  </CardContent>
</Card>

Props

PropTypeDefaultDescription
classHTMLAttributes["class"]—Every part accepts class, merged with cn(). This is the only prop — layout and look are set with classes.
default slotslot—Every part renders its children. Compose the parts you need; all are optional.

Do & don't

Cuba Dance Days

Berlin · June

Do — One card, one thing. A festival card is about one festival; its actions sit in the footer.

Cuba Dance Days

Don't — Cards inside cards. Nesting surfaces doubles borders and padding and muddies what belongs to what.

Accessibility

  • CardTitle renders an <h3>. Check the page outline: if cards sit directly under the page h1, override with a wrapper heading or keep the section h2 above them so levels don’t skip.
  • When the whole card is a link, wrap it in one <NuxtLink> and keep a single focus stop. Don’t nest more buttons or links inside a linked card — split the actions into the footer instead.
  • Images inside a card need real alt text (who or what is on stage), or alt="" if the title already says it all.
  • Card is a plain container with no landmark role. A list of cards should sit in a <ul> / <li> so screen readers announce “list, 12 items”.