Card
Rust UI component that displays a card with header, content and footer.
card
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; 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> <Button>"Click me"</Button> </CardFooter> </Card> } }
Installation
You can run either of the following commands:
# cargo install ui-cli --forceui add demo_cardui 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, "rounded-lg border bg-card shadow", "p-4 w-full"} clx! {CardHeader, div, "flex flex-col space-y-1.5"} clx! {CardTitle, h3, "text-2xl font-semibold leading-none tracking-tight"} clx! {CardContent, div, "pt-4"} clx! {CardDescription, p, "text-sm", "text-muted-foreground"} clx! {CardFooter, footer, "mt-4", "flex items-center justify-end"} } pub use components::*;
Update the imports to match your project setup.
Usage
// Coming soon 🦀