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

Typography

Heading

rx.heading

Official docs

Workshop order

For the shop's seasonal collection page, add one large page title and, below it, two category headings of the same size.

rx.heading is the title of a page or section. It takes the same text props as rx.text (size, weight, align, trim, color), but it is bold and large by default, and as_ sets the heading level, h1 to h6. Heading levels form the document's outline, so think about them separately from the look.

The quick brown fox jumps over the lazy dog.

rx.heading("The quick brown fox jumps over the lazy dog.", as_="h2")

Try the props

Changing as_ leaves the screen as it is; only size changes the size. Change each one on its own and compare.

Try the props

Spring Collection

label

as_

size

weight

align

trim

color

high_contrast

rx.heading("Spring Collection", as_="h2", size="6", weight="bold", align="left", trim="normal", color_scheme="gray", high_contrast=False)

as_ sets the document structure (h1 to h6), size sets the visible size. The two props do not affect each other.

Prop	Values	Default	Use
`as_`	`"h1"` ~ `"h6"`	`"h1"`	Heading level (document structure). The look stays the same
`size`	`"1"` ~ `"9"`	`"6"`	Visible size, line height and letter spacing
`weight`	`"light"` `"regular"` `"medium"` `"bold"`	`"bold"`	Font weight
`align`	`"left"` `"center"` `"right"`	inherited	Alignment
`trim`	`"normal"` `"start"` `"end"` `"both"`	`"normal"`	Trims the line-height space above and below
`color_scheme`	Radix color name	theme color	Text color
`high_contrast`	`True` / `False`	`False`	Stronger contrast against the background
`as_child`	`True` / `False`	`False`	Applies only the heading styles to the child element

The only events are the standard ones such as on_click.

as_ is structure, size is looks

The first three lines are h2, h3 and h4, different levels, yet the same size, because as_ only changes the meaning. As in the last three lines, shrink size yourself as the level gets deeper so structure and looks match. A page usually has only one h1.

Level 2

Level 3

Level 4

Page title

Section

Subsection

rx.flex(
    rx.heading("Level 2", as_="h2"),
    rx.heading("Level 3", as_="h3"),
    rx.heading("Level 4", as_="h4"),
    rx.separator(),
    rx.heading("Page title", as_="h1", size="8"),
    rx.heading("Section", as_="h2", size="6"),
    rx.heading("Subsection", as_="h3", size="4"),
    direction="column",
    spacing="3",
)

Size, weight and alignment

size runs from "1" to "9". The larger the text, the tighter the relative line height and letter spacing, so even big headings do not look loose.

Size 1

Size 3

Size 5

Size 7

Size 9

rx.flex(
    rx.heading("Size 1", size="1"),
    rx.heading("Size 3", size="3"),
    rx.heading("Size 5", size="5"),
    rx.heading("Size 7", size="7"),
    rx.heading("Size 9", size="9"),
    direction="column",
    spacing="3",
)

Light

Regular

Medium

Bold

Left-aligned

Center-aligned

Right-aligned

rx.flex(
    rx.heading("Light", as_="h2", weight="light"),
    rx.heading("Regular", as_="h2", weight="regular"),
    rx.heading("Medium", as_="h2", weight="medium"),
    rx.heading("Bold", as_="h2", weight="bold"),
    rx.separator(),
    rx.heading("Left-aligned", as_="h2", align="left"),
    rx.heading("Center-aligned", as_="h2", align="center"),
    rx.heading("Right-aligned", as_="h2", align="right"),
    direction="column",
    spacing="3",
    width="100%",
)

trim: evening out the space above a heading

Headings are large, so their line-height space is large too. Cut the top space with trim="start" and the inner padding at the top of a card or box looks the same as at the sides. "both" trims top and bottom.

Without Trim

With Trim

With trim

The heading now sits as close to the top edge as the text does to the sides.

rx.flex(
    rx.heading(
        "Without Trim",
        as_="h2",
        trim="normal",
        style={"background": "var(--gray-a2)", "border_top": "1px dashed var(--gray-a7)", "border_bottom": "1px dashed var(--gray-a7)"},
    ),
    rx.heading(
        "With Trim",
        as_="h2",
        trim="both",
        style={"background": "var(--gray-a2)", "border_top": "1px dashed var(--gray-a7)", "border_bottom": "1px dashed var(--gray-a7)"},
    ),
    rx.box(
        rx.heading("With trim", as_="h3", size="3", margin_bottom="4px", trim="start"),
        rx.text("The heading now sits as close to the top edge as the text does to the sides."),
        padding="16px",
        style={"background": "var(--gray-a2)", "border": "1px dashed var(--gray-a7)"},
    ),
    direction="column",
    spacing="3",
)

Color and contrast

Use color_scheme for a color other than the theme's, and high_contrast=True for a darker shade of the same color. The left column is the default, the right column is high contrast.

Indigo

Cyan

Crimson

rx.grid(
    rx.heading("Indigo", as_="h3", color_scheme="indigo"),
    rx.heading("Indigo", as_="h3", color_scheme="indigo", high_contrast=True),
    rx.heading("Cyan", as_="h3", color_scheme="cyan"),
    rx.heading("Cyan", as_="h3", color_scheme="cyan", high_contrast=True),
    rx.heading("Crimson", as_="h3", color_scheme="crimson"),
    rx.heading("Crimson", as_="h3", color_scheme="crimson", high_contrast=True),
    columns="2",
    spacing="2",
)

Changing the size with the screen width

size, weight, align and trim accept a dict of per-breakpoint values instead of a string. The heading below is "4" on narrow screens, "6" from sm up and "8" from md up. Try making the window narrower.

Resize the window

rx.heading("Resize the window", as_="h2", size={"initial": "4", "sm": "6", "md": "8"})

Filling the order

Make the page title a large h1 and give the two category headings the same size as h2. The top title gets trim="start" to reduce the space above it.

Spring Collection

New arrivals for warmer days.

Shirts

Linen and cotton, six colors.

Shoes

Light sneakers and sandals.

rx.box(
    rx.heading("Spring Collection", as_="h1", size="8", trim="start"),
    rx.text("New arrivals for warmer days.", size="3", color_scheme="gray"),
    rx.heading("Shirts", as_="h2", size="5", margin_top="20px"),
    rx.text("Linen and cotton, six colors.", size="2"),
    rx.heading("Shoes", as_="h2", size="5", margin_top="20px"),
    rx.text("Light sneakers and sandals.", size="2"),
)

Workshop notes

rx.heading defaults to h1, size "6", bold. as_ sets the level, h1 to h6.
as_ changes only the document structure, size only the look. For deeper levels, shrink size yourself.
weight, align, color_scheme and high_contrast work just as in rx.text.
trim="start" evens out the space above a heading inside a box.
You can pass per-breakpoint values such as size={"initial": "4", "md": "8"}.

← Previous

Typography · Text

Typography · Link

Get news about new lessons

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