Card

Display

A flexible surface container. Compose with DsCardHeader, DsCardContent and DsCardFooter.

Props

Prop	Type	Default	Description
`shadow`	`'none' \| 'sm' \| 'md' \| 'lg'`	`'sm'`	Box shadow depth.
`radius`	`'sm' \| 'md' \| 'lg' \| 'xl'`	`'lg'`	Border radius.
`padding`	`'none' \| 'sm' \| 'md' \| 'lg'`	`'none'`	Direct padding on the card. Use 'none' when composing with DsCardContent/DsCardHeader.
`hoverable`	`boolean`	`false`	Lifts shadow on hover and shows pointer cursor.

Examples

Article card

Design5 min read

Design tokens in practice

Learn how to build a scalable design system using CSS custom properties and Tailwind CSS presets.

Mar 5, 2026

vue

<DsCard class="w-full max-w-sm" shadow="md">
  <DsCardHeader :divided="true">
    <div class="flex items-center justify-between">
      <DsBadge variant="primary" size="sm">Design</DsBadge>
      <span class="text-xs text-ds-fg-subtle">5 min read</span>
    </div>
    <h3 class="font-semibold text-ds-fg mt-2">Design tokens in practice</h3>
  </DsCardHeader>
  <DsCardContent>
    <p class="text-sm text-ds-fg-muted leading-relaxed">
      Learn how to build a scalable design system using CSS custom
      properties and Tailwind CSS presets.
    </p>
  </DsCardContent>
  <DsCardFooter align="between">
    <span class="text-xs text-ds-fg-subtle">Mar 5, 2026</span>
    <DsButton variant="ghost" size="sm">Read more</DsButton>
  </DsCardFooter>
</DsCard>

Profile card

Antoine Gourgue

Staff Frontend Engineer

Building design systems and developer tools. Focused on Nuxt, Vue 3 and TypeScript.

vue

<DsCard class="w-full max-w-sm">
  <DsCardHeader :divided="true">
    <div class="flex items-center gap-3">
      <div class="size-10 rounded-full bg-ds-primary-subtle flex items-center justify-center shrink-0">
        <span class="text-sm font-bold text-ds-primary">AG</span>
      </div>
      <div>
        <p class="font-semibold text-ds-fg text-sm">Antoine Gourgue</p>
        <p class="text-xs text-ds-fg-muted">Staff Frontend Engineer</p>
      </div>
    </div>
  </DsCardHeader>
  <DsCardContent>
    <p class="text-sm text-ds-fg-muted leading-relaxed">
      Building design systems and developer tools.
      Focused on Nuxt, Vue 3 and TypeScript.
    </p>
  </DsCardContent>
  <DsCardFooter>
    <DsButton variant="secondary" size="sm" class="flex-1">Message</DsButton>
    <DsButton size="sm" class="flex-1">Follow</DsButton>
  </DsCardFooter>
</DsCard>

Simple card with padding prop

Quick note

Use padding for simple cards that don't need structured header/footer sections.

vue

<!-- Simple usage with padding prop (no sub-components needed) -->
<DsCard padding="md" class="w-full max-w-sm">
  <p class="text-sm font-semibold text-ds-fg mb-1">Quick note</p>
  <p class="text-sm text-ds-fg-muted">
    Use padding prop for simple cards that don't need structured sections.
  </p>
</DsCard>

Skeleton

Use DsCardSkeleton as a loading placeholder while content is being fetched.

Default

vue

<DsCardSkeleton />

With Avatar

vue

<DsCardSkeleton showAvatar />

No Footer

vue

<DsCardSkeleton :showFooter="false" />

Full

vue

<DsCardSkeleton
  showAvatar
  showFooter
  :lines="4"
/>

Accessibility

Use semantic HTML inside card slots (headings, paragraphs, etc.).
Set hoverable only when the card is an interactive/clickable element.

AvatarGroup

Carousel