Card

Universal, flexible, and responsive card component. Supports images, titles, content, actions, links, and multiple visual variants. Suitable for many use cases: product, blog post, profile, stats, etc.

Usage

Basic

Simple card

<SuCard title="Card title" subtitle="A short description">
  <p>Main content of the card.</p>
</SuCard>

Variants

default / outlined / elevated / filled

<SuCard variant="default" title="Default" />
<SuCard variant="outlined" title="Outlined" />
<SuCard variant="elevated" title="Elevated" />
<SuCard variant="filled" title="Filled" />

Sizes

sm / md / lg

<SuCard size="sm" title="Small" />
<SuCard size="md" title="Medium" />
<SuCard size="lg" title="Large" />

With image

Header image

<SuCard
  image="/photo.jpg"
  imageAlt="Description"
  title="Alpine landscape"
  subtitle="Discover the mountains"
>
  <p>Card content.</p>
</SuCard>

Horizontal direction

Image left, content right

<SuCard direction="horizontal" image="/photo.jpg" title="Horizontal card">
  <p>Content to the right of the image.</p>
</SuCard>

Clickable card

Clickable and link

<!-- Clickable -->
<SuCard :clickable="true" title="Click me" @click="handleClick" />

<!-- Link -->
<SuCard href="/page" title="Navigate" />

With footer (actions)

Action area at the bottom

<SuCard title="Destination" subtitle="299 EUR">
  <template #footer>
    <SuButton variant="primary" size="sm">Book</SuButton>
    <SuButton variant="ghost" size="sm">Details</SuButton>
  </template>
</SuCard>

Image overlay

Badge on image

<SuCard image="/photo.jpg" title="Article">
  <template #image-overlay>
    <SuBadge variant="primary" size="sm">Popular</SuBadge>
  </template>
</SuCard>

API

Props

Prop	Type	Default	Description
variant	'default' | 'outlined' | 'elevated' | 'filled'	'default'	Visual variant
size	'sm' | 'md' | 'lg'	'md'	Size
direction	'vertical' | 'horizontal'	'vertical'	Layout direction
radius	Radius	undefined	Border radius. Defaults to the container radius (--su-radius-container, 16px)
clickable	boolean	false	Makes the card clickable
href	string	—	Link href (renders card as <a>)
target	LinkTarget	—	Target attribute for links
image	string	—	Image URL
imageAlt	string	—	Image alt text
imageRatio	'16/9' | '4/3' | '1/1' | '21/9' | 'auto'	'16/9'	Image aspect ratio
imageFit	'cover' | 'contain' | 'fill'	'cover'	Image object-fit
imagePosition	'top' | 'bottom'	'top'	Image position
title	string	—	Title
subtitle	string	—	Subtitle
titleLevel	1-6	3	Heading level
disabled	boolean	false	Disabled state
fullWidth	boolean	false	Full width
maxWidth	string	—	Custom max width

Slots

Slot	Description
default	Main content
image	Custom image area (replaces image prop)
image-overlay	Overlay on image (badges, tags)
header	Header above content (after image)
title	Custom title
subtitle	Custom subtitle
footer	Action area at the bottom

Events

Event	Payload	Description
click	MouseEvent	Emitted on click (if clickable or href)

Accessibility

• Rendered as <article> by default, <a> if href is provided
• role="button" + tabindex="0" when clickable without href
• Keyboard navigation: Enter and Space trigger click
• aria-disabled="true" when disabled
• rel="noopener noreferrer" automatic with target="_blank"
• loading="lazy" on images
• Supports prefers-contrast: high and prefers-reduced-motion: reduce
• Horizontal direction switches to vertical on mobile (< 640px)