Typography

Semantic text component with variant-driven styles. Supports headings, paragraphs, lead text, blockquotes, and more.

Import

import { Typography } from "poyraz-ui/atoms";

Headings

Four heading levels with bold tracking-tight styles.

Heading 1

Heading 2

Heading 3

Heading 4

<Typography variant="h1">Heading 1</Typography>
<Typography variant="h2">Heading 2</Typography>
<Typography variant="h3">Heading 3</Typography>
<Typography variant="h4">Heading 4</Typography>

Body Text

Regular paragraph text. The quick brown fox jumps over the lazy dog.

Lead text for introductions.

Large text.

Small text.

Muted / supporting text.

<Typography variant="p">Regular paragraph text.</Typography>
<Typography variant="lead">Lead text for introductions.</Typography>
<Typography variant="large">Large text.</Typography>
<Typography variant="small">Small text.</Typography>
<Typography variant="muted">Muted / supporting text.</Typography>

Blockquote

Design is not just what it looks like — design is how it works.

<Typography variant="blockquote">
  Design is not just what it looks like — design is how it works.
</Typography>