Skip to main content

Heading

Components​

The Button component family provides the following components:

H1​

A component to renderd a styled H1 tag. Because of the TailwindCSS reset, common tags are unstyled. When you need to render a H1 tag outside of a context where it is automatically styled (such as inside markdown) you can use this. Alternatively, you can wrap your content in div.prose which will apply the styles in CSS.

You can import the H1 component from the heading component family in the @freesewing/react package:

Javascript
import { H1 } from "@freesewing/react/components/Heading"

H2​

A component to renderd a styled H2 tag. Because of the TailwindCSS reset, common tags are unstyled. When you need to render a H2 tag outside of a context where it is automatically styled (such as inside markdown) you can use this. Alternatively, you can wrap your content in div.prose which will apply the styles in CSS.

You can import the H2 component from the heading component family in the @freesewing/react package:

Javascript
import { H2 } from "@freesewing/react/components/Heading"

H3​

A component to renderd a styled H3 tag. Because of the TailwindCSS reset, common tags are unstyled. When you need to render a H3 tag outside of a context where it is automatically styled (such as inside markdown) you can use this. Alternatively, you can wrap your content in div.prose which will apply the styles in CSS.

You can import the H3 component from the heading component family in the @freesewing/react package:

Javascript
import { H3 } from "@freesewing/react/components/Heading"

H4​

A component to renderd a styled H4 tag. Because of the TailwindCSS reset, common tags are unstyled. When you need to render a H4 tag outside of a context where it is automatically styled (such as inside markdown) you can use this. Alternatively, you can wrap your content in div.prose which will apply the styles in CSS.

You can import the H4 component from the heading component family in the @freesewing/react package:

Javascript
import { H4 } from "@freesewing/react/components/Heading"

H5​

A component to renderd a styled H5 tag. Because of the TailwindCSS reset, common tags are unstyled. When you need to render a H5 tag outside of a context where it is automatically styled (such as inside markdown) you can use this. Alternatively, you can wrap your content in div.prose which will apply the styles in CSS.

You can import the H5 component from the heading component family in the @freesewing/react package:

Javascript
import { H5 } from "@freesewing/react/components/Heading"

H6​

A component to renderd a styled H6 tag. Because of the TailwindCSS reset, common tags are unstyled. When you need to render a H6 tag outside of a context where it is automatically styled (such as inside markdown) you can use this. Alternatively, you can wrap your content in div.prose which will apply the styles in CSS.

You can import the H6 component from the heading component family in the @freesewing/react package:

Javascript
import { H6 } from "@freesewing/react/components/Heading"