Overview

Headline renders page and section titles with the design system's heading scale — four sizes (t1–t4, default t2) plus weight, align, and truncate props. It outputs an <h2> by default; use the render prop to pick the heading level that fits the document outline. For body copy, labels, and any non-heading text, use Text instead.

Anatomy

Import and assemble the component:

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

API Reference

Renders a heading element with configurable size and weight. Use the render prop to change the heading level or provide a custom render function.

Slots

Every rendered part carries a stable data-slot attribute for styling and testing:

Examples

Alignment

The align prop sets the text alignment within the heading's box. Default is left.

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

Weight

Headlines come in two weights. Default is medium; use regular for a lighter look.

1<Flex direction="column" style={{ width: "100%" }} gap={9}>
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

Set truncate to clip a headline to a single line with an ellipsis when it overflows its container.

1<Flex style={{ width: "200px" }}>
2  <Headline size="t2" 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