Heading
Display headings with various sizes and styles.
The quick brown fox jumps over the lazy dog
import { Heading } from "stylus-ui/Heading";
export default () => ( <Heading>The quick brown fox jumps over the lazy dog</Heading>);As another element
Section titled “As another element”Use the as prop to change the heading level. This prop is purely semantic and does not alter visual appearance.
Level 1
Level 2
Level 3
import { Heading } from "stylus-ui/Heading";
export default () => ( <div className="space-y-2"> <Heading as="h1">Level 1</Heading> <Heading as="h2">Level 2</Heading> <Heading as="h3">Level 3</Heading> </div>);Use the size prop to control heading size. This prop also provides correct line height and corrective letter spacing.
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
import { Heading } from "stylus-ui/Heading";
export default () => ( <div className="space-y-4"> <Heading size="sm">The quick brown fox jumps over the lazy dog</Heading> <Heading size="md">The quick brown fox jumps over the lazy dog</Heading> <Heading size="lg">The quick brown fox jumps over the lazy dog</Heading> <Heading size="xl">The quick brown fox jumps over the lazy dog</Heading> <Heading size="2xl">The quick brown fox jumps over the lazy dog</Heading> </div>);Truncate
Section titled “Truncate”Headings may be truncated to a specific number of lines by passing a number between 1 and 6 to truncate.
The quick brown fox jumps over the lazy dog
import { Heading } from "stylus-ui/Heading";
export default () => ( <Heading truncate={2} size="lg" className="max-w-[240px]"> The quick brown fox jumps over the lazy dog </Heading>);