Card is a flexible component used to group and display content in a clear and concise format.

Header

Body of the Card Component

rc.card(
    rc.text("Body of the Card Component"),
    header=rc.heading("Header", size="lg"),
    footer=rc.heading("Footer", size="sm"),
)

You can pass a header with header= and/or a footer with footer=.

rc.Card

The parent wrapper that provides context for its children.

PropType | ValuesDefault
align
str
direction
str
justify
str
color_scheme
"none" | "gray" | "red" | ...
size
"sm" | "md" | "lg"
variant
"outline" | "filled" | "elevated" | ...

Event Triggers

See the full list of default event triggers

rc.CardHeader

The wrapper that contains a card's header.

Props

No component specific props

rc.CardBody

The wrapper that houses the card's main content.

Props

No component specific props

rc.CardFooter

The footer that houses the card actions.

Props

No component specific props