Component Card

Card

A padded container card.

This is a convenience primitive for the common "rounded + border + shadow + padding" shell.

Example

use gpui::{px, Edges};
use yororen_ui::component::{card, label};

let base = card().child(label("Default card"));

let glass = card()
    .glass(0.75)
    .child(label("Translucent card (glass)"));

let custom_padding = card()
    .padding_all(px(24.).into())
    .child(label("Padding: 24px"));

let asymmetric = card()
    .padding(Edges {
        top: px(8.).into(),
        right: px(16.).into(),
        bottom: px(12.).into(),
        left: px(16.).into(),
    })
    .child(label("Asymmetric padding"));

When to use

• As a section container inside a page.
• As a visual group for forms / settings blocks.
• As a background shell for small panels.

API

• card(): constructor (uses caller location to generate a default id)
• id(...) / key(...): stable identity override
• bg(Hsla) / border(Hsla): override fill/border colors
• glass(alpha: f32): translucent background derived from theme
• padding_all(DefiniteLength) / padding(Edges<DefiniteLength>): configure padding

Notes

• For a "glass" look, prefer using a translucent background fill (alpha) rather than applying .opacity(...) to the whole container (which would also fade text and children).
• If you test translucency on a flat, uniform background, it may be hard to notice. Use a patterned / high-contrast backdrop (stripes, image, gradients) in a demo to make alpha obvious.
• "Frosted" blur is controlled by the window background appearance in GPUI (for example WindowBackgroundAppearance::Blurred on macOS, MicaBackdrop on Windows 11).