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.
Design
| Name | Heading |
| Version | 1.0.0 |
Parameters
Text to display.
Modifier applied to the heading text.
Size of the heading text.
Color of the heading 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.
Note: This version with rich text is intended for themes that do not support marker on the heading text. (e.g. SoshTheme) Otherwise, please use the overload accepting plain text.
Design
| Name | Heading |
| Version | 1.0.0 |
Parameters
Text to display.
Modifier applied to the heading text.
Size of the heading text.
Color of the heading text.
Samples
val color = OudsTheme.colorScheme.content.brandPrimary
val text = buildOudsAnnotatedHeadingText {
append("Heading with ")
withColor(color) {
append("colored text")
}
}
OudsHeadingText(
modifier = Modifier.padding(OudsTheme.spaces.fixed.small),
text = text,
size = OudsHeadingTextSize.Large(marker = false)
)