Typography

Consistency in typography helps users navigate content with ease. Always use hierarchy to guide attention and improve readability.

Our typography system is built around a set of predefined text styles that provide consistent visual hierarchy and readability across the application. The Text component is the primary way to implement these typographic styles.

Type Scale Overview

Text Variants

Heading Variants

Headings establish the information hierarchy and provide structure to content.

Body Variants

Body text is used for the main content.

Caption Variants

Captions are used for labels and metadata.

Text Colors

Text colors help establish visual hierarchy and convey meaning.

Text Alignment

Control horizontal text alignment.

Text Wrapping

Control how text wraps within containers.

Truncation & Line Clamp

Limit text display with truncation or line clamping.

Usage

import { Text } from '@harnessio/ui/components'

// Variants
<Text variant="heading-hero">Hero</Text>
<Text variant="body-normal">Body text</Text>
<Text variant="caption-light">Caption</Text>

// Colors
<Text color="foreground-1">Primary</Text>
<Text color="success">Success</Text>
<Text color="danger">Error</Text>

// Truncation
<Text truncate>Long text...</Text>
<Text lineClamp={2}>Multi-line...</Text>

// Alignment & Wrapping
<Text align="center">Centered</Text>
<Text wrap="balance">Balanced</Text>

// Custom element
<Text as="h1" variant="heading-hero">Page Title</Text>