Reflex Logo

Intro

Gallery

Hosting

Components

New

Learn

Components

API Reference

Onboarding

UI

Overview

State

Overview

Hosting

Library

/

Layout

/

Card

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,
)

Using Inset Content

API Reference

Card

Container that groups related content and actions.

Basic Card
PropTypeDescriptionValues
as_childbool

Change the default rendered element for the one passed as a child, merging their props and behavior.

sizeLiteral

Card size: "1" - "5"

variantLiteral

Variant of Card: "solid" | "soft" | "outline" | "ghost"

Event Triggers

See the full list of default event triggers
← BoxCenter →

Did you find this useful?

Raise an issue
Edit this page
HomeGalleryChangelogIntroductionHosting

Card

Basic Example

Rendering as a Different Element

Using Inset Content

API Reference

Card