Headline

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

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

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>
  );
}

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>
  );
}

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

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

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>
  );
}

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>
  );
}

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

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

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>
  );
}