Heading
For headings and subheadings.
Usage
<Heading>Sphinx of black quartz, judge my vow.</Heading>Examples
As another element
Utilize the as property to specify the HTML tag. This changes semantic markup without affecting visual style.
<>
<Heading as="h1">Level 1</Heading>
<Heading as="h2">Level 2</Heading>
<Heading as="h3">Level 3</Heading>
</>Font Size
Use size or textStyle for text size. It makes line height and spacing smaller as text size grows and also ensures
text size is even for better layout.
<>
<Heading size="xs">Ag</Heading>
<Heading size="sm">Ag</Heading>
<Heading size="md">Ag</Heading>
<Heading size="lg">Ag</Heading>
<Heading size="xl">Ag</Heading>
<Heading size="2xl">Ag</Heading>
<Heading size="3xl">Ag</Heading>
<Heading size="4xl">Ag</Heading>
<Heading size="5xl">Ag</Heading>
<Heading size="6xl">Ag</Heading>
<Heading size="7xl">Ag</Heading>
</>Font Weight
Use the fontWeight prop to set the text weight.
<>
<Heading fontWeight="light">Sphinx of black quartz, judge my vow.</Heading>
<Heading fontWeight="normal">Sphinx of black quartz, judge my vow.</Heading>
<Heading fontWeight="medium">Sphinx of black quartz, judge my vow.</Heading>
<Heading fontWeight="semibold">Sphinx of black quartz, judge my vow.</Heading>
<Heading fontWeight="bold">Sphinx of black quartz, judge my vow.</Heading>
</>