Card

The grouping surface: three variants, size-scaled padding, everything else composed.

Card is a rounded panel around arbitrary content. Header, body and footer are composition — stack labels, media and buttons; the card only owns chrome and padding. It honors Constraints.Min.Y, which is what makes equal-height rows work inside grids.

Hard rule — pad vs Max.Y: Card / SurfaceCard inset content by CardProps.Pad() (from Size) but do not shrink content Constraints.Max.Y by that pad. A child that fills Max.Y paints under the chrome. Budget with CardProps{Size: …}.Pad() (or use Split pane helpers) — never hardcode 20. Content Min.Y is zeroed before the child layouts; re-assert Min.Y = Max.Y on the content if you need fill layout inside (see SplitBoxFillScroll).

Installation

Use the module import (the default), or own the source: lotusui add vendors the component into your app and lotusui update keeps the copy mergeable — see Registry.

go get github.com/ikaito-com/lotusui

# or vendor the source into your app:
go run github.com/ikaito-com/lotusui/cmd/lotusui add card

Usage

Header, content and footer are COMPOSITION — the login card: title and description with an action at the end, form fields, full-width footer buttons.

open demo ↗

lotusui.Card(th, lotusui.CardProps{}, lotusui.VStack(th.Space.MD,
	header("Login to your account", "Enter your email below to login to your account",
		lotusui.Button(th, &signup, "Sign Up", lotusui.ButtonProps{Variant: lotusui.ButtonLink})),
	emailField, passwordField,
	lotusui.FullWidth(lotusui.Button(th, &login, "Login", lotusui.ButtonProps{})),
	lotusui.FullWidth(lotusui.Button(th, &google, "Login with Google", lotusui.ButtonProps{Variant: lotusui.ButtonOutline})),
))

Variants

CardOutline (bordered panel, default), CardElevated (soft shadow — the design language's standard surface, also available as SurfaceCard), CardSubtle (tinted fill, no border).

open demo ↗

lotusui.Card(th, lotusui.CardProps{Variant: lotusui.CardElevated}, content)
lotusui.Card(th, lotusui.CardProps{Variant: lotusui.CardSubtle}, content)

Sizes and spacing

The shared Size presets scale content padding via CardProps.Pad() (MD default 20dp); app-wide spacing customization goes through the theme's WithSpace scale — the token, not a per-card knob. Same Size ladder as Button and every other component.

open demo ↗

lotusui.Card(th, lotusui.CardProps{Size: lotusui.Size2XL}, content)
// Budget a fill child: maxY - 2*gtx.Dp(lotusui.CardProps{}.Pad())

Image

The event card: a 16:9 cover (an image in your app) with a badge overlaid, title, description, and a full-width action.

open demo ↗

lotusui.Card(th, lotusui.CardProps{}, lotusui.VStack(th.Space.MD,
	cover, // media with lotusui.Badge overlaid
	lotusui.LabelCardTitle(th, "Design systems meetup").Layout,
	description,
	lotusui.FullWidth(lotusui.Button(th, &view, "View Event", lotusui.ButtonProps{})),
))

Edge to edge

A muted, scrolling well inside the card — long content (terms, logs) scrolls while the title and the action stay fixed.

open demo ↗

lotusui.Card(th, lotusui.CardProps{}, lotusui.VStack(th.Space.SM,
	lotusui.LabelCardTitle(th, "Terms of Service").Layout,
	func(gtx C) D { return lotusui.Scrollable(th, &scroll, gtx, terms) },
	lotusui.FullWidth(lotusui.Button(th, &accept, "Accept", lotusui.ButtonProps{})),
))

Horizontal

open demo ↗

lotusui.Card(th, lotusui.CardProps{}, lotusui.HStack(th.Space.MD,
	media, textColumn))

API

Option	Type	Description
`Variant`	`CardVariant`	CardOutline (default), CardElevated, CardSubtle.
`Size`	`Size`	Scales content padding via Pad() (Size2XS–Size2XL).
`Pad()`	`unit.Dp`	Content inset for Size — use when budgeting Max.Y around fill/scroll children.
`content`	`layout.Widget`	Layout parameter — arbitrary content; header/body/footer are composition.