Card

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

Basic Example

Card title

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

<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 card

No shadow, border only.

Clickable

Hover for elevated shadow.

<!-- 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

Variable	Description
`--velin-color-surface-bright`	Card background
`--velin-color-border`	Border colour
`--velin-radius-lg`	Border radius
`--velin-shadow-sm`	Default shadow
`--velin-shadow-md`	Hover shadow
`--velin-shadow-lg`	Clickable hover shadow
`--velin-aspect-video`	Image aspect ratio