Reflex | Card

✨ Announcing our seed funding led by Lux Capital! Read more about it on our blog ✨

Docs Blog Changelog

Search documentation...

Star

12k+

[ Learn ]

Getting Started

Tutorial

[ Concepts ]

[ Reference ]

Card

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

Body of the Card Component

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

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

Card

The parent wrapper that provides context for its children.

Props

Prop	Type	Description
`align`	str	[required] The flex alignment of the card
`direction`	str	[required] The flex direction of the card
`justify`	str	[required] The flex distribution of the card
`color_scheme`	str	The visual color appearance of the component. options: "whiteAlpha" \| "blackAlpha" \| "gray" \| "red" \| "orange" \| "yellow" \| "green" \| "teal" \| "blue" \| "cyan" \| "purple" \| "pink" \| "linkedin" \| "facebook" \| "messenger" \| "whatsapp" \| "twitter" \| "telegram" default: "gray"
`size`	str	The size of the Card options: "sm" \| "md" \| "lg" default: "md"
`variant`	str	The variant of the Card options: "elevated" \| "outline" \| "filled" \| "unstyled" default: "elevated"

Base Event Triggers

CardHeader

The wrapper that contains a card's header.

No props for CardHeader.

Base Event Triggers

CardBody

The wrapper that houses the card's main content.

No props for CardBody.

Base Event Triggers

CardFooter

The footer that houses the card actions.

No props for CardFooter.

Base Event Triggers

← ResponsiveGrid Spacer →

.css-1ibpn7w{color:#DACEEE;}[ Learn ]

[ Concepts ]

[ Reference ]

Card

Header

Footer

Card

Props

Base Event Triggers

CardHeader

No props for CardHeader.

Base Event Triggers

CardBody

No props for CardBody.

Base Event Triggers

CardFooter

No props for CardFooter.

Base Event Triggers

[ Learn ]