Headline

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

Usage

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>

Headline Props

Prop	Type	Default
`size`	`"small" \| "medium" \| "large"`	`"small"`
`as`	`"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6"`	`"h2"`
`align`	`"left" \| "center" \| "right"`	`"left"`
`truncate`	`boolean`	`false`
`ariaLabel`	`string`	-
`className`	`string`	-

Examples

Alignment

<Flex direction="column" style={{ width: "100%" }} gap="large">
  <Headline size="small" align="left">
    Left Aligned
  </Headline>
  <Headline size="small" align="center">
    Center Aligned
  </Headline>
  <Headline size="small" align="right">
    Right Aligned
  </Headline>
</Flex>

Truncation

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

Headline

Usage

Headline Props

Examples

Alignment

Truncation

On this page