Quill docs
Card
A surface container for grouped content. Its axes are the surface effect (flat, glass, gradient, elevated), corner radius, tone, and motion. Use lift or 3D tilt for hero/product cards; keep dense grids static.
Preview#
The surface effect, corner radius, tone, and motion — orthogonal treatments you compose.
A surface container.
A surface container.
A surface container.
A surface container.
A surface container.
A surface container.
A surface container.
A surface container.
A surface container.
A surface container.
A surface container.
Design-system motion, not page CSS.
Design-system motion, not page CSS.
Playground#
Change the controls — the preview and the snippet update live.
A surface container.
A surface container.
A surface container.
A surface container.
A surface container.
A surface container.
A surface container.
A surface container.
A surface container.
A surface container.
A surface container.
A surface container.
A surface container.
A surface container.
A surface container.
A surface container.
A surface container.
A surface container.
A surface container.
A surface container.
A surface container.
A surface container.
A surface container.
A surface container.
A surface container.
A surface container.
A surface container.
A surface container.
A surface container.
A surface container.
A surface container.
A surface container.
A surface container.
A surface container.
A surface container.
A surface container.
A surface container.
A surface container.
A surface container.
A surface container.
A surface container.
A surface container.
A surface container.
A surface container.
A surface container.
A surface container.
A surface container.
A surface container.
Card::new("card")
.header(/* ... */)
.body(/* ... */)
.effect(Effect::Elevated)
.radius(Radius::Lg)
.tone(Tone::Neutral)
.render()Theme it#
Flip the component axes for this preview alone — the controls re-point scoped design tokens on the demo stage and the component itself restyles. Variant controls swap the component class, surface controls change the visual treatment, and motion controls change the interaction feel without leaking to the page.
A surface container.
// This demo is scoped: these axes apply only to this preview.
el("div")
.attr("data-q-size", "cozy")
.attr("data-q-radius", "rounded")
.attr("data-q-surface", "flat")
.attr("data-q-motion", "smooth")
.child(
Card::new("summary")
.header(el("div").child(text("Card")))
.body(el("p").child(text("A surface container.")))
.effect(Effect::Elevated)
.radius(Radius::Lg)
.tone(Tone::Neutral)
.motion(Motion::Tilt3d)
.render()
)Code#
Construct the component with its builder:
Card::new("summary")
.header(el("div").child(text("Card")))
.body(el("p").child(text("A surface container.")))
.effect(Effect::Elevated)
.radius(Radius::Lg)
.tone(Tone::Neutral)
.motion(Motion::Tilt3d)
.render()