Skip to content

Heading

Page and section title
import { Heading } from '@ensdomains/thorin'
<Heading>Hello World</Heading>

Props
#

name
type
default
description
align
"-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "center" | "end" | "justify" | "left" | "match-parent" | "right" | "start"
-
CSS property of textAlign
as
"h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "legend"
h1
JSX element to render.
color
any
-
-
id
string
-
The id attribute of element
level
"1" | "2"
2
-
ref
Ref<HTMLDivElement>
-
-
responsive
boolean
-
-
transform
"-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "capitalize" | "full-size-kana" | "full-width" | "lowercase" | "none" | "uppercase"
-
CSS property of text-transform

Levels
#

By default, the semantic heading level matches the visual heading level, e.g. <Heading level="2"> will render an h2 element. If you need the semantics to be different from the visuals, you can provide the desired HTML tag via the as prop.

Align
#

Color
#

Responsive
#

Use the responsive flag to resize the heading based on breakpoints.

Edit on GitHub