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>

Secondary Font

Use the secondaryFont prop to apply the secondary font (Agbalumo by default). Great for decorative headings and brand text.

Decorative Heading

Secondary Font H2

Secondary Font H3

Paragraph with secondary font.

<Typography variant="h1" secondaryFont>Decorative Heading</Typography>
<Typography variant="h2" secondaryFont>Secondary Font H2</Typography>
<Typography variant="h3" secondaryFont>Secondary Font H3</Typography>
<Typography variant="p" secondaryFont>Paragraph with secondary font.</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>