Components

Heading

Sets page and section headings; the document level is separate from the visual size.

Storybook: Storybook
Source: Source

The example below loads live from Storybook; open it in Storybook to use the controls.

Live example, StorybookOpen in Storybook

Levels

level is required and picks <h1> to <h6>. The size comes from the level: 1 xl, 2 lg, 3 md, 4-6 sm.

Heading sample 1

Heading sample 2

Heading sample 3

Heading sample 4

import { Heading } from '@bigbang/ui';

export default function Levels() {
  return (
    <div className="flex flex-col gap-sm">
      <Heading level={1}>Heading sample 1</Heading>
      <Heading level={2}>Heading sample 2</Heading>
      <Heading level={3}>Heading sample 3</Heading>
      <Heading level={4}>Heading sample 4</Heading>
    </div>
  );
}

Size apart from level

size changes the visual only (16, 20, 24, 32 px); the document level stays with level.

h2, sm size: heading sample

h2, default size (lg): heading sample

import { Heading } from '@bigbang/ui';

export default function Sizes() {
  return (
    <div className="flex flex-col gap-sm">
      <Heading level={2} size="sm">
        h2, sm size: heading sample
      </Heading>
      <Heading level={2}>h2, default size (lg): heading sample</Heading>
    </div>
  );
}

Inside a section

Headings descend without skipping: h2, then h3. Text sets the copy below them.

Heading sample

Sample text

Subheading sample

Sample text

Another subheading

Sample text

import { Heading, Text } from '@bigbang/ui';

export default function InSection() {
  return (
    <article className="flex flex-col gap-md">
      <Heading level={2}>Heading sample</Heading>
      <Text render={<p />}>Sample text</Text>
      <Heading level={3}>Subheading sample</Heading>
      <Text render={<p />}>Sample text</Text>
      <Heading level={3}>Another subheading</Heading>
      <Text render={<p />}>Sample text</Text>
    </article>
  );
}

Light and dark mode

The heading colour comes from the color-text-default token; both modes need no separate setting.

Heading sample 1

Heading sample 2

Heading sample 3

Heading sample 4

Heading sample 1

Heading sample 2

Heading sample 3

Heading sample 4

import { Heading } from '@bigbang/ui';

export default function Levels() {
  return (
    <div className="flex flex-col gap-sm">
      <Heading level={1}>Heading sample 1</Heading>
      <Heading level={2}>Heading sample 2</Heading>
      <Heading level={3}>Heading sample 3</Heading>
      <Heading level={4}>Heading sample 4</Heading>
    </div>
  );
}