OudsHeadingText
Heading styles are used to structure content and define the hierarchy of information within an interface. Available in multiple sizes, they help users quickly understand the organization of a page or section. Their size automatically adjusts across breakpoints to ensure optimal readability on all devices. Headings serve as the primary entry point for visual navigation.
An overload accepting annotated string is available for rich text formatting.
Design
| Name | Heading |
| Version | 1.0.0 |
Parameters
Text to be displayed.
Modifier applied to the heading text.
Size of the heading text.
Color of the heading text.
Alignment of the text within the lines of the paragraph. See TextStyle.textAlign.
Line height for the Paragraph in TextUnit unit, e.g. SP or EM. See TextStyle.lineHeight.
How visual overflow should be handled.
Callback that is executed when a new text layout is calculated. A TextLayoutResult object that callback provides contains paragraph information, size of the text, baselines and other details. The callback can be used to add additional decoration or functionality to the text. For example, to draw selection around the text.
Samples
OudsHeadingText(
modifier = Modifier.padding(OudsTheme.spaces.fixed.small),
text = "Heading",
size = OudsHeadingTextSize.Medium
)OudsHeadingText(
modifier = Modifier.padding(OudsTheme.spaces.fixed.small),
text = "Heading",
size = OudsHeadingTextSize.Large()
)OudsHeadingText(
modifier = Modifier.padding(OudsTheme.spaces.fixed.small),
text = "Heading",
size = OudsHeadingTextSize.Large(marker = false)
)Heading styles are used to structure content and define the hierarchy of information within an interface. Available in multiple sizes, they help users quickly understand the organization of a page or section. Their size automatically adjusts across breakpoints to ensure optimal readability on all devices. Headings serve as the primary entry point for visual navigation.
An overload accepting plain text is available for simple text without formatting.
Design
| Name | Heading |
| Version | 1.0.0 |
Parameters
Text to be displayed. Note: Use rich text in compliance with guidelines and accessibility criteria.
Modifier applied to the heading text.
Size of the heading text.
Color of the heading text.
Alignment of the text within the lines of the paragraph. See TextStyle.textAlign.
Line height for the Paragraph in TextUnit unit, e.g. SP or EM. See TextStyle.lineHeight.
How visual overflow should be handled.
Callback that is executed when a new text layout is calculated. A TextLayoutResult object that callback provides contains paragraph information, size of the text, baselines and other details. The callback can be used to add additional decoration or functionality to the text. For example, to draw selection around the text.
Samples
OudsHeadingText(
modifier = Modifier.padding(OudsTheme.spaces.fixed.small),
text = buildAnnotatedString {
append("Heading with ")
withStyle(SpanStyle(color = OudsTheme.colorScheme.content.brandPrimary)) { append("colored text") }
append(" and ")
withStyle(SpanStyle(fontWeight = FontWeight.Normal)) { append("normal text") }
},
size = OudsHeadingTextSize.Large(marker = false)
)