Struct CardProps 

pub struct CardProps {

    pub header: Option<Element>,
    pub body: Option<Element>,
    pub footer: Option<Element>,
    pub href: Option<String>,
    pub target: Option<String>,
    pub class: String,
    pub header_class: String,
    pub body_class: String,
    pub body_id: Option<String>,
    pub body_style: Option<String>,
    pub footer_class: String,
    pub onclick: Option<EventHandler<MouseEvent>>,
    pub oncontextmenu: Option<EventHandler<MouseEvent>>,
    pub children: Element,
    /* private fields */
}

Bootstrap Card component with optional header, body, and footer slots.

Renders a <div class="card"> by default. When href is set, renders an <a class="card" href=...> instead, so the whole card is a single link — the standard Bootstrap clickable-card pattern. target applies only in that mode. This mirrors Button (button.btn / a.btn) and DropdownItem, which switch the same way; both render paths carry identical classes via card_class.

Bootstrap HTML → Dioxus

<!-- Bootstrap HTML -->
<div class="card">
  <div class="card-header">Title</div>
  <div class="card-body"><p>Content</p></div>
  <div class="card-footer">Footer</div>
</div>
<!-- Clickable card (the whole card is a link) -->
<a class="card text-decoration-none text-reset" href="/page">
  <div class="card-body"><h5>Title</h5><p>Text</p></div>
</a>

// Dioxus equivalent
rsx! {
    Card {
        header: rsx! { "Card Title" },
        body: rsx! { p { "Card content goes here." } },
        footer: rsx! { "Last updated 3 mins ago" },
    }
    // Body-only card
    Card { body: rsx! { "Simple card" } }
    // Clickable card — the whole card is a link
    Card {
        href: "/page",
        class: "text-decoration-none text-reset",
        body: rsx! { h5 { "Title" } p { "Text" } },
    }
    // Card with custom header styling (e.g., flex layout with action buttons)
    Card {
        class: "mb-3",
        header_class: "d-flex justify-content-between align-items-center py-2",
        body_class: "py-2",
        header: rsx! {
            span { class: "small", "Server" }
            button { class: "btn btn-sm btn-outline-secondary py-0 px-1",
                i { class: "bi bi-arrow-clockwise small" }
            }
        },
        body: rsx! { p { "Stats here" } },
    }
    // Custom layout (children go inside card, outside body)
    Card { class: "text-center",
        img { class: "card-img-top", src: "/photo.jpg" }
        div { class: "card-body", h5 { "Title" } p { "Text" } }
    }
}

Fields

header: Option<Element>

Card header content.

body: Option<Element>

Card body content.

footer: Option<Element>

Card footer content.

href: Option<String>

When set, render an <a class="card" href=...> anchor instead of a <div class="card">, so the whole card is a link.

target: Option<String>

Anchor target (e.g. "_blank" to open in a new tab). Only applies when href is set.

class: String

Additional CSS classes for the card container.

header_class: String

Additional CSS classes for the card-header div.

body_class: String

Additional CSS classes for the card body.

body_id: Option<String>

id for the card-body div. A scroll container or a scrollspy target needs to be addressable, and the body is the element that scrolls — the alternative, hand-writing div { class: "card-body" } in children, is the raw Bootstrap this component exists to replace.

body_style: Option<String>

Inline style for the card-body div — the inline-style sibling of body_class, for the case where the value is computed rather than named (a max-height a class cannot express). Without it the panel grows unbounded instead of scrolling, which is a visible failure rather than a dropped attribute.

footer_class: String

Additional CSS classes for the card-footer div.

onclick: Option<EventHandler<MouseEvent>>

Click handler for the whole card. A selectable card is a Bootstrap pattern (the docs’ clickable card examples); without a handler the only way to get one is the href form, which navigates.

oncontextmenu: Option<EventHandler<MouseEvent>>

Right-click / context-menu handler, for a per-card menu.

children: Element

Child elements (rendered inside card, outside body — for custom layouts).

Implementations

impl CardProps

pub fn builder() -> CardPropsBuilder<((), (), (), (), (), (), (), (), (), (), (), (), (), (), ())>

Create a builder for building CardProps. On the builder, call .header(...)(optional), .body(...)(optional), .footer(...)(optional), .href(...)(optional), .target(...)(optional), .class(...)(optional), .header_class(...)(optional), .body_class(...)(optional), .body_id(...)(optional), .body_style(...)(optional), .footer_class(...)(optional), .onclick(...)(optional), .oncontextmenu(...)(optional), .attributes(...)(optional), .children(...)(optional) to set the values of the fields. Finally, call .build() to create the instance of CardProps.

Trait Implementations

impl Clone for CardProps

fn clone(&self) -> CardProps

Returns a duplicate of the value.

fn clone_from(&mut self, source: &Self)

Performs copy-assignment from source.

impl PartialEq for CardProps

fn eq(&self, other: &CardProps) -> bool

Equality operator ==.

fn ne(&self, other: &Rhs) -> bool

Inequality operator !=.

impl Properties for CardProps

where Self: Clone,

type Builder = CardPropsBuilder<((), (), (), (), (), (), (), (), (), (), (), (), (), (), ())>

The type of the builder for this component. Used to create “in-progress” versions of the props.

fn builder() -> Self::Builder

Create a builder for this component.

fn memoize(&mut self, new: &Self) -> bool

Make the old props equal to the new props. Return if the props were equal and should be memoized.

fn into_vcomponent<M>( self, render_fn: impl ComponentFunction<Self, M>, ) -> VComponent

where M: 'static,

Create a component from the props.

impl StructuralPartialEq for CardProps