Subheading

Secondary typography designed for section lead paragraphs, feature summaries, card header descriptions, and hero text.

Component Syntax

blade

<x-aura::subheading size="md">
    Section description or lead text.
</x-aura::subheading>

1. Standard Section Subheading

blade

Dashboard Analytics

Monitor your key performance metrics, revenue growth, and active project statistics in real time.

<x-aura::heading level="2" size="md">
    Dashboard Analytics
</x-aura::heading>

<x-aura::subheading size="md">
    Monitor your key performance metrics, revenue growth, and active project statistics in real time.
</x-aura::subheading>

2. Size Scales

blade

2XL Subheading — High impact intro lead summary for key landing page headers.

XL Subheading — Hero section description and prominent callout paragraph.

Large Subheading — Section subtitle for medium feature headers.

Medium Subheading — Standard description for cards and widget headers.

Small Subheading — Compact inline subtitle and metadata description.

<x-aura::subheading size="2xl">
    2XL Subheading — High impact intro lead summary for key landing page headers.
</x-aura::subheading>

<x-aura::subheading size="xl">
    XL Subheading — Hero section description and prominent callout paragraph.
</x-aura::subheading>

<x-aura::subheading size="lg">
    Large Subheading — Section subtitle for medium feature headers.
</x-aura::subheading>

<x-aura::subheading size="md">
    Medium Subheading — Standard description for cards and widget headers.
</x-aura::subheading>

<x-aura::subheading size="sm">
    Small Subheading — Compact inline subtitle and metadata description.
</x-aura::subheading>

3. Color Variants and Weights

blade

Default Muted Subheading (Regular 400)

Accent High Contrast Subheading (Medium 500)

Subtle Light Weight Subheading (Light 300)

Semibold Weight Subheading (Semibold 600)

<x-aura::subheading variant="default" weight="normal">
    Default Muted Subheading (Regular 400)
</x-aura::subheading>

<x-aura::subheading variant="accent" weight="medium">
    Accent High Contrast Subheading (Medium 500)
</x-aura::subheading>

<x-aura::subheading variant="subtle" weight="light">
    Subtle Light Weight Subheading (Light 300)
</x-aura::subheading>

<x-aura::subheading variant="default" weight="semibold">
    Semibold Weight Subheading (Semibold 600)
</x-aura::subheading>

4. Real World Hero Pattern

blade

PRODUCTIVITY PLATFORM

Build faster with modern Blade components

Aura Wire provides unstyled, accessible Livewire design primitives designed to elevate your developer workflow.

<x-aura::card size="2xl" gap="4">

    <x-aura::kicker>
        PRODUCTIVITY PLATFORM
    </x-aura::kicker>

    <x-aura::heading level="1" size="xl">
        Build faster with modern Blade components
    </x-aura::heading>

    <x-aura::subheading size="lg">
        Aura Wire provides unstyled, accessible Livewire design primitives designed to elevate your developer workflow.
    </x-aura::subheading>

    <x-aura::flex align="center" gap="3">

        <x-aura::button variant="primary" iconTrailing="arrow-right">
            Explore
        </x-aura::button>

        <x-aura::button variant="ghost">
            Docs
        </x-aura::button>

    </x-aura::flex>

</x-aura::card>

Component Props

Available properties and configurations for the subheading component.

Prop	Default	Available Values
as	p	p span h2 h3 h4
size	md	xs sm md lg xl 2xl
variant	default	default subtle muted accent primary inverse white
weight	normal	light normal medium semibold bold
align	null	left center right justify
pretty	true	true false
truncate	false	true false
nowrap	false	true false

Aura Wire

Component Library

Subheading

Component Syntax

1. Standard Section Subheading

Dashboard Analytics

2. Size Scales

3. Color Variants and Weights

4. Real World Hero Pattern

Build faster with modern Blade components

Component Props

Heading

Lead

Aura Wire