Card

Displays a card with header, content, and footer.

Overview

登录卡：header 标题+描述+右上角 Sign Up，content 表单字段，footer 两个全宽按钮。

GPUI · Live previewGPUI WASM

Installation

Card 是单个 Rust 文件（src/card.rs）—— 容器与 section 辅助函数自绘，动作位复用 button.rs。

Cargo.toml

1[dependencies]2gpui-kit = "0.6.6"34# card.rs composes button.rs for actions — both ship in source.zip.

Download runnable example

Terminal

1# Download the runnable example crate, then:2cargo run --locked -- --card34# Other demos:5cargo run --locked -- --card sm6cargo run --locked -- --card spacing7cargo run --locked -- --card image

Usage

Card 是 render-once 容器：按序 .child(..) 堆叠 card_header / card_content / card_footer / card_cover。每个 section 函数接收 spacing（内边距来源）和一个 spec 闭包。

Example.rs

1use justdo_command::card::{Card, card_header, card_content, card_footer, CARD_SPACING};23Card::new().dark(dark)4    .child(card_header(CARD_SPACING, dark, |h| {5        h.title("Card Title")6            .description("Card Description")7            .action(action_button);   // CardAction — top right8    }))9    .child(card_content(CARD_SPACING, dark, |c| {10        c.child(body_content);11    }))12    .child(card_footer(CARD_SPACING, dark, |f| {13        f.child(footer_button);14    }))

网页预览与桌面端运行同一份 Rust / GPUI 组件。

Composition

组合结构对齐 shadcn/ui 的 Card / CardHeader / CardTitle / CardDescription / CardAction / CardContent / CardFooter。

Structure

1Card                    root — flex-col, gap/py = spacing, rounded-xl + border2├── card_cover(el, sp)  edge-to-edge media, mt(-sp) eats top padding3├── card_header         title + description column4│     .action(el)       top-right slot (CardAction)5│     .bordered(true)   border-b + pb — divided header6├── card_content        main body; .bleed() = -mx-spacing edge-to-edge7└── card_footer         action row; .bordered(true) = border-t + pt

Notes

Spacing scale. shadcn 的 --card-spacing 变量在 GPUI 里就是一个 f32：.size(CardSize::Sm) 切到 16px，.spacing(..) 任意覆盖 —— gap、py、section px 同步生效。Edge-to-edge 内容用 mx(-sp)（divider）或整段 .bleed()。

Example.rs

1// --card-spacing equivalent: one number drives gap, py and2// every section's px. CARD_SPACING = 24, CARD_SPACING_SM = 16.3let sp = 20.;4Card::new().spacing(sp)5    .child(card_content(sp, dark, |c| {6        // bleed a hairline through the inset (shadcn's -mx-(--card-spacing))7        c.child(div().h(px(1.)).w_full().mx(px(-sp)).bg(edge));8    }))

Text wrapping. GPUI 文本默认不换行 —— header 的 title/description 已启用 whitespace_normal() 且所在列 flex_1 + min_w_0（CSS 里 flex-1 + min-w-0 的同款约束），长描述在窄卡里正确折行。

RTL. shadcn 的 RTL 示例依赖阿拉伯文字形；Geist 不包含阿拉伯文，本移植不做该演示。

API Reference

容器与 section helper 的 API。

API	Signature	Notes
`Card::new()`	`-> Card`	Render-once root container (384px default width).
`.size(..)`	`CardSize`	Default (24px) \| Sm (16px) spacing scale.
`.spacing(..)`	`f32`	Explicit --card-spacing override.
`.w(..)` / `.dark(..)`	`f32` / `bool`	Card width / theme.
`.child(..)`	`impl IntoElement`	Append section or free content, in order.
`card_header(sp, dark, \|h\|)`	`-> AnyElement`	h.title / .description / .action / .bordered / .child.
`card_content(sp, dark, \|c\|)`	`-> AnyElement`	c.child / .bleed (edge-to-edge).
`card_footer(sp, dark, \|f\|)`	`-> AnyElement`	f.child / .bordered / .column / .justify_end.
`card_cover(el, sp)`	`-> AnyElement`	Top-bleed media child (image, gradient, map).

Source & inspiration

结构与视觉参考 shadcn/ui Card (React Aria) 。本页交互由 Rust / GPUI 绘制，基础样式来自 gpui-kit 。