Headline

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

Anatomy

Import and assemble the component:

1import { Headline } from '@raystack/apsara'
2

3<Headline />

API Reference

Prop

Type

Examples

Alignment

1<Flex direction="column" style={{ width: "100%" }} gap="large">
2  <Headline size="small" align="left">
3    Left Aligned
4  </Headline>
5  <Headline size="small" align="center">
6    Center Aligned
7  </Headline>
8  <Headline size="small" align="right">
9    Right Aligned
10  </Headline>
11</Flex>

Weight

1<Flex direction="column" style={{ width: "100%" }} gap="large">
2  <Headline size="t2" weight="regular">
3    Regular Weight Headline
4  </Headline>
5  <Headline size="t2" weight="medium">
6    Medium Weight Headline
7  </Headline>
8</Flex>

Truncation

1<Flex style={{ width: "200px" }}>
2  <Headline size="small" truncate>
3    This is a very long headline that will be truncated with an ellipsis
4  </Headline>
5</Flex>

Accessibility

  • Renders as semantic heading elements (h1–h6) for proper document outline
  • Supports aria-level for custom heading levels