Layout

Card

Surface container that groups related content with optional header, title, description, and footer regions.

import { Card } from '@lostgradient/cinder/card';
layoutcontainer
01

Overview

Surface container for grouping related content and actions into a distinct visual unit.

Usage

svelte 
<script lang="ts">
  import Card from '@lostgradient/cinder/card';
</script>

<Card>
  <div
    style="min-block-size: 8rem; border: 1px dashed var(--cinder-border-muted); border-radius: var(--cinder-radius-sm); background: repeating-linear-gradient(-45deg, transparent, transparent 0.5rem, color-mix(in oklch, var(--cinder-border-muted), transparent 70%) 0.5rem, color-mix(in oklch, var(--cinder-border-muted), transparent 70%) 0.5625rem);"
  ></div>
</Card>

Danger Zones

Use tone="danger" when a settings section or action group has destructive, irreversible, or broad-scope consequences. The tone paints the Card container, border, and generated title icon so applications do not need to hand-roll danger-zone borders or backgrounds. Put the concrete state or action in the body and use ConfirmDialog for irreversible or workspace-wide changes.

Elevation

The elevation prop applies across every variant and tone combination, including variant="well" and tone="danger". Those two surfaces ship flat (box-shadow: none) at the default elevation="sm", matching their existing look — set elevation="md" or elevation="lg" explicitly on a well or danger card to raise it above that flat baseline. The flat baseline applies to non-interactive cards only: a well or danger card that is also interactive keeps its hover and focus elevation, so its resting state is not pinned flat.

Interaction States

A card becomes interactive when it receives href (the whole card renders as an anchor) or onclick (the whole card renders as a <div> with a stretched hit-target <button> covering it). Either way, hover raises the card's elevation and darkens its border under a hover-capable pointer, and keyboard focus paints a visible ring on the outer card itself — never only on the inner control — so the whole-card-is-a-link pattern gets a correct focus indicator without a consumer needing to do anything extra.

Live preview
02

When to use

Use when
  • Grouping a self-contained unit of content such as a summary, preview, or settings panel.
  • Composing a list of comparable items where each needs its own framed region.
Avoid when
  • Rendering a bare visual surface without slotted regions — use surface instead.
  • Presenting a single key metric — use statistic or statistic-group instead.
03

Examples

Basic card

A plain bordered card with a single body region.

Blog post grid

An article-listing section recipe: Cards carry post image, category metadata, linked title, excerpt, and an Avatar author byline.

Danger zone action

A destructive action inside a danger-tone Card with the confirmation flow delegated to ConfirmDialog.

Danger zone setting

A high-risk settings card with container-level danger treatment, a switch, and a confirmation dialog before the risky state is applied.

Card, edge-to-edge on mobile

A card that bleeds to the viewport edge below the mobile breakpoint.

Flush body (padding="none")

Pass padding="none" to remove the body padding for full-bleed content such as an image or a data table.

Team roster

A meet-the-team section recipe: profile Cards with an Avatar, role, bio, and profile link, plus an AvatarGroup summary row above the grid.

Testimonial grid

A social-proof section recipe: Cards hold customer blockquotes with an Avatar byline attributing each quote to a person and company.

Well

A flatter inset container for low-emphasis grouped content.

Well, edge-to-edge on mobile

A well that bleeds to the viewport edge below the mobile breakpoint.

Well on grey

A well presented on a muted surrounding surface.

Card with grey body

A card whose body uses the muted surface tone.

Card with header

A card with a separated header region above the body.

04

Props

Props for card
Name
Type
Default
Description
children required snippet
header snippet
title text Primary heading text rendered inside the card's header region.
headingLevel 23456 3 Heading level for the generated title. Defaults to 3. Set this so the card title nests correctly within the surrounding document outline.
description text Optional subheading rendered as a paragraph below the title inside the header.
footer snippet
variant 'card' | 'well' 'card' Visual container style. card is raised; well is flatter and inset.
tone 'default' | 'danger' 'default' Container risk treatment. danger renders a danger-zone surface for high-risk settings or destructive actions.
bodyTone 'default' | 'muted' 'default' Body surface treatment. muted renders a grey/inset body region.
footerTone 'default' | 'muted' 'default' Footer surface treatment. muted renders a grey/inset footer region.
edgeToEdgeOnMobile boolean false Remove side borders/radius and bleed to the viewport edge on narrow screens.
padding 'default' | 'none' 'default' Body padding. none leaves header and footer padding intact while making body content flush with the card edges.
elevation 'none' | 'sm' | 'md' | 'lg' 'sm' Elevation shadow applied to the card surface.
href text Destination URL that makes the entire card an anchor.
onclick (event: MouseEvent) => void Click handler that makes the entire card a button.