Typography

Component

Text

Versatile body typography component supporting semantic color variants, font size scales, custom weights, line clamping, and monospace strings.

Component Syntax

blade

<x-aura::text size="sm">
    Body paragraph content.
</x-aura::text>

1. Text Tone Variants

blade

Default Primary Body Text

Subtle Secondary Description Text

Accent Bold Highlight Text

Muted Supplementary Annotation Text

Monospace System Log and Key String

<x-aura::text size="sm" variant="default">
    Default Primary Body Text
</x-aura::text>

<x-aura::text size="sm" variant="subtle">
    Subtle Secondary Description Text
</x-aura::text>

<x-aura::text size="sm" variant="accent">
    Accent Bold Highlight Text
</x-aura::text>

<x-aura::text size="sm" variant="muted">
    Muted Supplementary Annotation Text
</x-aura::text>

<x-aura::text size="sm" variant="mono">
    Monospace System Log and Key String
</x-aura::text>

2. Text Size Scales

blade

2XL Text — Extra large high emphasis lead intro paragraph.

XL Text — Large intro summaries and featured highlights.

Large Text — Section lead paragraphs and sub headlines.

Medium Text — Standard 16px body paragraph font size.

Small Text — 14px default body font size for cards, forms, and lists.

Extra Small Text — 12px secondary metadata, timestamps, and captions.

2XS Text — 11px micro labels, badge annotations, and tight tables.

<x-aura::text size="2xl">
    2XL Text — Extra large high emphasis lead intro paragraph.
</x-aura::text>

<x-aura::text size="xl">
    XL Text — Large intro summaries and featured highlights.
</x-aura::text>

<x-aura::text size="lg">
    Large Text — Section lead paragraphs and sub headlines.
</x-aura::text>

<x-aura::text size="md">
    Medium Text — Standard 16px body paragraph font size.
</x-aura::text>

<x-aura::text size="sm">
    Small Text — 14px default body font size for cards, forms, and lists.
</x-aura::text>

<x-aura::text size="xs">
    Extra Small Text — 12px secondary metadata, timestamps, and captions.
</x-aura::text>

<x-aura::text size="2xs">
    2XS Text — 11px micro labels, badge annotations, and tight tables.
</x-aura::text>

3. Font Weights and Clamping

blade

Light Weight Text (300)

Normal Weight Text (400)

Medium Weight Text (500)

Semibold Weight Text (600)

Bold Weight Text (700)

Extrabold Weight Text (800)

Black Weight Text (900)

Aura Wire is a comprehensive UI design system built for modern Laravel and Livewire applications. It provides production grade Blade components, accessible form primitives, customizable overlays, interactive data displays, and polished documentation templates.

<x-aura::text weight="light">
    Light Weight Text (300)
</x-aura::text>

<x-aura::text weight="normal">
    Normal Weight Text (400)
</x-aura::text>

<x-aura::text weight="medium">
    Medium Weight Text (500)
</x-aura::text>

<x-aura::text weight="semibold">
    Semibold Weight Text (600)
</x-aura::text>

<x-aura::text weight="bold">
    Bold Weight Text (700)
</x-aura::text>

<x-aura::text weight="extrabold">
    Extrabold Weight Text (800)
</x-aura::text>

<x-aura::text weight="black">
    Black Weight Text (900)
</x-aura::text>

<x-aura::text size="sm" :clamp="2">
    Aura Wire is a comprehensive UI design system built for modern Laravel and Livewire applications. It provides production grade Blade components, accessible form primitives, customizable overlays, interactive data displays, and polished documentation templates.
</x-aura::text>

4. Real World Meta Card Pattern

blade

System Configuration

ONLINE

API Secret Key

sk_live_99f2a4b87e21x81a

Digest Hash

e3b0c44298fc1c149afbf4c8

Last Rotation

Active (Rotated 2d ago)

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

    <x-aura::flex align="center" justify="between">

        <x-aura::heading level="3" size="md">
            System Configuration
        </x-aura::heading>

        <x-aura::badge variant="positive" size="md">
            ONLINE
        </x-aura::badge>

    </x-aura::flex>

    <x-aura::flex direction="col" align="stretch" gap="2.5">

        <x-aura::flex align="center" justify="between">

            <x-aura::text size="sm" variant="subtle" weight="medium">
                API Secret Key
            </x-aura::text>

            <x-aura::text size="sm" variant="mono">
                sk_live_99f2a4b87e21x81a
            </x-aura::text>

        </x-aura::flex>

        <x-aura::flex align="center" justify="between">

            <x-aura::text size="sm" variant="subtle" weight="medium">
                Digest Hash
            </x-aura::text>

            <x-aura::text size="sm" variant="mono">
                e3b0c44298fc1c149afbf4c8
            </x-aura::text>

        </x-aura::flex>

        <x-aura::flex align="center" justify="between">

            <x-aura::text size="sm" variant="subtle" weight="medium">
                Last Rotation
            </x-aura::text>

            <x-aura::text size="sm" variant="default" weight="medium">
                Active (Rotated 2d ago)
            </x-aura::text>

        </x-aura::flex>

    </x-aura::flex>

</x-aura::card>

Component Props

Available properties and configurations for the text component.

Prop	Default	Available Values
as	p	p span label small strong em label
size	sm	2xs xs sm md lg xl 2xl
variant	default	default subtle muted accent primary secondary positive warning danger info mono white inverse
weight	normal	light normal medium semibold bold extrabold black
align	null	left center right justify
truncate	false	true false
nowrap	false	true false
italic	false	true false
pretty	false	true false
clamp	null	1 2 3 4 5 6
tracking	null	tighter tight normal wide wider widest

Aura Wire

Component Library

Text

Component Syntax

1. Text Tone Variants

2. Text Size Scales

3. Font Weights and Clamping

4. Real World Meta Card Pattern

System Configuration

Component Props

Lead

Blockquote

Aura Wire