Elanor

Heading

Last updated

A section heading. level sets its place in the document outline; size sets how large it looks.

Projects
Code
demo.tsx 
import {Heading} from '@earendil-works/elanor-react';

export default function HeadingDemo() {
  return (
    <Heading level={2} size={1}>
      Projects
    </Heading>
  );
}

Usage

import {Heading} from '@earendil-works/elanor-react';

<Heading level={1} size={1}>
  Projects
</Heading>;

Give each page one level={1} heading and don’t skip levels. The demos on this page start at level={2} because the page already has an H1.

Size

Sizes go from 1, the largest, to 6, the default, one per semantic.typography.heading.app style (36, 32, 28, 24, 21, and 18px). Choose the size for the visual hierarchy, independently of the level: a card’s level={3} heading usually stays at the default. Where the level already reflects the hierarchy, as in headings rendered from Markdown, pass size={level}.

Size 1

Size 2

Size 3

Size 4

Size 5

Size 6 (default)
Code
sizes.tsx 
import {Heading, Stack} from '@earendil-works/elanor-react';

export default function HeadingSizes() {
  return (
    <Stack gap="medium">
      <Heading level={3} size={1}>
        Size 1
      </Heading>
      <Heading level={3} size={2}>
        Size 2
      </Heading>
      <Heading level={3} size={3}>
        Size 3
      </Heading>
      <Heading level={3} size={4}>
        Size 4
      </Heading>
      <Heading level={3} size={5}>
        Size 5
      </Heading>
      <Heading level={3}>Size 6 (default)</Heading>
    </Stack>
  );
}

Marketing

variant="marketing" sets headings for promotional pages in the semantic.typography.heading.marketing styles: the prose typeface, larger (73px down to 18px), and lighter the larger they are. Use them for landing pages and announcements, not inside the product. Only marketing headings have size="display" (96px), for oversized promotional text above the heading hierarchy, such as a hero line. Choose level by the outline as usual: a display heading is often the page’s level={1}.

Display

Size 1

Size 2

Size 3

Size 4

Size 5

Size 6 (default)
Code
marketing.tsx 
import {Heading, Stack} from '@earendil-works/elanor-react';

export default function HeadingMarketing() {
  return (
    <Stack gap="medium">
      <Heading level={3} variant="marketing" size="display">
        Display
      </Heading>
      <Heading level={3} variant="marketing" size={1}>
        Size 1
      </Heading>
      <Heading level={3} variant="marketing" size={2}>
        Size 2
      </Heading>
      <Heading level={3} variant="marketing" size={3}>
        Size 3
      </Heading>
      <Heading level={3} variant="marketing" size={4}>
        Size 4
      </Heading>
      <Heading level={3} variant="marketing" size={5}>
        Size 5
      </Heading>
      <Heading level={3} variant="marketing">
        Size 6 (default)
      </Heading>
    </Stack>
  );
}

API

Heading

PropTypeDefaultDescription
variant'app''app'Heading style: app for interfaces, marketing for promotional pages.
size1 | … | 66Visual size, from 1 (largest) to 6, one per semantic.typography.heading.app style.
levelrequired1 | … | 6-Heading level. Follow the page outline; level doesn't change the size.

Renders <h1>–<h6>. Also accepts its HTML attributes and ref.

↑↓to select↵to openEscto close