Card

A bordered box with a header, content, and a footer.

Result

card.rs

use hypersig::html::{div, form};
use hypersig::style::Style;
use hypersig::style::pattern::stack;
use hypersig::style::value::{JustifyContent, rem};
use hypersig::{Page, Signals};
use hypersig_ui::{
    ButtonSize, ButtonVariant, Level, TextField, button, card, card_content, card_description,
    card_footer, card_header, card_title, submit_button,
};
use serde::{Deserialize, Serialize};

#[derive(Signals, Serialize, Deserialize)]
pub struct NewProject {
    name: String,
    created: i32,
}

pub fn page() -> Page<NewProject> {
    let created = NewProject::created();
    let initial = NewProject {
        name: String::new(),
        created: 0,
    };
    Page::new(
        "New project",
        initial,
    )
    .child(
        card().css(Style::new().max_width(rem(24))).child(
            form()
                .on_submit(created.set(created + 1).then(NewProject::name().set("")))
                .css(stack(rem(1.5)))
                .child(
                    card_header()
                        .child(card_title(Level::H2).text("Create project"))
                        .child(card_description().text("Deploy a new project in one click.")),
                )
                .child(card_content().child(TextField::new(
                    "Name",
                    NewProject::name(),
                )))
                .child(
                    card_footer()
                        .css(Style::new().justify_content(JustifyContent::SpaceBetween))
                        .child(
                            button(ButtonVariant::Outline, ButtonSize::Default).text("Cancel"),
                        )
                        .child(div().child(
                            submit_button(ButtonVariant::Default, ButtonSize::Default).text(
                                "Create",
                            ),
                        )),
                ),
        ),
    )
}

Accessibility

A card is a <div> and takes no role. Its title is a heading whose level you choose with Level, so that it sits one level below the section around it and a screen reader's list of headings stays in order.

API

Item	Summary
`card`	A `<div>` with a border, a shadow, and `token::card` behind it.
`card_header`	The top of a `card`, holding its title and description.
`card_title`	The title of a `card`, as a heading of `level`.
`card_description`	A line under the title of a `card`, in `token::muted_foreground`.
`card_content`	The body of a `card`.
`card_footer`	The bottom of a `card`, laying its children out in a row.
`Level`	The level of a heading, which follows the headings around it.