ui.heading

Heading

Six semantic levels, a visual size you can set apart from the level, and titles that follow the browser's state.

A document outline

level= picks the tag, h1 to h6; each level gets its own size from the theme.

Employee handbook

Working at Northwind

Time off and holidays

Requesting parental leave

Documents to provide

Proof of birth or adoption

def outline() -> None:
    with ui.vstack(gap="sm", classes="w-full max-w-lg"):
        ui.heading("Employee handbook", level=1)
        ui.heading("Working at Northwind", level=2)
        ui.heading("Time off and holidays", level=3)
        ui.heading("Requesting parental leave", level=4)
        ui.heading("Documents to provide", level=5)
        ui.heading("Proof of birth or adoption", level=6)

A landing hero

size= and weight= change the look without touching the level the screen reader announces.

Invoicing that closes the month for you

Send, chase and reconcile every invoice from one screen.

def hero() -> None:
    with ui.vstack(gap="md", align="center", classes="max-w-2xl"):
        ui.heading("Invoicing that closes the month for you", level=1,
                   size="4xl", weight="extrabold", classes="text-center")
        ui.text("Send, chase and reconcile every invoice from one screen.",
                size="lg", color="muted", align="center")
        ui.button("Start free trial", icon_right="arrow-right", size="lg")

Card titles

A small, muted h3 for the label and a large coloured value.

Monthly revenue

€48,210

Active customers

1,284

Open tickets

37

def card_titles() -> None:
    with ui.grid(min_col="12rem", gap="md", classes="w-full"):
        for title, value, color in (("Monthly revenue", "€48,210", "primary"),
                                    ("Active customers", "1,284", "success"),
                                    ("Open tickets", "37", "warning")):
            with ui.card(padding="md"), ui.vstack(gap="xs"):
                ui.heading(title, level=3, size="sm", weight="medium",
                           color="muted")
                ui.heading(value, level=4, size="3xl", color=color)

A section header

Team members

12 people have access to this workspace.

def section_header() -> None:
    with ui.hstack(gap="md", justify="between", wrap=True, classes="w-full"):
        with ui.vstack(gap="none"):
            ui.heading("Team members", level=2, size="xl")
            ui.text("12 people have access to this workspace.", color="muted",
                    size="sm")
        ui.button("Invite people", icon_left="user-plus", variant="outline")

A title that follows the browser

Bind the text to a ClientState field: the heading follows every keystroke, no request involved.

Preview

Last edited by Maya Chen

class Draft(ClientState):
    title: str = field(default="Q4 product roadmap")


def live_title() -> None:
    draft = Draft()
    with ui.vstack(gap="md", classes="w-full max-w-md"):
        ui.input(value=draft.title, placeholder="Untitled document",
                 icon_left="pencil")
        with ui.card(padding="md"), ui.vstack(gap="xs"):
            ui.text("Preview", size="xs", color="muted", weight="medium")
            ui.heading(draft.title, level=2, size="2xl")
            ui.text("Last edited by Maya Chen", size="sm", color="muted")