Headings

Headings help structure your content with clear visual hierarchy. They come in different levels and sizes to match your content needs.

Basic Usage

Use headings to create a clear content hierarchy. Each heading can be rendered as any HTML heading level (h1-h6).

Basic Headings

100%

Main Heading

Section Heading

Subsection Heading

<div class="space-y-4">
    <byte-heading level="1">Main Heading</byte-heading>
    <byte-heading level="2">Section Heading</byte-heading>
    <byte-heading level="3">Subsection Heading</byte-heading>
  </div>

Sizes

Headings come in three sizes that can be used independently of their semantic level.

Heading Sizes

100%

Small Heading

Medium Heading

Large Heading

<div class="space-y-4">
    <byte-heading size="small">Small Heading</byte-heading>
    <byte-heading size="medium">Medium Heading</byte-heading>
    <byte-heading size="large">Large Heading</byte-heading>
  </div>

With Subheadings

Combine headings with subheadings to provide additional context or description.

Heading with Subheading

100%

Product Features

Everything you need to know about our product

Enterprise Plan

Perfect for growing businesses

<div class="space-y-8">
    <div class="space-y-1">
      <byte-heading level="1">Product Features</byte-heading>
      <byte-subheading>Everything you need to know about our product</byte-subheading>
    </div>

    <div class="space-y-1">
      <byte-heading level="2" size="large">Enterprise Plan</byte-heading>
      <byte-subheading size="large">Perfect for growing businesses</byte-subheading>
    </div>
  </div>

Semantic Structure

Use appropriate heading levels to maintain proper document outline and accessibility.

Semantic Heading Structure

100%

Company Overview

Our Mission

Company mission statement goes here.

Our Values

Innovation

Pushing boundaries in technology

<div class="space-y-6">
    <byte-heading level="1">Company Overview</byte-heading>
    
    <div class="space-y-4">
      <byte-heading level="2">Our Mission</byte-heading>
      <p class="text-zinc-600 dark:text-zinc-400">
        Company mission statement goes here.
      </p>
    </div>
    
    <div class="space-y-4">
      <byte-heading level="2">Our Values</byte-heading>
      <div class="space-y-3">
        <byte-heading level="3">Innovation</byte-heading>
        <byte-subheading>Pushing boundaries in technology</byte-subheading>
      </div>
    </div>
  </div>

API Reference

Heading Properties

Property

Type

Default

Description

level

string

'div'

'1', '2', '3', '4', '5', '6'

size

string

'medium'

'small', 'medium', 'large'

Subheading Properties

Property

Type

Default

Description

size

string

'medium'

'small', 'medium', 'large'

Best Practices

Use heading levels sequentially (don't skip levels)
Include only one h1 heading per page
Keep headings concise and descriptive
Use subheadings to provide additional context
Maintain consistent sizing within each section

Pro tip: Use the level attribute for semantic structure and the size attribute for visual styling.