Skip to content

Component

Card

A FormaUI card — a themed container with an opinionated header / content / footer slot API covering all three Material 3 card families via variant; clickable cards get a default-on press-scale micro-interaction (shared Modifier.formaPressScale).

dev.formaui.components.card

elevatedoutlinedfilled

Preview

This toggle is site chrome only — the preview has its own light/dark switch inside.

Live preview

Live preview — ~37 MB development build

Usage

FormaCard(
    header = { Text("Account", style = MaterialTheme.typography.titleMedium) },
    footer = {
        FormaButton(onClick = { }, variant = FormaButtonVariant.Text) {
            Text("View details")
        }
    },
) {
    Text("Balance")
    Text("$1,240.00", style = FormaTheme.typography.numeric)
}

FormaCard

A themed container with header / content / footer slots stacked vertically, optionally clickable via onClick, covering all three M3 card families.

modifierTypeModifierDefaultModifierDescriptionThe Modifier applied to the card.
variantTypeFormaCardVariantDefaultFormaCardVariant.ElevatedDescriptionThe surface style (defaults to FormaCardVariant.Elevated).
onClickType(() -> Unit)?DefaultnullDescriptionOptional click handler. When non-null the entire card becomes clickable and focusable; when null the card is a static container.
enabledTypeBooleanDefaulttrueDescriptionWhether the card responds to clicks. Only meaningful when onClick is non-null.
shapeTypeShapeDefaultFormaCardDefaults.shapeDescriptionThe card's container shape (defaults to FormaCardDefaults.shape).
colorsTypeCardColors?DefaultnullDescriptionThe card colors. When null, the M3 default colors for the variant are used.
contentPaddingTypePaddingValuesDefaultFormaCardDefaults.contentPaddingDescriptionPadding between the card edges and its slots (defaults to FormaCardDefaults.contentPadding).
interactionSourceTypeMutableInteractionSource?DefaultnullDescriptionThe MutableInteractionSource for observing/emitting interactions. When null, one is remembered internally for the clickable card. Unused when onClick is null.
pressedScaleTypeFloatDefaultFormaCardDefaults.PressedScaleDescriptionThe scale factor applied while a clickable card is pressed (defaults to a subtler 0.98 — large surfaces read a small dip clearly). Must be greater than 0. Unused when onClick is null.
pressAnimationSpecTypeFiniteAnimationSpec<Float>?DefaultFormaPressScaleDefaults.AnimationSpecDescriptionThe animation used for the press-scale's release spring-back (defaults to a responsive spring; the press dip uses FormaPressScaleDefaults.DownAnimationSpec). Pass null to disable the press-scale entirely. Unused when onClick is null.
headerType(@Composable () -> Unit)?DefaultnullDescriptionOptional slot rendered above content (e.g. a title row).
footerType(@Composable () -> Unit)?DefaultnullDescriptionOptional slot rendered below content (e.g. an action row).
contentrequiredType@Composable ColumnScope.() -> UnitDefaultrequiredDescriptionThe card's main content, laid out in a ColumnScope.

Supporting API

FormaCardVariantenum
Surface style of a FormaCard: Elevated (default), Outlined, Filled.
FormaCardDefaultsobject
Defaults for FormaCard: shape (FormaTheme.shapes.lg), contentPadding (FormaTheme.spacing.md on all sides), PressedScale (0.98 — a subtler press-scale dip for large surfaces).

Accessibility

When onClick is non-null the entire card is a single clickable/focusable target; Role.Button semantics and the ripple are handled by the underlying M3 clickable card.