Heading

A title at the head of a page or section of a block.

import { Text } from '@marvelapp/ui';

Introduction

The <Heading /> component has all typography and space props available. The fontWeight is set to 500 by default and it has licorice as the default color. The line-height is set to 1.2.

It’s important to always always set the as tag for accessibility reasons. When your heading is the largest text on the screen it’s likely a h1.

<Heading as="h1" fontSize={9}>
  Rapid prototyping, testing and handoff for modern design teams
</Heading>
<Text as="p" fontSize={6} mt={2}>
  The User Testing Field Guide helps you build your first user research
  initiative with everything you need to get buy-in, recruit, prototype, start
  testing and gather results.
</Text>

Props

The <Heading> component is identical to the <Text> component. If you change fontWeight to anything other than 600 it’s wise to just use <Text> instead.