The quick brown fox jumps over the lazy dog
Usage
import { Heading } from "chakra-ui-solid";<Heading>I'm a Heading</Heading>Examples
Sizes
Use the size prop to change the size of the heading component.
Heading (sm)
Heading (md)
Heading (lg)
Heading (xl)
Heading (2xl)
Heading (3xl)
Heading (4xl)
Heading (5xl)
Heading (6xl)
As another element
Use the as prop to render the heading as another HTML element.
Level 1
Level 2
Level 3
Weights
Use the fontWeight prop to change the weight of the heading component.
Normal
Medium
Semibold
Bold
Composition
Use the Heading component to compose other components.
Modern payments for Stores
PayMe helps startups get paid by anyone, anywhere in the world
Props
| Prop | Default | Type |
|---|---|---|
size | 'xl' | ConditionalValue<| 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | PresetVariant<'heading', 'size'>>The type scale step — font size and line height together. |
Plus HTMLChakraProps<"h2"> — the whole style-prop surface and the DOM attributes of the element it renders, several hundred names listed as their sources rather than expanded — and the three every component takes: as, render and unstyled.