Heading

Import

import { Heading } from "@sparrowengg/twigs-react";

Usage

Result

Heading 1

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Live EditorOpen in playground

<>
  <Heading> Heading 1 </Heading>
  <Heading size="h2"> Heading 1 </Heading>
  <Heading size="h3"> Heading 2 </Heading>
  <Heading size="h3"> Heading 3 </Heading>
  <Heading size="h4"> Heading 4 </Heading>
  <Heading size="h5"> Heading 5 </Heading>
  <Heading size="h6"> Heading 6 </Heading>
</>

Changing the size of the heading does not change its html element type. It only changes the font size of the heading. If you want to change the html element type, you can use the as prop.

Result

Heading 1

Live Editor

<Heading size="h5" as="h1">
  Heading 1
</Heading>

Props

Property	Description	Type	Default
size	font size of the text	h1 h2 h3 h4 h5 h6	h1
weight	font weight of the text	regular medium bold	regular