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

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.

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.

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 Required Bindable Description
children snippet req
header discriminated-union
title discriminated-union
headingLevel discriminated-union 3
description discriminated-union
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.