Heading

The marketing type scale, h1 through h4.

Find a trusted freelancer for your next project

Two journeys, one match

<Heading level="h1">
	Find the right <span className="text-brand">freelancer</span>
</Heading>

level sets the size and the rendered tag together. Wrap the words you want tinted in a span with a surface token rather than colouring the whole heading.

API

PropTypeDefault
align"center" | "left" | "right"Text alignment. center suits a section intro; anything longer than a line or two reads better left-aligned.
levelHeadingLevel"h2"Sets both the rendered tag and the size scale (override the tag with render).
renderComponentRenderFn<HTMLProps, {}> | ReactElement<unknown, string | JSXElementConstructor<any>>Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render.

Plus every <h2> prop. Source: landing/components/heading.tsx.