Heading
Heading
component is used to display page title and section headings. The default root element is h1
which can be configured using the level
prop.
#
Documentation
#
#
Usage
#
Use the level
prop to control both the semantic tag and visual size.
This is h1 heading
This is h2 heading
This is h3 heading
This is h4 heading
This is h5 heading
This is h6 heading
import { Flex, Heading } from "@optiaxiom/react";
export function App() {
return (
<Flex>
<Heading level="1">This is h1 heading</Heading>
<Heading level="2">This is h2 heading</Heading>
<Heading level="3">This is h3 heading</Heading>
<Heading level="4">This is h4 heading</Heading>
<Heading level="5">This is h5 heading</Heading>
<Heading level="6">This is h6 heading</Heading>
</Flex>
);
}
#
Visual size
#
Combine the level
prop with asChild
to set the visual size while manually controlling the semantic tag.
This is an h1 heading in h5 size
This is an h5 heading in h1 size
This is an h6 heading in h3 size
import { Flex, Heading } from "@optiaxiom/react";
export function App() {
return (
<Flex>
<Heading asChild level="5">
<h1>This is an h1 heading in h5 size</h1>
</Heading>
<Heading asChild>
<h5>This is an h5 heading in h1 size</h5>
</Heading>
<Heading asChild level="3">
<h6>This is an h6 heading in h3 size</h6>
</Heading>
</Flex>
);
}
#
Related
#
Text
Display body or any other form of text. By default it outputs the <p> paragraph element.
#
Props
#
#
Heading
#
Supports all Text props in addition to its own. Renders an <h1>
element.
Prop |
---|
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. false | true |
className string |
level Switch between the different h1-h6 levels. "1" | "2" | "3" | "4" | "6" | "5" Default: 1 |
lineClamp Truncate the text at specific number of lines. "1" | "2" | "3" | "4" |
truncate Whether to truncate the text and add an ellipsis at the end. false | true |
#
Changelog
#
#
0.1.0
#
- Added component