If there is one layout component that has been re-implemented more times than the , it's the Card. Think about it. Every widget, every dashboard panel, every pricing tier, every shiny glowing glassmorphism element you've ever seen is, deep down, a card.
Instead of writing div class="p-6 border rounded-xl shadow-lg bg-white" for the 5000th time, we decided to solve cards natively for WASM.
Card RS is an extremely customizable, production-ready, accessible Card component for Yew, Dioxus, and Leptos. We've extracted all the tedious BEM boilerplate, flexbox wrangling, and ARIA attributes out of your templates, giving you a clean, composable API for building solid UI surfaces.
Cards shouldn't be monoliths. If you just need a surface, works perfectly alone. If you need standard anatomical parts, stick , , , and in there.
The problem with most UI library cards is that they force you into a specific layout. Card RS doesn't mandate structure; it provides logical boundaries.
The parent wrapper. It renders a clean HTML5 (or whatever ARIA role you need) with our default elevated styling.
The header stacks title and description with precise spacing. The footer handles your action bars. Everything just snaps into place like LEGOs.
Not all cards are created equal. You need visual hierarchy. We provide a Variant matrix that affects the surface depth and contrast without rewriting class strings.
Building an interactive pricing selector? Wrap your iterations in a and your hierarchy logic is done.
Like everything we build, Card RS provides identical API surfaces and behavioral guarantees across all three rusty frontends:
| Feature | Yew | Dioxus | Leptos | | ------------------------------- | --- | ------ | ------ | | Card | ✅ | ✅ | ✅ | | Header | ✅ | ✅ | ✅ | | Title & Description | ✅ | ✅ | ✅ | | Content & Footer | ✅ | ✅ | ✅ | | Variant Matrix | ✅ | ✅ | ✅ | | Accessible ARIA bindings | ✅ | ✅ | ✅ | | Role overrides | ✅ | ✅ | ✅ |
If you know how to build a card in Leptos, you can build a card in Dioxus. The props are the same. The BEM classes are the same. The logic is identical.
Accessible surfaces are often completely ignored by developers until an audit fails. Card RS is designed strictly around WCAG guidelines. Card renders with role="article" by default. We enforce aria_labelledby to tie structural landmarks to the Title ID. If you want a non-interactive surface, just override it with role="note" or role="region".
With one prop, screen readers will now announce "Region: Special Offer!" properly.
We aren't trapping you in our aesthetic. Want a weird horizontally-aligned flex-row card with a gradient background? Just use the style prop. Card RS accepts your CSS strings eagerly.
The web is made of cards. Taking the time to unify how we create, structure, and render them across Wasm frameworks means we can stop fighting with padding and flexbox alignment, and get back to building real features.
We're working tirelessly on making Rust web development extremely easy for everyone.