Heading
Semantic heading element.
use radix_yew_themes::Heading;
use yew::prelude::*;
#[function_component]
pub fn HeadingExample() -> Html {
html! {
<Heading>{"The quick brown fox jumps over the lazy dog"}</Heading>
}
}
API Reference
This component is based on the h1
element and supports common margin props.
Prop | Type | Default |
---|---|---|
as | HeadingAs | HeadingAs::H1 |
as_child | Option<Callback<HeadingChildProps>> | - |
size | Responsive<1..9> | 6 |
weight | Option<Responsive<Weight>> | - |
align | Option<Responsive<TextAlign>> | - |
trim | Option<Responsive<LeadingTrim>> | - |
truncate | Option<bool> | - |
wrap | Option<Responsive<TextWrap>> | - |
color | Option<AccentColor> | - |
high_contrast | Option<bool> | - |
Examples
As Another Element
Use the as
prop to change the heading level. This prop is purely semantic and does not change the visual appearance.
use radix_yew_themes::{Heading, HeadingAs};
use yew::prelude::*;
#[function_component]
pub fn HeadingAsExample() -> Html {
html! {
<>
<Heading r#as={HeadingAs::H1}>{"Level 1"}</Heading>
<Heading r#as={HeadingAs::H2}>{"Level 2"}</Heading>
<Heading r#as={HeadingAs::H3}>{"Level 3"}</Heading>
</>
}
}
Size
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.
Heading sizes match Text sizes. However, the line heights are set a bit tighter as headings tend to be shorter than running text.
use radix_yew_themes::{Flex, FlexDirection, Heading};
use yew::prelude::*;
#[function_component]
pub fn HeadingSizeExample() -> Html {
html! {
<Flex direction={FlexDirection::Column} gap=3>
<Heading size=1>{"The quick brown fox jumps over the lazy dog"}</Heading>
<Heading size=2>{"The quick brown fox jumps over the lazy dog"}</Heading>
<Heading size=3>{"The quick brown fox jumps over the lazy dog"}</Heading>
<Heading size=4>{"The quick brown fox jumps over the lazy dog"}</Heading>
<Heading size=5>{"The quick brown fox jumps over the lazy dog"}</Heading>
<Heading size=6>{"The quick brown fox jumps over the lazy dog"}</Heading>
<Heading size=7>{"The quick brown fox jumps over the lazy dog"}</Heading>
<Heading size=8>{"The quick brown fox jumps over the lazy dog"}</Heading>
<Heading size=9>{"The quick brown fox jumps over the lazy dog"}</Heading>
</Flex>
}
}
Weight
Use the weight
prop to set the text weight.
use radix_yew_themes::{Heading, Weight};
use yew::prelude::*;
#[function_component]
pub fn HeadingWeightExample() -> Html {
html! {
<>
<Heading weight={Weight::Light}>
{"The quick brown fox jumps over the lazy dog."}
</Heading>
<Heading weight={Weight::Regular}>
{"The quick brown fox jumps over the lazy dog."}
</Heading>
<Heading weight={Weight::Medium}>
{"The quick brown fox jumps over the lazy dog."}
</Heading>
<Heading weight={Weight::Bold}>
{"The quick brown fox jumps over the lazy dog."}
</Heading>
</>
}
}
Align
Use the align
prop to set text alignment.
use radix_yew_themes::{Heading, TextAlign};
use yew::prelude::*;
#[function_component]
pub fn HeadingAlignExample() -> Html {
html! {
<>
<Heading align={TextAlign::Left}>{"Left-aligned"}</Heading>
<Heading align={TextAlign::Center}>{"Center-aligned"}</Heading>
<Heading align={TextAlign::Right}>{"Right-aligned"}</Heading>
</>
}
}
Trim
Use the trim
prop to trim the leading space at the start, end, or both sides of the text box.
The prop works similarly to the upcoming half-leading control spec, but uses a common negative margin workaround under the hood for cross-browser support.
use radix_yew_themes::{Flex, FlexDirection, Heading, LeadingTrim};
use yew::prelude::*;
#[function_component]
pub fn HeadingTrimExample() -> Html {
html! {
<Flex direction={FlexDirection::Column} gap=3>
<Heading
trim={LeadingTrim::Normal}
style={[
("background", "var(--gray-a2)"),
("border-top", "1px dashed var(--gray-a7)"),
("border-bottom", "1px dashed var(--gray-a7)"),
]}
>
{"Without trim"}
</Heading>
<Heading
trim={LeadingTrim::Both}
style={[
("background", "var(--gray-a2)"),
("border-top", "1px dashed var(--gray-a7)"),
("border-bottom", "1px dashed var(--gray-a7)"),
]}
>
{"With trim"}
</Heading>
</Flex>
}
}
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.
use radix_yew_themes::{Box, Flex, FlexDirection, Heading, LeadingTrim, Text};
use yew::prelude::*;
#[function_component]
pub fn HeadingTrimBoxExample() -> Html {
html! {
<Flex direction={FlexDirection::Column} gap=3>
<Box
p=4
style={[
("background", "var(--gray-a2)"),
("border", "1px dashed var(--gray-a7)"),
]}
>
<Heading mb=1 size=3>
{"Without trim"}
</Heading>
<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."}
</Text>
</Box>
<Box
p=4
style={[
("background", "var(--gray-a2)"),
("border", "1px dashed var(--gray-a7)"),
]}
>
<Heading mb=1 size=3 trim={LeadingTrim::Start}>
{"With trim"}
</Heading>
<Text trim={LeadingTrim::End}>
{"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."}
</Text>
</Box>
</Flex>
}
}
The default trim values are configured for the system font stack that's used by Radix Themes. If you are using custom fonts, you can adjust the trim values using the corresponding CSS variables.
.radix-themes {
--default-leading-trim-start: 0.42em;
--default-leading-trim-end: 0.36em;
--heading-leading-trim-start: 0.42em;
--heading-leading-trim-end: 0.36em;
}
Truncate
Use the truncate
prop to truncate text with an ellipsis when it overflows its container.
use radix_yew_themes::{Flex, Heading};
use yew::prelude::*;
#[function_component]
pub fn HeadingTruncateExample() -> Html {
html! {
<Flex max_width="300px">
<Heading truncate=true>{"The quick brown fox jumps over the lazy dog"}</Heading>
</Flex>
}
}
Wrap
Use the wrap
prop to control text wrapping.
use radix_yew_themes::{Flex, FlexDirection, Heading, TextWrap};
use yew::prelude::*;
#[function_component]
pub fn HeadingWrapExample() -> Html {
html! {
<Flex direction={FlexDirection::Column} gap=3>
<Flex max_width="300px">
<Heading wrap={TextWrap::Nowrap}>{"The quick brown fox jumps over the lazy dog"}</Heading>
</Flex>
<Flex max_width="300px">
<Heading wrap={TextWrap::Balance}>{"The quick brown fox jumps over the lazy dog"}</Heading>
</Flex>
<Flex max_width="300px">
<Heading wrap={TextWrap::Pretty}>{"The quick brown fox jumps over the lazy dog"}</Heading>
</Flex>
</Flex>
}
}
text-wrap: pretty
is an experimental value that is not yet supported in all browsers. However, it can be treated as a progressive enhancement for browsers that do support it.
Color
Use the color
prop to assign a specific color. The text colors are designed to achieve at least Lc 60 APCA contrast over common background colors.
use radix_yew_themes::{AccentColor, Flex, FlexDirection, Heading};
use yew::prelude::*;
#[function_component]
pub fn HeadingColorExample() -> Html {
html! {
<Flex direction={FlexDirection::Column}>
<Heading color={AccentColor::Indigo}>{"The quick brown fox jumps over the lazy dog"}</Heading>
<Heading color={AccentColor::Cyan}>{"The quick brown fox jumps over the lazy dog"}</Heading>
<Heading color={AccentColor::Orange}>{"The quick brown fox jumps over the lazy dog"}</Heading>
<Heading color={AccentColor::Crimson}>{"The quick brown fox jumps over the lazy dog"}</Heading>
</Flex>
}
}
High-Contrast
Use the high_contrast
prop to increase color contrast with the background.
use radix_yew_themes::{AccentColor, Flex, FlexDirection, Heading};
use yew::prelude::*;
#[function_component]
pub fn HeadingHighContrastExample() -> Html {
html! {
<Flex direction={FlexDirection::Column}>
<Heading color={AccentColor::Gray}>{"The quick brown fox jumps over the lazy dog."}</Heading>
<Heading color={AccentColor::Gray} high_contrast=true>
{"The quick brown fox jumps over the lazy dog."}
</Heading>
</Flex>
}
}