Headings are used for rendering headlines.
Heading composes Box so you can use all the style props and add responsive
styles as well. It renders an <h2> tag by default.
To increase the size of the heading, you can use the fontSize or size props.
If you use the size prop, the font size of the heading will automatically
decrease in size for smaller screens.
Pass the isTruncated prop to render an ellipsis when the heading exceeds the
width of the viewport or maxWidth prop.
You can override the size of the Heading component by passing the fontSize
prop. No need to write css or styled().
Paystack helps businesses in Africa get paid by anyone, anywhere in the world
The Heading composes the Box component, so you can pass
all Box props.
| Name | Type | Description | Default |
|---|---|---|---|
| colorScheme | string | - | |
| css | Interpolation<{}> | The emotion's css style object | - |
| isTruncated | boolean | if `true`, it'll render an ellipsis when the text exceeds the width of the viewport or maxWidth set. | - |
| layerStyle | string | apply layer styles defined in `theme.layerStyles` | - |
| noOfLines | number | ResponsiveArray<number> | ResponsiveObject<number> | Used to truncate text at a specific number of lines | - |
| orientation | "horizontal" | "vertical" | - | |
| size | string | - | |
| styleConfig | Record<string, any> | - | |
| textStyle | string | apply typography styles defined in `theme.textStyles` | - |
| variant | string | - |