Heading
Heading component that introduce sections of content and help users navigate the page.
Feel at home with Qasa
Examples
Set heading level with as
Heading is rendered as a <h2> element by default. Set the appropriate heading level where it is
used with the as prop.
Feel at home with Qasa
Sizes
The size prop can be used to change the size of the heading.
3x Extra small
2x Extra small
Extra small
Small
Medium
Large
Truncate
The numberOfLines prop can be used to truncate the heading text with an ellipsis.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Est aliquid assumenda sit nisi vel laboriosam nesciunt unde alias officiis nostrum commodi iusto, illum optio amet quaerat exercitationem expedita, aperiam aspernatur in eum ipsam. Quam culpa qui libero error numquam quia?
Accessibility
- Heading levels should be used in order, starting with
<h1>at the top of the page, and descending to<h6>. Multiple content sections can have the same heading level if they are on the same level in the page content hierarchy, with the exception of<h1>.
API Reference
| Prop | Default | Description |
|---|---|---|
as? | - | "h2" |
color? | 'default' | "strong" | "default" | "subtle" | "disabled" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary"Sets the color of the heading |
size? | 'md' | ResponsiveProp<"sm" | "md" | "lg" | "xs" | "2xs" | "3xs">Sets the visual size of the heading.
To override the rendered tag, use the |
numberOfLines? | - | numberTruncates the heading after a specific number of lines |
textAlign? | 'left' | "center" | "left" | "right"Alignment of the heading |