Floe UI LogoFloe UI
DocsComponentsCard

Card

Layout

A styled container with optional header, content, and footer sections.

Preview

Project Alpha

Deploy your new project in one-click.

Elevated Card

Stronger shadow for floating surfaces.

Variants

Default

Standard card with border and subtle shadow.

Default

Elevated

Stronger shadow for floating panels.

Elevated

Ghost

No border, no shadow, tinted surface.

Ghost

Usage

card.rs
use floe_ui::components::card;
use iced::widget::{text, column};

"text-zinc-500">// Simple card
let c = card::styled(text("Hello!"), &tokens);

"text-zinc-500">// Elevated card
let c2 = card::elevated(text("Elevated card"), &tokens);

"text-zinc-500">// Card with header, content, and footer
let c3 = card::sectioned(
    Some(text("Card Title").size(18).into()),
    text("Card content goes here.").into(),
    Some(text("Footer").size(12).into()),
    &tokens,
);

API Reference

Props / Parameters

NameTypeDescription
contentimpl Into<Element>Card body content
headerOption<Element>Optional header section (sectioned variant)
footerOption<Element>Optional footer section (sectioned variant)
tokens&DesignTokensDesign tokens for theming

Style Functions

default_style(tokens)
elevated_style(tokens)
ghost_style(tokens)

Style functions return closures compatible with Iced's .style() method.

Builder Functions

styled(content, tokens)
elevated(content, tokens)
sectioned(header, content, footer, tokens)

Builder functions return pre-configured Iced widgets ready for use.

Source: floe-ui/src/components/card.rs