ReflexKR

The Component Workshop: Reflex's 100 Library Components

Course overview

Layout

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

Typography

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

Forms

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

Data display

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

Disclosure

Tabs

Accordion

Segmented Control

Overlay

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

Dynamic rendering

Cond

Match

Foreach

Auto Scroll

Media

Image

Audio

Video

Tables and data grids

Table

Data Table

Data Editor

Charts

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

Chart parts

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

Other chart libraries

Plotly

Pyplot

HTML elements

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

Other tools

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

The Component Workshop: Reflex's 100 Library Components

Layout

Card

rx.card

Official docs

Workshop order

On the blog's front page, make a card for each post with its title and summary, and take the reader to the post when they click the card.

rx.card is a container that groups related content into one unit. It is similar to Box, but it has a border, follows the theme's colors and corner roundness, and sets its padding on the Radix scale ("1"–"5") through size. So with less styling than a Box, you get a look that fits the theme.

Basic Card

rx.card("Basic Card")

Try the props

As size grows, the padding and corner roundness grow together. variant changes the feel of the border and background.

Try the props

Post title

A short summary of the post.

title

size

variant

width

rx.card(
    rx.heading("Post title", size="3"),
    rx.text("A short summary of the post.", size="2"),
    size="2",
    variant="surface",
    width="280px",
)

surface has a subtle border, classic adds depth with a shadow, ghost drops the border and keeps only the spacing.

Prop	Values	Default	Use
`size`	`"1"` ~ `"5"`	`"1"`	Padding and corner roundness
`variant`	`"surface"` `"classic"` `"ghost"`	`"surface"`	Feel of the border and background
`as_child`	`True` / `False`	`False`	Render the child element (a link, a button) in the shape of a card instead of the card itself

size accepts rx.breakpoints(...) to vary by screen width. Other sizes and spacing are set with CSS properties, as with Box.

Five sizes

This is the official docs example. With the same text, the card gets roomier as the size grows.

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

Three variants

The official docs body has no example for it, but variant is in the props table. There is the default surface, the more three-dimensional classic, and the borderless ghost. Use ghost when you only want to borrow the card's spacing rules.

surface

classic

ghost

rx.flex(
    rx.card("surface", variant="surface"),
    rx.card("classic", variant="classic"),
    rx.card("ghost", variant="ghost"),
    spacing="4",
    wrap="wrap",
)

Rendering as another element: as_child

With as_child=True, the card itself isn't rendered; instead the child element directly under it is drawn in the shape of a card. If the child is a link, the whole card becomes a clickable link. It is common with links and buttons. Click the card below and the Reflex docs open in a new tab.

Quick Start

Get started with Reflex in 5 minutes.

rx.card(
    rx.link(
        rx.flex(
            rx.avatar(src="https://picsum.photos/id/64/100/100", fallback="RX"),
            rx.box(
                rx.heading("Quick Start", as_="h2", size="3"),
                rx.text("Get started with Reflex in 5 minutes."),
            ),
            spacing="2",
        ),
        href="https://reflex.dev/docs/getting-started/introduction/",
        is_external=True,
    ),
    as_child=True,
)

Edge to edge with Inset

To make an image inside a card fill all the way to the border, wrap it in rx.inset. It pulls the content outward by the amount of padding so it sits flush with the edges. The Inset page covers it in detail.

Fresh strawberries, picked this morning.

rx.card(
    rx.inset(
        rx.image(src="https://picsum.photos/id/1080/600/300", width="100%", height="auto", display="block"),
        side="top",
        pb="current",
    ),
    rx.text("Fresh strawberries, picked this morning."),
    width="260px",
)

Filling the order

Each post gets one card, and as_child=True turns the whole card into a link. The image at the top fills to the edges with rx.inset. The link drops its underline with underline="none".

Glazing basics

How to mix your first glaze.

Kiln care

Keep your kiln clean and safe.

rx.flex(
    rx.card(
        rx.link(
            rx.box(
                rx.inset(
                    rx.image(src="https://picsum.photos/id/1043/600/300", width="100%", height="auto", display="block"),
                    side="top",
                    pb="current",
                ),
                rx.heading("Glazing basics", size="3"),
                rx.text("How to mix your first glaze.", size="2", color="var(--gray-11)"),
            ),
            href="#",
            underline="none",
        ),
        as_child=True,
        width="240px",
    ),
    rx.card(
        rx.link(
            rx.box(
                rx.inset(
                    rx.image(src="https://picsum.photos/id/1060/600/300", width="100%", height="auto", display="block"),
                    side="top",
                    pb="current",
                ),
                rx.heading("Kiln care", size="3"),
                rx.text("Keep your kiln clean and safe.", size="2", color="var(--gray-11)"),
            ),
            href="#",
            underline="none",
        ),
        as_child=True,
        width="240px",
    ),
    spacing="4",
    wrap="wrap",
)

Workshop notes

rx.card is a grouping container with a border and the theme's look.
size "1"–"5" sets padding and roundness; variant surface · classic · ghost sets the feel.
With as_child=True, the child (a link · a button) takes the card's shape, so the whole card is clickable.
To fill an image to the edges, wrap it in rx.inset.

← Previous

Layout · Separator

Layout · Inset

Get news about new lessons

We'll email you when this course gets new lessons or a follow-up course opens.