Preview

CodeSource

fn view(palette: ComponentPalette) -> Element {
    Card::new(
        Element::column(vec![
            Text::new("Proposed plan", palette).render(),
            Text::new("Three steps", palette).role(TextRole::Small).muted().render(),
        ])
        .gap(6.0),
        palette,
    )
    .render()
}

Examples

Each one is the library drawing it. Press, type and hover.

Card2 / 4

CodeSource

row(vec![
    Card::new(card_copy(cx, "Borderless", "Surface radius"), palette)
        .border(false)
        .radius(RadiusRole::Surface)
        .width(160.0)
        .render(),
    Card::new(card_copy(cx, "Panel radius", "For a large container"), palette)
        .radius(RadiusRole::Panel)
        .width(200.0)
        .render(),
])

Card3 / 4

CodeSource

row(vec![
    Card::new(
        Element::column(vec![
            ListRow::new("blocks-card-flush", "Flush: row to the edge", palette).render(),
            Separator::horizontal(palette).render(),
            card_copy(cx, "No padding", "Content supplies its own").padding(8.0),
        ])
        .clip_children(),
        palette,
    )
    .density(CardDensity::Flush)
    .width(200.0)
    .render(),
])

Card4 / 4

CodeSource

Card::new(
    Element::column(vec![
        card_copy(cx, "Proposed plan", "A card without a width uses the space it receives; the host supplies its content, including actions."),
        row(vec![Button::new("blocks-card-build", "Build", palette)
            .variant(ButtonVariant::Outline)
            .render()]),
    ])
    .gap(10.0),
    palette,
)
.density(CardDensity::Roomy)
.render()
.size(Some(width), None)

Card

A raised surface that sets one group of content into the page. The host builds the content; the card adds the padding, the hairline and the corners.

Import

use limn::{Card, CardDensity, Component, RadiusRole};

Usage

A card takes its content and the palette. It fills with the palette’s raised under a 1 px hairline of its border, and its height follows the content. It is passive: it reports nothing.

fn view(palette: ComponentPalette) -> Element {
    Card::new(
        Element::column(vec![
            Text::new("Proposed plan", palette).render(),
            Text::new("Three steps", palette).role(TextRole::Small).muted().render(),
        ])
        .gap(6.0),
        palette,
    )
    .render()
}

To give a card another fill, pass a palette whose raised is that color.

Density

Card::new(content, palette).density(CardDensity::Roomy).render()

density sets the padding around the content: 8 px for Compact, 10 for Regular, which is the default, and 12 for Roomy. Flush pads nothing, for content whose rows run to the card’s edge and bring their own inset.

Border and radius

Card::new(content, palette)
    .border(false)
    .radius(RadiusRole::Surface)
    .render()

border(false) drops the hairline. radius takes another radius token; RadiusRole::Card is the default.

Width

Card::new(content, palette).width(200.0).render()

width fixes the width in logical pixels. Without it the card fills the width it is given. A negative or non-finite value is ignored.

API reference

The guide covers composition, options and actions. Generate the complete Rust type and builder reference from the checkout:

cargo doc -p limn --open

Component API overview · State and actions