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

Display headings with various sizes and styles.

children

Required

ReactNode

The content of the heading.

---

as

"h2" | "h3" | "h1" | "h4" | "h5" | "h6" = "h2"

The HTML heading element to render.

---

className

string

Custom styles to apply to the heading.

---

size

"sm" | "md" | "lg" | "xl" | "2xl" = "md"

The size of the heading.

---

truncate

3 | 2 | 1 | 4 | 5 | 6 = "undefined"

The number of lines to truncate the heading at.

---

wrap

"wrap" | "nowrap" | "pretty" | "balance" = "wrap"

Controls for wrapping behavior.

---