Struct CardProps 

pub struct CardProps {
    pub header: Option<Element>,
    pub body: Option<Element>,
    pub footer: Option<Element>,
    pub class: String,
    pub header_class: String,
    pub body_class: String,
    pub footer_class: String,
    pub children: Element,
    /* private fields */
}

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

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>

// 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" } }
    // 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.

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.

footer_class: String

Additional CSS classes for the card-footer div.

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), .class(...)(optional), .header_class(...)(optional), .body_class(...)(optional), .footer_class(...)(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

Tests for self and other values to be equal, and is used by ==.

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

Tests for !=. The default implementation is almost always sufficient, and should not be overridden without very good reason.

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