1. Docs
2. Components
3. Data
4. Card

Card 1.2.2

A flexible content container with .velin-card. Includes header, body, footer, image cap, flat variant, clickable state, and responsive horizontal layout. Deutsch: Karte

When to use

• Grouped content blocks with header, body, and optional footer/media using .velin-card.
• Product tiles, summary panels, or list items that need a clear visual container without overlay behavior.

When not

• Modal or sheet overlays — use Modal, Dialog, or Sheet.
• Simple inline status text — use Alerts or plain typography instead of wrapping everything in a card.

Basic Example

Preview HTML

Card title

Some quick example text to build on the card title and make up the body content.

Action

Copy

<div class="velin-card">
  <img class="velin-card__image" src="photo.jpg" alt="…">
  <div class="velin-card__body">
    <h3 class="velin-card__title">Card title</h3>
    <p class="velin-card__text">Some quick example text…</p>
  </div>
  <div class="velin-card__footer">
    <button class="velin-btn velin-btn--primary velin-btn--sm">Action</button>
  </div>
</div>

Variants

<!-- Flat (no shadow) -->
<div class="velin-card velin-card--flat">…</div>

<!-- Clickable -->
<div class="velin-card velin-card--clickable" tabindex="0">…</div>

<!-- Horizontal (uses container query, min-width: 30rem) -->
<div class="velin-card velin-card--horizontal">
  <img class="velin-card__image" src="photo.jpg" alt="…">
  <div class="velin-card__body">…</div>
</div>

Accessibility

• Use semantic headings inside .velin-card__title.
• Add alt text to .velin-card__image.
• Clickable cards should have tabindex="0" and a keyboard handler or use an <a> wrapper.

CSS Variables

Related

• List Group
• Stat
• Badge