Card

A bordered, rounded container for grouping related content. Composed of Card, CardHeader, CardContent, and CardFooter.

When to use

• Grouping a title, body, and actions into a single visual unit.
• Building dashboards, settings panels, and detail views.

API

Card::new()

A bordered, rounded container. Add children with .child(...).

Method	Type	Description
.child(child)	impl IntoElement	Append a child element

CardHeader::new(child)

The header region — semibold ZINC_900 text with a bottom border.

CardContent::new(child)

The body region — text_sm ZINC_600 text.

CardFooter::new(child)

The footer region — text_sm ZINC_600 text with a top border.

Usage

use gpui::{Component, div, prelude::*};
use components::{Card, CardContent, CardFooter, CardHeader};

div().child(Component::new(
    Card::new()
        .child(Component::new(CardHeader::new("Title")))
        .child(Component::new(CardContent::new("Body text")))
        .child(Component::new(CardFooter::new("Footer"))),
))

Copy the source

crates/components/src/card.rs — self-contained, stateless, and free to modify.