Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/raystack/apsara/llms.txt

Use this file to discover all available pages before exploring further.

The Headline component provides semantic heading elements with consistent styling and flexible size options. It supports different heading levels while maintaining visual hierarchy.

​
Basic usage

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

function PageTitle() {
  return <Headline>Welcome to the Dashboard</Headline>;
}

​
Props

​
size
't1' | 't2' | 't3' | 't4' | 'small' | 'medium' | 'large'
default:"'t2'"
Visual size of the headline. Use 't1' | 't2' | 't3' | 't4' for recommended sizes.
​
weight
'regular' | 'medium'
default:"'medium'"
Font weight of the headline.
​
align
'left' | 'center' | 'right'
default:"'left'"
Text alignment.
​
truncate
boolean
default:"false"
Whether to truncate text with ellipsis when it overflows.
​
as
'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
default:"'h2'"
The semantic HTML element to render.
​
className
string
Additional CSS classes to apply.
​
children
ReactNode
The headline content.

​
Sizes

Use the t1 through t4 sizes for consistent typography hierarchy. 
import { Headline } from '@raystack/apsara';

function HeadlineSizes() {
  return (
    <div>
      <Headline size="t1">Title 1 - Largest</Headline>
      <Headline size="t2">Title 2 - Default</Headline>
      <Headline size="t3">Title 3</Headline>
      <Headline size="t4">Title 4 - Smallest</Headline>
    </div>
  );
}

​
Semantic HTML

Separate visual presentation from semantic meaning using the as prop. 
import { Headline } from '@raystack/apsara';

function SemanticHeadlines() {
  return (
    <article>
      <Headline as="h1" size="t1">
        Page Title
      </Headline>
      
      <Headline as="h2" size="t3">
        Section Heading
      </Headline>
      
      {/* Visually large but semantically h3 */}
      <Headline as="h3" size="t2">
        Subsection
      </Headline>
    </article>
  );
}

​
Font weights

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

function HeadlineWeights() {
  return (
    <div>
      <Headline weight="regular">Regular Weight</Headline>
      <Headline weight="medium">Medium Weight</Headline>
    </div>
  );
}

​
Text alignment

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

function AlignedHeadlines() {
  return (
    <div>
      <Headline align="left">Left Aligned</Headline>
      <Headline align="center">Center Aligned</Headline>
      <Headline align="right">Right Aligned</Headline>
    </div>
  );
}

​
Truncated text

Prevent long headlines from breaking layout. 
import { Headline } from '@raystack/apsara';

function TruncatedHeadline() {
  return (
    <div style={{ maxWidth: '300px' }}>
      <Headline truncate>
        This is a very long headline that will be truncated with an ellipsis
      </Headline>
    </div>
  );
}

​
Page header

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

function PageHeader() {
  return (
    <header>
      <Headline as="h1" size="t1" align="center">
        Documentation
      </Headline>
    </header>
  );
}

​
Card title

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

function CardTitle() {
  return (
    <div className="card">
      <Headline as="h3" size="t3">
        Feature Overview
      </Headline>
      <p>Card content goes here...</p>
    </div>
  );
}

​
Accessibility

  • Use semantic heading levels (h1 through h6) in logical order
  • Don’t skip heading levels (e.g., don’t jump from h2 to h4)
  • Use the as prop to maintain semantic structure while achieving desired visual hierarchy
  • Ensure sufficient color contrast for readability

​
Related components

  • Text - For body text and inline content

Build docs developers (and LLMs) love

Get started for freeTalk to us