Headings

The H1 to H5 components are used to render headings at different levels in a document or page. These components provide a hierarchy of bold text styles, each smaller than the last from H1 to H6.

Usage

Headings H1-H5 Component Usage

import React from 'react';
import { H1, H2, H3, H4, H5 } from '~/ui/components/Text';

export default function App() {
  return (
    <div>
      <H1>The Quick Brown Fox Jumps Over the Lazy Dog</H1>
      <H2>The Quick Brown Fox Jumps Over the Lazy Dog</H2>
      <H3>The Quick Brown Fox Jumps Over the Lazy Dog</H3>
      <H4>The Quick Brown Fox Jumps Over the Lazy Dog</H4>
      <H5>The Quick Brown Fox Jumps Over the Lazy Dog</H5>
    </div>
  );
}

Rendered Example

The Quick Brown Fox Jumps Over the Lazy Dog

Props

The H1 to H5 components accept all standard HTML heading attributes.