Card CSS-only

About

Overview

A card groups related content into a single visual unit — a profile, a stat, a settings panel, a list item, an article preview. RenDS gives you one base component with optional header / body / footer slots, five visual variants, and three interaction states (static, interactive, selectable).

Cards are entirely CSS-driven. There's no <ren-card> Web Component because there's nothing for JS to do — the structure is plain HTML, the variants are class modifiers, and the interactivity (hover, focus, selection) is handled by CSS pseudo-classes plus standard ARIA attributes.

When to use

• To group a chunk of content (text + actions + metadata) that the user will visually scan as a single unit.
• To present a list of similar items (a grid of products, posts, profiles, settings groups).
• For status surfaces — use the data-status attribute to signal success, warning, danger, or info at a glance.

When not to use

• For a single line of content — a card adds visual weight that body text doesn't need. Use a paragraph or a banner.
• For a modal dialog — that's ren-dialog, which traps focus and dims the rest of the page.
• For navigation between pages — wrap an anchor or use ren-link; cards make poor primary navigation.

Structure

Anatomy

A card has a container plus three optional section slots. Each slot has its own padding rules so they nest cleanly without you fighting margins.

Live

Demo

The default card with all three sections. Drop in your own content — RenDS won't fight you.

<div class="ren-card">
  <div class="ren-card-header">
    <h4 class="ren-card-title">Welcome back</h4>
    <p class="ren-card-description">Pick up where you left off</p>
  </div>
  <div class="ren-card-body">
    <p>Three drafts saved, two pull requests waiting for review…</p>
  </div>
  <div class="ren-card-footer">
    <button class="ren-btn ren-btn-ghost ren-btn-sm">Later</button>
    <button class="ren-btn ren-btn-primary ren-btn-sm">Open dashboard</button>
  </div>
</div>

Sections are all optional. A card with only .ren-card-body works. A card with no sections at all (just children) auto-pads its first and last child via :first-child / :last-child selectors.

Catalog

Variants

Five visual variants — pick the one that matches the card's role. Plus three interaction states layered on top, and four status accents for at-a-glance signals.

Reference

API

CSS classes only. There is no Web Component for card.

Container

Sections

Interaction

Layout helper

Inclusive by default

Accessibility

Static cards are non-interactive — they're just visual containers and don't need any ARIA. Interactive and selectable cards inherit semantics from the wrapping element you choose.

Static cards

• Use semantic content inside — proper heading levels (<h2>–<h4>) for titles, real <p> tags for prose, real <button>s for actions.
• Don't add ARIA roles to the card itself — it's a generic <div> by intent.
• For status accents, the visual data-status="danger" top border isn't enough on its own. Pair with a text label, an icon, or an aria-describedby for screen reader users.

Interactive cards

If the entire card is clickable, wrap the card content in an <a> or <button>, or set tabindex="0" + role="button" if neither makes sense.

Selectable cards (radio / checkbox patterns)

• For exclusive choice (one of N), wrap each card in a <label> with a hidden <input type="radio">, or use role="radio" + aria-checked.
• For multi-select, use role="checkbox" + aria-checked, or a hidden <input type="checkbox"> in a label.
• Set aria-selected="true" on the chosen card so screen readers announce "selected". The CSS targets both aria-selected and data-selected for the accent ring.

Reduced motion

The hover-lift on interactive cards uses --duration-tactile and respects prefers-reduced-motion via the semantic motion tokens. Users who request reduced motion get a quieter transition (color change without scale).

Recipes

Examples

Common compositions. Copy the markup, swap the content.

KPI / stat card

For dashboards. One number, one label, optional trend.

<div class="ren-card">
  <div class="ren-card-body">
    <p class="stat-label">Active users</p>
    <p class="stat-value">12,430</p>
    <p class="stat-trend">↑ 12.5% vs last month</p>
  </div>
</div>

Selectable plan card (radio pattern)

For pricing tiers, plan switchers, theme pickers.

<label class="ren-card ren-card-selectable">
  <input type="radio" name="plan" />
  <div class="ren-card-body">
    <strong>Pro</strong>
    <p>$12/mo · unlimited</p>
  </div>
</label>

Article preview (interactive card with cover)

Wrap the whole card in <a> so the entire surface is one click target.

<a href="/post/123" class="ren-card ren-card-interactive">
  <div class="cover"></div>
  <div class="ren-card-header">
    <h4 class="ren-card-title">From Tailwind to vanilla…</h4>
    <p class="ren-card-description">5 min read · Engineering</p>
  </div>
  <div class="ren-card-body">
    <p>How we replaced a 180 KB toolchain…</p>
  </div>
</a>

Danger-zone card

For destructive actions in settings panels. Status border + danger button.

<div class="ren-card" data-status="danger">
  <div class="ren-card-header">
    <h4 class="ren-card-title">Delete account</h4>
    <p class="ren-card-description">Permanently remove…</p>
  </div>
  <div class="ren-card-footer-border">
    <button class="ren-btn ren-btn-danger ren-btn-sm">Delete account</button>
  </div>
</div>

Card group (auto-grid)

One class on the parent gives you a responsive grid of cards.

<div class="ren-card-group">
  <div class="ren-card">…</div>
  <div class="ren-card">…</div>
  <div class="ren-card">…</div>
</div>