Card

Fission

Product

▾

Setup

›

›

Card is the standard surface wrapper for grouped content.

Use it when a section should feel visually separate from its background without becoming a whole dialog or panel. Cards work well for summaries, small dashboards, settings groups, and message attachments.

Example

use fission::prelude::*;

let widget: Widget = Card {
    child: 
        VStack {
            spacing: Some(8.0),
            children: vec![
                Text::new("Billing").into(),
                Text::new("Next invoice: 15 May").into(),
            ],
        }
        .into(),
    ,
}
.into();

This lets the content read as one unit without forcing you to recreate surface styling by hand.

Field table

Field	Type	Meaning	Notes / default behavior
child	Widget	The content shown inside the card.	Required. The default placeholder is only for empty construction.

Layout behavior

The checked-in card applies theme surface color, medium border radius, a level-1 shadow, and standard internal padding. It does not scroll, clip, or add interaction on its own. If the card should be clickable, wrap its content in a Button or a GestureDetector.

Specific advice

A card should group meaningfully related content. If every small line item becomes its own card, the surface styling loses impact and the screen becomes harder to scan.

Production checklist

For Card, review the fields that change behavior before treating the widget as finished: child. The goal is to make the product rule visible in state and actions, not hidden inside ad-hoc construction code.

•

If this widget appears inside an interactive flow, keep the surrounding action binding in the parent component and test that the flow still has one clear reducer path.

•

When child widgets are generated from data, give reordered or filtered rows an explicit WidgetId so retained local state and scroll behavior do not drift between items.

•

Check the semantics tree for the user-facing label or role that makes this widget understandable without relying only on pixels.

•

Add at least one component or harness test that confirms the visible text, semantic role, action dispatch, and layout constraint that matter for this widget in context.

If a screen starts repeating the same Card setup, extract a named component around this widget. That keeps the reference API small while making product code easier to read and safer for generated code to copy.

Container, Alert, EmptyState, and Stat.