Card

Data display

Takes a block

Card surface with optional header, body and footer sections.

Card(surface: …) { … }

Example

Card.elevated { Card.Header { Heading("Pro").h3 } Card.Body { Text("Everything in Free, and more.") } Card.Footer { Button("Choose Pro").primary } }

Renders with the class wf-card, stable across releases, so a stylesheet may target it.

Props of Card
Prop Type Meaning
surface: .flat .elevated .outlined

Surface treatment

Attribute families: global, aria, data. Plus the universal props on every element: animate:, exit:, speed:, class:, ref:.