Skip to content

Heading

Renders a heading text node.

Usage

Code
import { createSystem } from 'frog/ui'
 
const { Heading } = createSystem()
 
function Example() {
  return <Heading>Hello world</Heading>
}

Heading Properties

align

Sets the horizontal alignment of the text.

Code
function Example() {
  return <Heading align="
left
right
center
end
start
justify
right">Hello world</Heading>
}

color

Sets the color of the text.

Values are mapped to the colors property on the UI System Variables.

Code
function Example() {
  return <Heading color="r
red100
red200
red300
red400
red500
red600
red
red700
red800
red900
red1000
ed">Hello world</Heading>
}

decoration

Sets the text decoration.

Code
function Example() {
  return <Heading decoration="
underline
dashed
dotted
solid
line-through
underline">Hello world</Heading>
}

font

Sets the font family of the text.

Values are mapped to the fonts property on the UI System Variables.

Code
function Example() {
  return <Heading font="merriweather">Hello world</Heading>
}

size

Sets the size of the font.

Values are mapped to the fontSizes property on the UI System Variables.

Code
function Example() {
  return <Heading size="
12
14
16
18
20
24
32
48
64
32">Hello world</Heading>
}

tracking

Sets the horizontal spacing behavior between text characters.

Values are mapped to the units property on the UI System Variables.

Code
function Example() {
  return <Heading tracking="
0
1
2
3
4
6
8
10
12
14
16
18
20
22
24
26
28
30
32
34
36
38
40
42
44
46
48
52
56
60
64
72
80
96
128
160
192
224
256
-2
-0
-1
-3
-4
-6
-8
-10
-12
-14
-16
-18
-20
-22
-24
-26
-28
-30
-32
-34
-36
-38
-40
-42
-44
-46
-48
-52
-56
-60
-64
-72
-80
-96
-128
-160
-192
-224
-256
-2">Hello world</Heading>
}

weight

Sets the weight (or boldness) of the font.

Code
function Example() {
  return <Heading weight="
100
200
300
400
500
600
700
800
900
400">Hello world</Heading>
}

wrap

Defines how the text should be wrapped.

Code
function Example() {
  return <Heading wrap="
balance
balance">Hello world, this is me.</Heading>
}