HeadlineA typographic component for displaying headings with different sizes and alignments.

Large Headline (32px)

Medium Headline (28px)

Small Headline (24px)

Install the component from your command line.

npm install @raystack/apsara

Anatomy

Import all parts and piece them together.

import { Headline } from '@raystack/apsara/v1'

<Headline size="large" as="h1">
  Large Headline
</Headline>

<Headline size="medium">Medium Headline</Headline>

<Headline size="small" as="h3">
  Small Headline
</Headline>

API Reference

Props

The Headline component accepts the following props:

size: "small" | "medium" | "large" - Controls the size of the headline (default: "small")
- small: 24px
- medium: 28px
- large: 32px
as: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" - HTML heading element to render (default: "h2")
align: "left" | "center" | "right" - Text alignment (default: "left")
truncate: boolean - Enable text truncation with ellipsis
aria-label: string - Accessible label for the headline
className: string - Additional CSS class names