Docs

Blog

Gallery

Resources

Learn

Components

API Reference

Onboarding

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

No component specific event triggers

The wrapper that contains a card's header.

Props

No component specific props

Event Triggers

No component specific event triggers

The wrapper that houses the card's main content.

Props

No component specific props

Event Triggers

No component specific event triggers

The footer that houses the card actions.

Props

No component specific props

Event Triggers

No component specific event triggers

Did you find this useful?

HomeGalleryChangelogIntroductionHosting