Card

Rust UI Icons - ChevronLeftRust UI Icons - ChevronRight

Rust UI component that displays a card with header, content and footer.

card
  • Rust UI Icons - CopyCopy Demo

Card Title

Hello, this is a more detailed description of the card content. You can add more text here to provide additional information about the card's purpose, features, or any other relevant details that might interest the viewer.

use leptos::prelude::*;

use crate::components::ui::button::{Button, ButtonVariant};
use crate::components::ui::card::{Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle};

#[component]
pub fn DemoCard() -> impl IntoView {
    view! {
        <Card class="max-w-lg lg:max-w-2xl">
            <CardHeader>
                <CardTitle>"Card Title"</CardTitle>
            </CardHeader>

            <CardContent>
                <CardDescription>
                    "Hello, this is a more detailed description of the card content. You can add more text here to provide additional information about the card's purpose, features, or any other relevant details that might interest the viewer."
                </CardDescription>
            </CardContent>

            <CardFooter class="justify-end">
                <Button variant=ButtonVariant::Outline>"Cancel"</Button>
                <Button>"Confirm"</Button>
            </CardFooter>
        </Card>
    }
}

Installation

You can run either of the following commands:

# cargo install ui-cli --force
ui add demo_card
ui add card

Update the imports to match your project setup.

Copy and paste the following code into your project:

components/ui/card.rs

use leptos::prelude::*;
use leptos_ui::clx;

mod components {
    use super::*;
    clx! {Card, div, "bg-card text-card-foreground flex flex-col gap-4 rounded-xl border py-6 shadow-sm"}
    // TODO. Change data-slot=card-action by data-name="CardAction".
    clx! {CardHeader, div, "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6"}
    clx! {CardTitle, h3, "leading-none font-semibold"}
    clx! {CardContent, div, "px-6"}
    clx! {CardDescription, p, "text-muted-foreground text-sm"}
    clx! {CardFooter, footer, "flex items-center px-6 [.border-t]:pt-6", "gap-2"}

    clx! {CardAction, div, "col-start-2 row-span-2 row-start-1 self-start justify-self-end"}
}

pub use components::*;

Update the imports to match your project setup.

Usage

use crate::components::ui::card::{
    Card,
    CardContent,
    CardDescription,
    CardFooter,
    CardHeader,
    CardTitle,
};

<Card>
    <CardHeader>
        <CardTitle>"Card Title"</CardTitle>
        <CardDescription>"Card Description"</CardDescription>
    </CardHeader>
    <CardContent>
        <p>"Card Content"</p>
    </CardContent>
    <CardFooter>
        <p>"Card Footer"</p>
    </CardFooter>
</Card>

Examples

Card Group

  • Rust UI Icons - CopyCopy Demo
Rust UI Icons - Cloud
Rust UI Icons - Search
Rust UI Icons - CircleAlert

No Icons Found

You were searching for Icons in Rust/UI but none of them was found. Sorry!

Go Back to Icons Page
use icons::{CircleAlert, Cloud, Search};
use leptos::prelude::*;
use leptos_ui::clx;

use crate::components::ui::button::{Button, ButtonVariant};

#[component]
pub fn DemoCardGroup() -> impl IntoView {
    clx! {IconWrapper, div, "grid place-items-center bg-white rounded-xl ring-1 transition duration-500 group-hover:duration-200 size-12 ring-black/[0.08] group-hover:-translate-y-0.5 shadow-lg"}
    clx! {CardGroup, div, "group", "p-14 w-full text-center rounded-xl border transition duration-500 hover:duration-200 bg-accent hover:bg-secondary"}

    view! {
        <CardGroup class="max-w-[620px]">
            <div class="flex justify-center isolate">
                <IconWrapper class="relative top-1.5 left-2.5 -rotate-6 group-hover:-rotate-12 group-hover:-translate-x-5">
                    <Cloud class="size-4" />
                </IconWrapper>
                <IconWrapper class="z-10">
                    <Search class="size-4" />
                </IconWrapper>
                <IconWrapper class="relative top-1.5 right-2.5 rotate-6 group-hover:rotate-12 group-hover:translate-x-5">
                    <CircleAlert class="size-4" />
                </IconWrapper>
            </div>

            <h2 class="mt-6 text-base font-medium">"No Icons Found"</h2>
            <p class="mx-auto mt-1 text-sm text-muted-foreground max-w-[300px]">
                "You were searching for Icons in Rust/UI but none of them was found. Sorry!"
            </p>

            <Button variant=ButtonVariant::Outline class="mt-4" href="/icons">
                "Go Back to Icons Page"
            </Button>
        </CardGroup>
    }
}
Rust UI Icons - ChevronLeftButtonCarouselRust UI Icons - ChevronRight