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.

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
NameTypeDefaultDescription
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.