Reflex Logo

Intro

Gallery

Hosting

Components

New

Learn

Components

API Reference

Onboarding

Library

/

Layout

/

Section

Denotes a section of page content, providing vertical padding by default.

Primarily this is a semantic component that is used to group related textual content.

First

This is the first content section

Second

This is the second content section

rx.box(
    rx.section(
        rx.heading("First"),
        rx.text("This is the first content section"),
        padding_left="12px",
        padding_right="12px",
        background_color="var(--gray-2)",
    ),
    rx.section(
        rx.heading("Second"),
        rx.text("This is the second content section"),
        padding_left="12px",
        padding_right="12px",
        background_color="var(--gray-2)",
    ),
    width="100%",
)

Denotes a section of page content.

Test
PropTypeDescriptionValues
sizeLiteral

The size of the section: "1" - "3" (default "3")

Event Triggers

No component specific event triggers

← MatchSeparator →

Did you find this useful?