Edit Component

Y Card RS Yew Usage

Adding Card RS to your project is simple:

1. Make sure your project is set up with Yew. Follow their Getting Started Guide for setup instructions.

2. Add the Card RS component to your dependencies by including it in your Cargo.toml file:

   cargo add card-rs --features=yew
   

3. Import the card components into your Yew component and start using them in your app.

🛠️ Usage

Basic Card

use card_rs::yew::{Card, Header, Title, Description, Content, Footer};
use card_rs::Variant;
use yew::prelude::*;

#[function_component(BasicCard)]
pub fn basic_card() -> Html {
    html! {
        <Card variant={Variant::Default} aria_labelledby="basic-title">
            <Header>
                <Title id="basic-title">{"Hello, Card!"}</Title>
                <Description>{"A simple card with header and footer."}</Description>
            </Header>
            <Content>
                <p>{"This is the main content area of the card."}</p>
            </Content>
            <Footer>
                <button>{"Action"}</button>
            </Footer>
        </Card>
    }
}

Variants

use card_rs::yew::{Card, Header, Title, Description, Content};
use card_rs::Variant;
use yew::prelude::*;

#[function_component(CardVariants)]
pub fn card_variants() -> Html {
    html! {
        <>
            <Card variant={Variant::Transparent}>
                <Header>
                    <Title>{"Transparent"}</Title>
                    <Description>{"Minimal prominence."}</Description>
                </Header>
                <Content><p>{"For nested or low-priority cards."}</p></Content>
            </Card>
            <Card variant={Variant::Default}>
                <Header>
                    <Title>{"Default"}</Title>
                    <Description>{"Standard surface."}</Description>
                </Header>
                <Content><p>{"Most common use case."}</p></Content>
            </Card>
            <Card variant={Variant::Secondary}>
                <Header>
                    <Title>{"Secondary"}</Title>
                    <Description>{"Medium prominence."}</Description>
                </Header>
                <Content><p>{"Draw moderate attention."}</p></Content>
            </Card>
            <Card variant={Variant::Tertiary}>
                <Header>
                    <Title>{"Tertiary"}</Title>
                    <Description>{"Higher prominence."}</Description>
                </Header>
                <Content><p>{"For featured content."}</p></Content>
            </Card>
        </>
    }
}

Custom Styles

use card_rs::yew::{Card, Header, Title, Description, Footer};
use card_rs::Variant;
use yew::prelude::*;

#[function_component(StyledCard)]
pub fn styled_card() -> Html {
    html! {
        <Card
            variant={Variant::Default}
            style="border: 2px solid #7c3aed; border-radius: 1rem;"
            aria_labelledby="styled-title"
        >
            <Header>
                <Title id="styled-title" style="color: #7c3aed;">{"Pro Plan"}</Title>
                <Description>{"Unlock advanced features."}</Description>
            </Header>
            <Footer>
                <button>{"Upgrade Now"}</button>
            </Footer>
        </Card>
    }
}

🔧 Props

Card

Header

Title

Description

Content

Footer

💡 Notes

• Title, Description, Content, and Footer can be used without a Header wrapper.
• Set id on Title and pass it to Card’s aria_labelledby for full WCAG compliance.
• The variant prop maps to semantic BEM classes (card--default, etc.) and inline styles. Override either for custom themes.

Usage

CLI Usage

You can import Card RS directly into your project to customize and modify it using the opensass cli:

os add card-rs yew

use card_rs::dioxus::{Card, Header, Title, Description, Content, Footer};
use card_rs::Variant;
use dioxus::prelude::*;

fn BasicCard() -> Element {
    rsx! {
        Card { variant: Variant::Default, aria_labelledby: "basic-title",
            Header {
                Title { id: "basic-title", "Hello, Card!" }
                Description { "A simple card with header and footer." }
            }
            Content { p { "This is the main content area of the card." } }
            Footer { button { "Action" } }
        }
    }
}

use card_rs::dioxus::{Card, Header, Title, Description, Content};
use card_rs::Variant;
use dioxus::prelude::*;

fn CardVariants() -> Element {
    rsx! {
        Card { variant: Variant::Transparent,
            Header {
                Title { "Transparent" }
                Description { "Minimal prominence." }
            }
            Content { p { "For nested or low-priority cards." } }
        }
        Card { variant: Variant::Default,
            Header {
                Title { "Default" }
                Description { "Standard surface." }
            }
            Content { p { "Most common use case." } }
        }
        Card { variant: Variant::Secondary,
            Header {
                Title { "Secondary" }
                Description { "Medium prominence." }
            }
            Content { p { "Draw moderate attention." } }
        }
        Card { variant: Variant::Tertiary,
            Header {
                Title { "Tertiary" }
                Description { "Higher prominence." }
            }
            Content { p { "For featured content." } }
        }
    }
}

use card_rs::dioxus::{Card, Header, Title, Description, Footer};
use card_rs::Variant;
use dioxus::prelude::*;

fn StyledCard() -> Element {
    rsx! {
        Card {
            variant: Variant::Default,
            style: "border: 2px solid #7c3aed; border-radius: 1rem;",
            aria_labelledby: "styled-title",
            Header {
                Title { id: "styled-title", style: "color: #7c3aed;", "Pro Plan" }
                Description { "Unlock advanced features." }
            }
            Footer { button { "Upgrade Now" } }
        }
    }
}

os add card-rs dio

use card_rs::leptos::{Card, Header, Title, Description, Content, Footer};
use card_rs::Variant;
use leptos::prelude::*;

#[component]
pub fn BasicCard() -> impl IntoView {
    view! {
        <Card variant=Variant::Default aria_labelledby="basic-title">
            <Header>
                <Title id="basic-title">"Hello, Card!"</Title>
                <Description>"A simple card with header and footer."</Description>
            </Header>
            <Content>
                <p>"This is the main content area of the card."</p>
            </Content>
            <Footer>
                <button>"Action"</button>
            </Footer>
        </Card>
    }
}

use card_rs::leptos::{Card, Header, Title, Description, Content};
use card_rs::Variant;
use leptos::prelude::*;

#[component]
pub fn CardVariants() -> impl IntoView {
    view! {
        <Card variant=Variant::Transparent>
            <Header>
                <Title>"Transparent"</Title>
                <Description>"Minimal prominence."</Description>
            </Header>
            <Content><p>"For nested or low-priority cards."</p></Content>
        </Card>
        <Card variant=Variant::Default>
            <Header>
                <Title>"Default"</Title>
                <Description>"Standard surface."</Description>
            </Header>
            <Content><p>"Most common use case."</p></Content>
        </Card>
        <Card variant=Variant::Secondary>
            <Header>
                <Title>"Secondary"</Title>
                <Description>"Medium prominence."</Description>
            </Header>
            <Content><p>"Draw moderate attention."</p></Content>
        </Card>
        <Card variant=Variant::Tertiary>
            <Header>
                <Title>"Tertiary"</Title>
                <Description>"Higher prominence."</Description>
            </Header>
            <Content><p>"For featured content."</p></Content>
        </Card>
    }
}

use card_rs::leptos::{Card, Header, Title, Description, Footer};
use card_rs::Variant;
use leptos::prelude::*;

#[component]
pub fn StyledCard() -> impl IntoView {
    view! {
        <Card
            variant=Variant::Default
            style="border: 2px solid #7c3aed; border-radius: 1rem;"
            aria_labelledby="styled-title"
        >
            <Header>
                <Title id="styled-title" style="color: #7c3aed;">"Pro Plan"</Title>
                <Description>"Unlock advanced features."</Description>
            </Header>
            <Footer>
                <button>"Upgrade Now"</button>
            </Footer>
        </Card>
    }
}

os add card-rs lep