HeroGPUI

Layout

Card

Group related content and actions on a surface.

Rust
1use herogpui::components::card::{Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle};

Usage

Rust
1use herogpui::prelude::{ActiveTheme, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Link, icons};
2use gpui::prelude::*;
3use gpui::px;
4
5Card::new()
6    .w(px(400.))
7    .child(
8        gpui::svg()
9            .size(px(24.))
10            .path(icons::KEY)
11            .text_color(cx.colors().accent.color),
12    )
13    .child(
14        CardHeader::new()
15            .child(CardTitle::new().child("Become an Acme Creator!"))
16            .child(CardDescription::new().child(CARD_USAGE_DESCRIPTION),),
17    )
18    .child(
19        CardFooter::new().child(
20            Link::new("card-usage-link")
21                .label("Creator Hub")
22                .href("https://heroui.com")
23                .icon(
24                    gpui::svg()
25                        .size(px(12.))
26                        .path(icons::EXTERNAL_LINK)
27                        .text_color(cx.colors().link),
28                ),
29        ),
30    )

Live HeroGPUI compiled to WebAssembly. Select any example without loading another WASM instance.

Anatomy

Rust types

CardCardHeaderCardTitleCardDescriptionCardContentCardFooter

Card is assembled from these builders. The API reference lists each one.

Customization

Appearance builders and theme tokens Card uses.

Styling

Card styling
StyleDescription
flex + flex_col + gap(px(12.)) + p(px(16.)) + container_radius + surface_shadowPadded column root: 12px part gap, 16px padding, the capped container radius, no clipping, and the surface shadow carried by every non-transparent variant.
CardHeader flex + flex_colThe header stacks its parts and carries nothing else; the title's text style belongs to Card.Title and the description's to Card.Description.
CardTitle text_size(px(14.)) + line_height(px(24.)) + FontWeight::MEDIUM + colors.foregroundTitle typography.
CardDescription text_size(px(14.)) + line_height(px(20.)) + colors.mutedMuted description typography.
CardContent flex + flex_col + gap(px(4.))Content column at a four-pixel gap; the upstream flex-1 is dropped (tests/card_deep.rs pins the card as an auto-height column hugging its parts, which flex-1 regresses).
CardFooter flex + items_centerFooter row with centered items and no chrome of its own.
CardVariant::Transparent => el (no bg, no border, no shadow)The transparent variant paints nothing: no border, no background, no shadow. GPUI's default div is already transparent, so the variant branch adds nothing and the shadow is gated on the variant.
CardVariant::Default => colors.surface.backgroundStandard card fill.
CardVariant::Secondary => colors.surface_secondaryMedium-prominence fill.
CardVariant::Tertiary => colors.surface_tertiaryHigher-prominence fill.

API reference

Builders

Card builders
BuilderTypeDefaultDescription
variant(CardVariant)CardVariantCardVariant::DefaultSemantic variant indicating prominence level. Transparent paints nothing — no border, no background, no shadow, the full content box — while every other level fills and carries the surface shadow.
ParentElement::extendAnyElement—Card content; the parts compose through ParentElement::extend and the root wraps them in the padded column with the capped container radius.

Parts

Card parts
PartDescription
CardComposition root and data-slot owner; the padded column at a 12px part gap with the capped container radius. `overflow-visible` upstream, so adds no clipping; the variant chooses the fill and whether the surface shadow applies.
CardHeaderHeader section container; a plain flex column, with no text style of its own.
CardTitleTitle part: 14px medium text on the foreground colour, 24px leading. Renders an h3; renders the same typography on a plain div.
CardDescriptionMuted description part: 14px text at 20px leading. Renders a p; renders the same typography on a plain div.
CardContentContent column at a four-pixel gap. The upstream flex-1 is dropped: the pinned-geometry test in tests/card_deep.rs measures the card as an auto-height column hugging its parts, which flex-1 regresses.
CardFooterFooter row with centered items; the card's gap separates it from the other parts and the caller composes the row's contents.
SeparatorSurfaceToolbar