Headings

Headings define the visual hierarchy of a page. FrontAlign provides responsive native heading styles and matching utility classes from h1 to h6.

The heading system is designed for modern interfaces: large headings scale fluidly with clamp(), top-level headings use balanced wrapping, and heading color automatically follows the active theme through var(--body-text).

All heading styles are pure CSS and do not require the FrontAlign runtime.

Quick reference

Group	Elements / Classes	Style	Common use
Page heading	`h1`, `.h1`	`fluid size, extra-bold weight`	Hero titles, page titles, landing page headlines.
Section heading	`h2`, `.h2`	`large responsive section title`	Main documentation sections, feature sections, content groups.
Subsection heading	`h3`, `.h3`	`strong card and subsection title`	Cards, feature groups, article subsections.
Block heading	`h4`, `.h4`	`medium heading, semibold weight`	Widgets, compact panels, dashboard blocks.
Compact heading	`h5`, `.h5`	`small semibold heading`	Small sections, labels with hierarchy, nested content.
Eyebrow label	`h6`, `.h6`	`uppercase, letter-spaced label`	Hero labels, section prefixes, pricing and dashboard labels.

Usage

Use semantic headings when the text represents the structure of the page.

<h1>
  Build modern interfaces without framework chaos.
</h1>

<p>
  FrontAlign gives your project a clean and responsive heading system by default.
</p>

Native elements

Use native heading elements whenever possible. They are best for accessibility, SEO, and document structure.

<h1>Page Title</h1>
<h2>Section Title</h2>
<h3>Card Group Title</h3>
<h4>Widget Title</h4>
<h5>Small Section Title</h5>
<h6>Eyebrow Label</h6>

Heading utility classes

Heading utility classes let you apply heading styles without changing the semantic element.

<p class="h1">
  Looks like an h1, but remains a paragraph.
</p>

This is useful when visual hierarchy and semantic hierarchy need to be different.

Available styles

Element / Class	Purpose	Style
`h1` / `.h1`	Hero titles and page titles.	Largest fluid heading with extra-bold weight.
`h2` / `.h2`	Major sections.	Large responsive section heading.
`h3` / `.h3`	Subsections and feature groups.	Strong card and section title.
`h4` / `.h4`	Widgets and content blocks.	Medium heading with semibold weight.
`h5` / `.h5`	Compact sections.	Smaller semibold heading.
`h6` / `.h6`	Eyebrow labels.	Uppercase, letter-spaced label.

Fluid heading scale

FrontAlign headings use responsive sizing.

h1,
.h1 {
  font-size: clamp(2.25rem, 5vw + 1rem, 3.75rem);
}

This allows headings to scale naturally between small and large screens without requiring breakpoint-specific classes.

Balanced headings

Large headings can wrap awkwardly when they span multiple lines. FrontAlign automatically applies balanced text wrapping to h1, h2, and h3.

h1,
.h1,
h2,
.h2,
h3,
.h3 {
  text-wrap: balance;
}

<h1>
  Build modern web interfaces without the framework chaos.
</h1>

Balanced wrapping helps hero titles, section titles, and marketing headings look more polished.

Heading hierarchy

Use headings to create a clear structure.

<main>
  <h1>
    Documentation
  </h1>

  <section>
    <h2>
      Layout
    </h2>

    <article>
      <h3>
        Grid System
      </h3>
    </article>
  </section>
</main>

Examples

Hero heading

<section>
  <span class="h6">
    FrontAlign Framework
  </span>

  <h1>
    Build modern interfaces without framework chaos.
  </h1>

  <p>
    One lightweight engine for utilities, components, runtime behavior, and semantic tokens.
  </p>
</section>

Section header

<section>
  <h2>
    Components
  </h2>

  <p>
    Production-ready building blocks for modern interfaces.
  </p>
</section>

Feature group

<section>
  <h2>
    Everything you need to ship faster.
  </h2>

  <div class="is-grid grid-cols-3 gap-3">
    <article>
      <h3>
        Utilities
      </h3>

      <p>
        Compose interfaces with predictable utility classes.
      </p>
    </article>

    <article>
      <h3>
        Components
      </h3>

      <p>
        Use ready-made UI patterns without losing flexibility.
      </p>
    </article>

    <article>
      <h3>
        Runtime Engine
      </h3>

      <p>
        Add behavior only when your interface needs it.
      </p>
    </article>
  </div>
</section>

Card titles

<div class="border rounded-4 shadow">
  <h3>
    Runtime Intelligence
  </h3>

  <p>
    FrontAlign can power interactive components across CDN, NPM, React, and any stack.
  </p>
</div>

Dashboard example

<div class="border rounded-4 shadow">
  <span class="h6">
    Revenue
  </span>

  <h2>
    $24,800
  </h2>

  <p>
    Monthly recurring revenue
  </p>
</div>

Pricing card

<div class="border rounded-5 shadow-large">
  <h3>
    Pro
  </h3>

  <p class="h2">
    $29
  </p>

  <p>
    Per month
  </p>
</div>

Eyebrow labels

h6 and .h6 are styled as uppercase eyebrow labels. This pattern works well above hero titles, section titles, pricing blocks, and dashboard widgets.

<h6>
  New Release
</h6>

<span class="h6">
  FrontAlign v1.0
</span>

Semantic change

Sometimes you need an element to look like a heading without changing document structure.

<p class="h3">
  Featured Template
</p>

Use this carefully. Prefer semantic headings for real page structure.

Combining with utilities

Combining with font utilities

Heading styles can be combined with font utilities when additional emphasis is needed.

<h1 class="font-black">
  FrontAlign
</h1>

<h2 class="font-extrabold">
  Design system ready.
</h2>

For full typography emphasis controls, see the Font Weight & Style documentation.

Combining with color utilities

<h1 class="text-primary">
  One engine. Every interface.
</h1>

<h2 class="text-slate-900">
  Production-ready by default.
</h2>

Combining with layout utilities

<section class="container">
  <h1>
    Build faster with FrontAlign.
  </h1>

  <p>
    Utilities, components, runtime behavior, and semantic tokens in one engine.
  </p>
</section>

Accessibility

Use headings in order whenever possible.

<h1>Page Title</h1>
<h2>Section</h2>
<h3>Subsection</h3>

Avoid skipping heading levels only for visual reasons. If you need a smaller or larger visual style, use .h1 to .h6 utility classes instead of breaking the semantic structure.

Best practices

Do	Avoid
Use one primary `h1` for each page.	Using multiple unrelated page-level headings.
Use `h2` for major sections.	Skipping levels only because the visual size feels too large.
Use `h3` and `h4` for cards, widgets, and subsections.	Using headings only for decorative text.
Use `h6` or `.h6` for eyebrow labels.	Replacing meaningful headings with generic spans everywhere.
Keep heading text concise and meaningful.	Writing long, unfocused headings that wrap too many lines.

Let FrontAlign's responsive heading scale handle sizing across devices. Use Font Weight & Style utilities only when you need additional emphasis.