Card

Card is a container for grouping related content.

When To Use It

Use card views to group related information and actions into clear, reusable panels such as summaries, status blocks, or settings modules.

Constructing a Card

use vizia::prelude::*;

Card::new(cx, |cx| {
    CardHeader::new(cx, |cx| Label::new(cx, "Project status"));

    CardContent::new(cx, |cx| {
        Label::new(cx, "All systems operational");
    });

    CardFooter::new(cx, |cx| {
        Button::new(cx, |cx| Label::new(cx, "Dismiss"));
    });
});

Card APIs

Components and Styling

Accessibility

• Use heading-like text in CardHeader for better scanning.
• Keep actionable controls in CardFooter keyboard reachable and clearly labeled.