OudsHeadingText class

OUDS Heading Design Guidelines

Reference design version : 1.1.0

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.

When size is OudsHeadingTextSize.large and marker is true (and the active theme supports it, see OudsTypographyTokens.headingLargeMarker), a small rectangular marker is displayed under the text, using the theme's contentBrandPrimary color. The marker follows these rules independently of the text content: it is shown the same way whether the text is plain, colored, bold or contains a link.

OudsHeadingText(
  text: 'Section title',
  size: OudsHeadingTextSize.large
  )

A color override can be provided when the default theme color is not suitable, for example when the text is displayed on a colored surface:

OudsHeadingText(
  text: 'Section title',
  size: OudsHeadingTextSize.large,
  color: OudsTheme.of(context).colorScheme(context).contentDefault,
)

Multiple colors can be used simultaneously within the same text. The .rich constructor (OudsHeadingText.rich) is exposed to color only part of the text. Build the .rich constructor's text argument with buildOudsAnnotatedText.

The user must ensure that the contrast between the colors used meets current accessibility standards and that the colors align with the brand’s and its entity’s visual identity.

OudsHeadingText.rich(
  text: buildOudsAnnotatedText((builder) {
    builder.append('Heading with ');
    builder.withColor((context) => color, () => builder.append('colored text'));
  }),
)