Card

A Card component is used for grouping related components. It is similar to the Box, except it has a border, uses the theme colors and border radius, and provides a size prop to control spacing and margin according to the Radix "1" - "5" scale.

The Card requires less styling than a Box to achieve consistent visual results when used with themes.

Basic Example

Card 1

Card 2

Card 3

Card 4

Card 5

rx.flex(
    rx.card("Card 1", size="1"),
    rx.card("Card 2", size="2"),
    rx.card("Card 3", size="3"),
    rx.card("Card 4", size="4"),
    rx.card("Card 5", size="5"),
    spacing="2",
    align_items="flex-start",
    flex_wrap="wrap",
)

Rendering as a Different Element

The as_child prop may be used to render the Card as a different element. Link and Button are commonly used to make a Card clickable.

Quick Start

Get started with Reflex in 5 minutes.

rx.card(
    rx.link(
        rx.flex(
            rx.avatar(src="/reflex_banner.png"),
            rx.box(
                rx.heading("Quick Start"),
                rx.text(
                    "Get started with Reflex in 5 minutes."
                ),
            ),
            spacing="2",
        ),
    ),
    as_child=True,
)