styple

Heading

A caption or title for a section.

Examples

styple lorem ipsum

import { Heading } from "@styple/design-system";

<Flex
  css={{
    flexDirection: "column",
  }}
>
  <Heading
    css={{
      fontWeight: "$black",
      color: "$text100",
    }}
  >styple lorem ipsum</Heading>
  <Heading
    as="h2"
    css={{
      fontWeight: "$black",
      color: "$text200",
    }}
  >styple lorem ipsum</Heading>
  <Heading
    as="h3"
    css={{
      fontWeight: "$black",
      color: "$text300",
    }}
  >styple lorem ipsum</Heading>
</Flex>

API Reference

Heading

A styled component with Text's styles and variants. However, it defaults to color="heading" and size is chosen depending on heading tag unless overridden. Other props:

Prop	Type	Default	Explanation
`as`	`string`	`"h1"`	Choose heading tag to display. Depending on tag different `size` variants are set.

Grid

Label