Skip to content

Overview

The <x-aura::subheading> component renders muted, secondary text designed to appear below headings. It provides consistent typography for descriptions, subtitles, and supporting text throughout your application.

Use subheadings for:

  • Page or section descriptions below <x-aura::heading>
  • Card subtitles
  • Form section explanations
  • Any secondary descriptive text

Basic Usage

Team Members

Manage your team and their account permissions here.

<x-aura::heading :level="2">Team Members</x-aura::heading>
<x-aura::subheading>Manage your team and their account permissions here.</x-aura::subheading>

Props

Prop Type Default Description
size string 'sm' Font size: sm, base, lg
as string 'p' HTML tag to render: p, span, div

Variants / Examples

Sizes

Small subheading (default)

Base size subheading

Large subheading

<x-aura::subheading size="sm">Small subheading</x-aura::subheading>
<x-aura::subheading size="base">Base size subheading</x-aura::subheading>
<x-aura::subheading size="lg">Large subheading</x-aura::subheading>

Inline with Span

Settings — General

<x-aura::heading :level="3">
    Settings <x-aura::subheading as="span" class="ml-2">— General</x-aura::subheading>
</x-aura::heading>

With Heading in a Card

Billing

Update your payment method and billing address.

<x-aura::card>
    <x-aura::heading :level="3" size="lg">Billing</x-aura::heading>
    <x-aura::subheading class="mt-1">Update your payment method and billing address.</x-aura::subheading>
</x-aura::card>

Accessibility

  • Renders semantic <p>, <span>, or <div> depending on the as prop.
  • Uses text-aura-surface-500 for sufficient contrast against both light and dark backgrounds.
  • Pairs naturally with <x-aura::heading> to provide a visual hierarchy that screen readers can follow.