Library
/
Typography
/
Heading
The quick brown fox jumps over the lazy dog.
rx.heading("The quick brown fox jumps over the lazy dog.")Use the as_ prop to change the heading level. This prop is purely semantic and does not change the visual appearance.
Level 1
Level 2
Level 3
rx.flex(
rx.heading("Level 1", as_="h1"),
rx.heading("Level 2", as_="h2"),
rx.heading("Level 3", as_="h3"),
direction="column",
spacing="3",
)Use the size prop to control the size of the heading. The prop also provides correct line height and corrective letter spacing—as text size increases, the relative line height and letter spacing decrease
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
rx.flex(
rx.heading(
"The quick brown fox jumps over the lazy dog.",
size="1",
),
rx.heading(
"The quick brown fox jumps over the lazy dog.",
size="2",
),
rx.heading(
"The quick brown fox jumps over the lazy dog.",
size="3",
),
rx.heading(
"The quick brown fox jumps over the lazy dog.",
size="4",
),
rx.heading(
"The quick brown fox jumps over the lazy dog.",
size="5",
),
rx.heading(
"The quick brown fox jumps over the lazy dog.",
size="6",
),
rx.heading(
"The quick brown fox jumps over the lazy dog.",
size="7",
),
rx.heading(
"The quick brown fox jumps over the lazy dog.",
size="8",
),
rx.heading(
"The quick brown fox jumps over the lazy dog.",
size="9",
),
direction="column",
spacing="3",
)Use the weight prop to set the text weight.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
rx.flex(
rx.heading(
"The quick brown fox jumps over the lazy dog.",
weight="light",
),
rx.heading(
"The quick brown fox jumps over the lazy dog.",
weight="regular",
),
rx.heading(
"The quick brown fox jumps over the lazy dog.",
weight="medium",
),
rx.heading(
"The quick brown fox jumps over the lazy dog.",
weight="bold",
),
direction="column",
spacing="3",
)Use the align prop to set text alignment.
Left-aligned
Center-aligned
Right-aligned
rx.flex(
rx.heading("Left-aligned", align="left"),
rx.heading("Center-aligned", align="center"),
rx.heading("Right-aligned", align="right"),
direction="column",
spacing="3",
width="100%",
)Use the trim prop to trim the leading space at the start, end, or both sides of the text.
Without Trim
With Trim
rx.flex(
rx.heading(
"Without Trim",
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",
trim="both",
style={
"background": "var(--gray-a2)",
"border_top": "1px dashed var(--gray-a7)",
"border_bottom": "1px dashed var(--gray-a7)",
},
),
direction="column",
spacing="3",
)Trimming the leading is useful when dialing in vertical spacing in cards or other “boxy” components. Otherwise, padding looks larger on top and bottom than on the sides.
Without trim
The goal of typography is to relate font size, line height, and line width in a proportional way that maximizes beauty and makes reading easier and more pleasant.
With trim
The goal of typography is to relate font size, line height, and line width in a proportional way that maximizes beauty and makes reading easier and more pleasant.
rx.flex(
rx.box(
rx.heading(
"Without trim",
margin_bottom="4px",
size="3",
),
rx.text(
"The goal of typography is to relate font size, line height, and line width in a proportional way that maximizes beauty and makes reading easier and more pleasant."
),
style={
"background": "var(--gray-a2)",
"border": "1px dashed var(--gray-a7)",
},
padding="16px",
),
rx.box(
rx.heading(
"With trim",
margin_bottom="4px",
size="3",
trim="start",
),
rx.text(
"The goal of typography is to relate font size, line height, and line width in a proportional way that maximizes beauty and makes reading easier and more pleasant."
),
style={
"background": "var(--gray-a2)",
"border": "1px dashed var(--gray-a7)",
},
padding="16px",
),
direction="column",
spacing="3",
)Use the color_scheme prop to assign a specific color, ignoring the global theme.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
rx.flex(
rx.heading(
"The quick brown fox jumps over the lazy dog.",
color_scheme="indigo",
),
rx.heading(
"The quick brown fox jumps over the lazy dog.",
color_scheme="cyan",
),
rx.heading(
"The quick brown fox jumps over the lazy dog.",
color_scheme="crimson",
),
rx.heading(
"The quick brown fox jumps over the lazy dog.",
color_scheme="orange",
),
direction="column",
)Use the high_contrast prop to increase color contrast with the background.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
rx.flex(
rx.heading(
"The quick brown fox jumps over the lazy dog.",
color_scheme="indigo",
high_contrast=True,
),
rx.heading(
"The quick brown fox jumps over the lazy dog.",
color_scheme="cyan",
high_contrast=True,
),
rx.heading(
"The quick brown fox jumps over the lazy dog.",
color_scheme="crimson",
high_contrast=True,
),
rx.heading(
"The quick brown fox jumps over the lazy dog.",
color_scheme="orange",
high_contrast=True,
),
direction="column",
)A foundational text primitive based on the element.
Test
Event Triggers
See the full list of default event triggersDid you find this useful?
