Spirit UI

Heading

Used to render heading elements with defined typography styles.

import { Heading } from "@spirit-ui/design-system/components";
 
export default function Component() {
  return <Heading>Lorem ipsum dolor sit amet</Heading>;
}

Variants

The variant prop can be used to change the visual appearence of the heading element.

import { Box, Heading } from "@spirit-ui/design-system/components";
 
export default function Component() {
  return (
    <Box display="grid" gap="x2">
      <Heading variant="h1">Heading One</Heading>
      <Heading variant="h2">Heading Two</Heading>
      <Heading variant="h3">Heading Three</Heading>
      <Heading variant="h4">Heading Four</Heading>
      <Heading variant="h5">Heading Five</Heading>
      <Heading variant="h6">Heading Six</Heading>
    </Box>
  );
}

Colors

The color prop can be used to change the text color of the heading.

import { Heading } from "@spirit-ui/design-system/components";
 
export default function Component() {
  return <Heading color="blue700">Lorem ipsum dolor sit amet</Heading>;
}

Polymorphic

The as prop can be used to override the underlying html element that is rendered to change it's semantic meaning.

import { Heading } from "@spirit-ui/design-system/components";
 
export default function Component() {
  return (
    <Heading as="h2" variant="h3">
      Semantically rendered as {"<h2>"}, but visually rendered as {"<h3>"}
    </Heading>
  );
}

Props

PropDefaultType