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

Inset

rx.inset

Official docs

Workshop order

At the top of the product card, put a photo that fills the card all the way to its edges.

rx.inset gives its content a negative margin, so the content spreads past the surrounding container's padding all the way to its edges. Inside a Card, an image fills the card from border to border. Use it when content needs to sit flush with an edge, such as a photo at the top of a card or a map at the bottom.

A river between the hills, seen from above.

rx.card(
    rx.inset(
        rx.image(
            src="https://picsum.photos/id/1015/600/300",
            alt="River",
            width="100%",
            height="auto",
            display="block",
        ),
        side="top",
        pb="current",
    ),
    rx.text("A river between the hills, seen from above."),
    width="280px",
)

Try the props

Put a single image in a card and change side. side picks the edge the content sits against. With top, the top and both sides spread out; with left, the left and top and bottom do, and only the opposite side (bottom, right) keeps the card's padding. x spreads only left and right, y only top and bottom. The larger the card's size, the more padding it has, so the difference is easier to see.

side is the edge to spread toward, clip is the boundary to clip at. On a classic card, changing clip decides whether the content covers the border.

Prop	Values	Default	Use
`side`	`"top"` `"bottom"` `"left"` `"right"` `"x"` `"y"`	all four sides	The edge the content sits against. top is the top and both sides, x is left and right only, y is top and bottom only
`clip`	`"border-box"` `"padding-box"`	`"border-box"`	Whether to fill out to the outer edge of the border or only to the inside of the border
`p` `px` `py` `pt` `pr` `pb` `pl`	`"current"` `"0"`	none	Padding inside the Inset. current matches the parent's padding

Every prop accepts rx.breakpoints(...) to vary by screen width. Radix Themes also accepts side="all", but the installed 0.10 raises an error if you pass "all". To spread on all four sides, just leave side out.

Toward the bottom: side="bottom"

side="bottom" spreads the bottom and both sides. When pinning to one edge, it's a good idea to set the opposite padding to "current". That way the side that doesn't reach the edge stays the usual card padding away. Below, the image comes after the text and spreads toward the bottom, with pt="current" on top.

The inset below uses a bottom side.

rx.card(
    rx.text("The inset below uses a bottom side."),
    rx.inset(
        rx.image(
            src="https://picsum.photos/id/1015/600/300",
            alt="River",
            width="100%",
            height="auto",
            display="block",
        ),
        side="bottom",
        pt="current",
    ),
    width="280px",
)

Toward the left or right

side="right" or "left" is for putting content and an image side by side. For that, lay out the inside of the card as a Flex with direction="row". On the image, set the padding on the opposite side (pl or pr) to "current".

This inset uses a right side.

This inset uses a left side.

rx.flex(
    rx.card(
        rx.flex(
            rx.text("This inset uses a right side."),
            rx.inset(
                rx.box(background="center/cover url('https://picsum.photos/id/1015/300/300')", height="100%"),
                width="100%",
                side="right",
                pl="current",
            ),
            direction="row",
            width="100%",
        ),
        width="260px",
    ),
    rx.card(
        rx.flex(
            rx.inset(
                rx.box(background="center/cover url('https://picsum.photos/id/1015/300/300')", height="100%"),
                width="100%",
                side="left",
                pr="current",
            ),
            rx.text("This inset uses a left side."),
            direction="row",
            width="100%",
        ),
        width="260px",
    ),
    spacing="4",
    wrap="wrap",
)

What current padding is for

Put text right below an Inset that spreads to the top, and by default the text sits tight against the image. With pb="current", a gap the size of the card's padding opens up between them. There are two values: "current" and "0".

No pb: text touches the box.

pb=current: same gap as the card padding.

rx.flex(
    rx.card(
        rx.inset(rx.box(height="60px", background_color="var(--accent-5)"), side="top"),
        rx.text("No pb: text touches the box."),
        width="200px",
    ),
    rx.card(
        rx.inset(rx.box(height="60px", background_color="var(--accent-5)"), side="top", pb="current"),
        rx.text("pb=current: same gap as the card padding."),
        width="200px",
    ),
    spacing="4",
    wrap="wrap",
)

Filling the order

The photo spreads to the top edge, and pb="current" puts a comfortable gap between it and the product name. The rest of the content stays inside the card's padding as usual.

Blue mug

$18

rx.card(
    rx.inset(
        rx.image(src="https://picsum.photos/id/30/600/400", alt="Mug", width="100%", height="auto", display="block"),
        side="top",
        pb="current",
    ),
    rx.heading("Blue mug", size="3"),
    rx.text("$18", color="var(--gray-11)", margin_bottom="8px"),
    rx.button("Add to cart", width="100%"),
    width="240px",
)

Workshop notes

rx.inset uses a negative margin to spread content to the edges of its parent (usually a Card).
side is the edge to sit against: top (top + both sides) · bottom · left · right · x (left and right) · y (top and bottom). Leave it out for all four sides ("all" raises an error in 0.10).
When spreading on one side only, set the opposite padding (pb · pt · pl · pr) to "current" to keep the card's padding.
left · right need the inside of the card laid out as a direction="row" Flex.
clip is border-box (out to the border) · padding-box (inside the border).

← Previous

Layout · Card

Layout · Aspect Ratio

Get news about new lessons

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