Typography

A collection of semantic text and typography components for consistent, accessible, and flexible text rendering. Includes headings, body text, lead, muted, small, strong, emphasis, code, pre, gradient text, blockquotes, and more.

---

Import

import {
  H1, H2, H3, H4, H5, H6,
  Text, Lead, Muted, Small, Strong, Em, Mark, Code, Pre,
  GradientText, Blockquote
} from '@odyssee/components';

---

Headings

Code Éditable

Résultat

---

Text Variants

Code Éditable

Résultat

---

Text Sizes

Code Éditable

Résultat

---

Font Weights

Code Éditable

Résultat

---

Text Alignment

Code Éditable

Résultat

---

Text Transformations

Code Éditable

Résultat

---

Inline Text Elements

Code Éditable

Résultat

---

Code Blocks

Code Éditable

Résultat

---

Gradient Text

Code Éditable

Résultat

---

Blockquotes

Code Éditable

Résultat

---

Line Clamp

Code Éditable

Résultat

---

Props

Headings (H1, H2, H3, H4, H5, H6)

Name	Type	Default	Description
children	node	—	Content of the heading
align	string	—	Text alignment
color	string	—	Text color
weight	string	varies	Font weight
truncate	boolean	false	Truncate with ellipsis
uppercase	boolean	false	Uppercase text
lowercase	boolean	false	Lowercase text
capitalize	boolean	false	Capitalize first letter
lineClamp	number	—	Max lines before truncating
className	string	—	Additional CSS classes
...rest	any	—	Other props

Text

Name	Type	Default	Description
children	node	—	Content of the text
align	string	—	Text alignment
color	string	—	Text color
weight	string	—	Font weight
size	string	'base'	Font size
truncate	boolean	false	Truncate with ellipsis
uppercase	boolean	false	Uppercase text
lowercase	boolean	false	Lowercase text
capitalize	boolean	false	Capitalize first letter
lineClamp	number	—	Max lines before truncating
as	string	'p'	Element tag to render
className	string	—	Additional CSS classes
...rest	any	—	Other props

Lead, Muted, Small

Same props as Text, with preset size and color.

Inline Elements

• Strong: Renders <strong>, bold text.
• Em: Renders <em>, italic text.
• Mark: Renders <mark>, highlighted text.
• Code: Renders <code>, inline code.
• Pre: Renders <pre>, code block.
• Del: Renders <del>, deleted text.
• Ins: Renders <ins>, inserted text.
• Underline: Renders <u>, underlined text.
• Strikethrough: Renders <s>, strikethrough text.

GradientText

Name	Type	Default	Description
from	string	—	Gradient start color
to	string	—	Gradient end color
via	string	—	Optional middle color
direction	string	'tl'	Gradient direction
...Text			All Text props except color

Blockquote

Name	Type	Default	Description
children	node	—	Quote content
cite	string	—	Citation/author
variant	string	'default'	Style variant
className	string	—	Additional CSS classes
...rest	any	—	Other props

---

Accessibility

• All components use semantic HTML tags (<h1>, <p>, <strong>, etc.).
• Headings and text are accessible to screen readers.
• Use Lead, Muted, and Small for visual hierarchy, not for hiding important content.
• Ensure color contrast for readability.

---

Best Practices

• Use semantic headings (H1–H6) for document structure.
• Use Lead for introductory paragraphs.
• Use Muted and Small for secondary or fine print text.
• Use GradientText for decorative headings or highlights.
• Use Blockquote for quotations, with cite for attribution.
• Use truncate and lineClamp for long text in constrained layouts.

---

Subcomponents

• H1, H2, H3, H4, H5, H6: Headings
• Text: Body text
• Lead: Large lead paragraph
• Muted: Muted/secondary text
• Small: Fine print
• Strong, Em, Mark, Code, Pre, Del, Ins, Underline, Strikethrough: Inline elements
• GradientText: Text with gradient overlay
• Blockquote: Quotation with optional citation

---