Heading

The Heading component is a flexible text component. Using a combination of the variant, size and tag props, it provides a lot of flexibility to developers to render text in the required style and size, while controlling page structure.

info

This component is affected by the CMS theme configurations. For a full mapping of font-size values and how they are applied to the <Heading/> component, see the theme typography page.

Examples

Heading variants

warning

Passing in no props, the Heading component will render an <h1>. Keep this in mind to ensure proper markup structure on your pages.

Preview
Code

Variant Property

Default H1 heading

Inverted H1 heading

Size Property

Size none

Size extra large

Size large

Size medium

Size small heading

    import { Heading } from '@hv/ui/typography';

    <div className='py-4'>
        <span>Variant Property</span>
        <Heading>Default H1 heading</Heading>
        <Heading variant='inverted'>Inverted H1 heading</Heading>
    </div>
    <div className='py-4'>
        <span>Size Property</span>
        <Heading size='none'>Default H1 size none heading</Heading>
        <Heading size='xl'>Default H1 size extra large heading</Heading>
        <Heading size='lg'>Default H1 size large heading</Heading>
        <Heading size='md'>Default H1 size medium heading</Heading>
        <Heading size='sm'>Default H1 size small heading</Heading>
    </div>

Props

Property	Description	Values	Type
`variant`	Style variant	default inverted	String
`size`	Size variant	default sm md lg xl none	String
`tag`	HTML element	h1 h2 h3 h4 h5 h6 span	String
`children`	Content to display		ReactNode
`className`	Custom CSS classes		String
`props`	Additional HTML attributes.		HTMLElement

Customization

You have a lot of flexibility on how you can customize this components; your approach will depend on if you need a global solution, such as a new variant, or a one-off change.

If the customization is necessary for all use cases, update the component source code in the UI library package directly.
For a one-off change, pass className overrides

Adding a custom variant

In the component source code (hv-ui/src/typography.tsx), add your new variant's name and classes directly to the alertVariants object.

    variant: {
      default: '',
      inverted: '...',
      newvariant: '...'
    },

Then pass in your variant on the component:

<Heading variant='newvariant'>New Variant</Heading>

Overriding a size

If you need to adjust the styles of a base size, you can pass in classes directly on the component.

<Heading size='lg' className='lg:text-heading-3xl'>
  Adjust size in large+ viewports
</Heading>

Examples​

Heading variants​