Reflex Logo

Intro

Gallery

Hosting

Learn

Components

Recipes

API Reference

Onboarding
Hosting

Library

/

Chakra

/

Layout

/

Card

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

Header

Body of the Card Component

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

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

The parent wrapper that provides context for its children.

PropTypeDescriptionValues
alignstr

[required] The flex alignment of the card

directionstr

[required] The flex direction of the card

justifystr

[required] The flex distribution of the card

color_schemeLiteral

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"

sizeLiteral

The size of the Card options: "sm" | "md" | "lg" default: "md"

variantLiteral

The variant of the Card options: "elevated" | "outline" | "filled" | "unstyled" default: "elevated"

Event Triggers

See the full list of default event triggers

The wrapper that contains a card's header.

Props

No component specific props

The wrapper that houses the card's main content.

Props

No component specific props

The footer that houses the card actions.

Props

No component specific props

Did you find this useful?

HomeGalleryChangelogIntroductionHosting