Heading

Usage

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

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>
);

Size

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

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>
);

API Reference

Heading

Prop	Type	Default
children	ReactNode
as	"h1""h2""h3""h4""h5""h6"	"h2"
className	string
size	"sm""md""lg""xl""2xl"	"md"
truncate	123456
wrap	"wrap""nowrap""pretty""balance"	"wrap"