Card

Card — a surface container with optional header, content, and footer slots.

Public functions

Card

Detailed description

Card renders an opaque or tinted rounded-rectangle backdrop, an optional drop shadow, and up to three stacked content slots (header / content / footer). It is the standard building block for list-item cards, dashboard tiles, onboarding panels, and any widget that needs a visually distinct raised or outlined surface. Chrome (shadow, background, corner radius, padding) is delegated to the active CardStyle so the visual language can be changed per-call (.style(...)) or theme-wide via theme.style_slots.card.

When to use

• CardVariant::Elevated — a dashboard tile or list card that should "float" above the page surface.
• CardVariant::Outlined — a bordered grouping box without shadow.
• CardVariant::Plain — the content sits on the default surface; no visible chrome (useful for spacing only).

Accessibility

Announces as Role::Group. The slots' own accessibility nodes are included in the subtree; the card itself carries no additional AT name.

#![allow(unused)]
fn main() {
use teksilo_widgets::Card;
use teksilo_core::styles::CardVariant;
use teksilo_widgets::primitives::TextWidget;
use teksilo_i18n::lit;
let _card = Card::new()
    .variant(CardVariant::Elevated)
    .content(TextWidget::new(lit!("Hello, card!")));
}

Density

The picture above is the widget at TargetDensity::Compact, the mouse-and-keyboard ladder. Below is the same subject on the same canvas with only the ladder changed, so what moves is the density and nothing else — where the subject no longer fits, that is what the denser targets cost it at that size. See docs/density-and-targets.md.

Touch

API reference

📖 Full rustdoc API for this module

pub struct Card

Import: use teksilo::widgets::Card;

A card container with shadow, background, and optional header/content/footer.

#![allow(unused)]
fn main() {
pub struct Card { /* fields */ }
}

Methods

pub fn new() -> Self

Construct an empty card with no slots and the default CardVariant::Plain.

pub fn header(mut self, widget: impl teksilo_core::IntoTeksiChild) -> Self

Set the header slot (topmost section) to an inline widget.

pub fn content(mut self, widget: impl teksilo_core::IntoTeksiChild) -> Self

Set the main content slot (middle section) to an inline widget.

pub fn footer(mut self, widget: impl teksilo_core::IntoTeksiChild) -> Self

Set the footer slot (bottommost section) to an inline widget.

pub fn shadow(mut self, shadow: Shadow) -> Self

Override the drop shadow. Accepts a Shadow token (see teksilo_tokens::Shadow). The default shadow comes from the active CardStyle for the chosen CardVariant.

pub fn background(mut self, color: impl Into<ColorProp>) -> Self

Override the background. Default (unset) is the variant's default (SurfaceRole::Main for Plain/Outlined/Elevated, SurfaceRole::Raised for Filled). Accepts Color, a role, or Signal<Color>.

pub fn corner_radius(mut self, radius: impl Into<Prop<f32>>) -> Self

Override the corner radius (default: CARD_CORNER_RADIUS in the active CardStyle's recipe — see recipe_card_style.rs). Accepts a static f32 or a reactive Signal<f32>.

pub fn padding(mut self, padding: impl Into<Prop<f32>>) -> Self

Override the padding (default: CARD_PADDING in the active CardStyle's recipe — see recipe_card_style.rs). Accepts a static f32 or a reactive Signal<f32>.

pub fn variant(mut self, variant: CardVariant) -> Self

Pick the design-language variant. Default Plain. The active CardStyle decides what each variant means visually (the IntUI default maps Plain → no shadow + surface_main, Elevated → shadow_md + surface_main, Outlined → border + surface_main, Filled → shadow_md + surface_raised).

pub fn style(mut self, style: impl teksilo_core::styles::CardStyle) -> Self

Per-call style override. Replaces the theme-wide default CardStyle for just this Card instance.