Heading

A heading component that uses display styles for titles and section headers. It extends the base Text component with specific heading-related properties.

Usage

import { Heading } from '@oztix/roadie-components'

Examples

Semantic heading levels with no added styling

<View>
  <Heading as='h1'>Heading 1</Heading>
  <Heading as='h2'>Heading 2</Heading>
  <Heading as='h3'>Heading 3</Heading>
</View>

Prose display styles

<View gap='200'>
  <Heading textStyle='display.prose'>Default prose heading</Heading>
  <Heading as='h1' textStyle='display.prose.1'>Page titles</Heading>
  <Heading as='h2' textStyle='display.prose.2'>Prose section titles</Heading>
  <Heading as='h3' textStyle='display.prose.3'>Prose sub-section titles</Heading>
  <Heading as='h4' textStyle='display.prose.4'>Prose 4th level headings</Heading>
  <Heading as='h5' textStyle='display.prose.5'>Prose 5th level headings</Heading>
  <Heading as='h6' textStyle='display.prose.6'>Prose 6th level headings</Heading>
</View>

UI display styles

<View gap='400'>
  <View>
    <Heading>Default UI heading</Heading>
    <Text as='p' textStyle='ui.meta'>The default text style for display text in UI</Text>
  </View>
  <View>
    <Heading as='h1' textStyle='display.ui.1'>UI Page title</Heading>
    <Text as='p' textStyle='ui.meta'>The style for page titles in UI</Text>
  </View>
  <View>
    <Heading as='h2' textStyle='display.ui.2'>UI Section title</Heading>
    <Text as='p' textStyle='ui.meta'>The style for 2nd level headings in UI. Used for major section headers, modal titles, and primary content areas within a page</Text>
  </View>
  <View>
    <Heading as='h3' textStyle='display.ui.3'>UI Sub-section title</Heading>
    <Text as='p' textStyle='ui.meta'>The style for 3rd level headings in UI. Used for subsection headers, card titles, and group headings within major sections</Text>
  </View>
  <View>
    <Heading as='h4' textStyle='display.ui.4'>UI Sub-sub-section title</Heading>
    <Text as='p' textStyle='ui.meta'>The style for 4th level headings in UI. Used for form section labels, sidebar navigation categories, and minor content divisions</Text>
  </View>
  <View>
    <Heading as='h5' textStyle='display.ui.5'>UI Sub-sub-sub-section title</Heading>
    <Text as='p' textStyle='ui.meta'>The style for 5th level headings in UI. Used for list group headers, dropdown section labels, and nested navigation items</Text>
  </View>
  <View>
    <Heading as='h6' textStyle='display.ui.6'>UI Sub-sub-sub-sub-section title</Heading>
    <Text as='p' textStyle='ui.meta'>The style for 6th level headings in UI. Used for small widget titles, inline section labels, and minor UI element headers</Text>
  </View>
</View>

Color palettes

Neutral is the default color palette for general purpose headings, while accent is the default for UI headings.

Each color palette is designed for specific use cases:

• neutral: Default for general content
• accent: Default for UI headings and highlighted sections
• brand: Brand-specific headings
• information: Informational headings
• success: Positive or completion headings
• warning: Cautionary headings
• danger: Error or critical headings

<View gap='200'>
  <Heading colorPalette='neutral'>Neutral heading</Heading>
  <Heading colorPalette='accent'>Accent heading</Heading>
  <Heading colorPalette='brand'>Brand heading</Heading>
  <Heading colorPalette='information'>Information heading</Heading>
  <Heading colorPalette='success'>Success heading</Heading>
  <Heading colorPalette='warning'>Warning heading</Heading>
  <Heading colorPalette='danger'>Danger heading</Heading>
</View>

Emphasis levels

If you need to customize the emphasis of a heading, you can use the emphasis prop to adjust its visual weight.

But only use this for special cases, try to use textStyles that already have the desired emphasis level built in.

<View gap='200'>
  <Heading emphasis='strong'>Strong emphasis heading</Heading>
  <Heading emphasis='default'>Default emphasis heading</Heading>
  <Heading emphasis='subtle'>Subtle emphasis heading</Heading>
  <Heading emphasis='subtler'>Subtler emphasis heading</Heading>
</View>