Kicker

Uppercase category labels, status indicators, and eyebrow headers placed above primary section titles to establish clear visual context and hierarchy.

Component Syntax

blade

<x-aura::kicker>
    Category Name
</x-aura::kicker>

1. Tone and Contrast Variants

blade

DEFAULT STATUS

DARK CONTRAST

SUBTLE LABEL

<x-aura::kicker variant="default">
    DEFAULT STATUS
</x-aura::kicker>

<x-aura::kicker variant="dark">
    DARK CONTRAST
</x-aura::kicker>

<x-aura::kicker variant="subtle">
    SUBTLE LABEL
</x-aura::kicker>

2. Kickers with Native Icons

blade

AI POWERED

SOC 2 VERIFIED

HIGH SPEED

MODULAR PRIMITIVES

<x-aura::kicker variant="default" icon="sparkles">
    AI POWERED
</x-aura::kicker>

<x-aura::kicker variant="dark" icon="shield-check">
    SOC 2 VERIFIED
</x-aura::kicker>

<x-aura::kicker variant="default" icon="bolt">
    HIGH SPEED
</x-aura::kicker>

<x-aura::kicker variant="dark" icon="cube">
    MODULAR PRIMITIVES
</x-aura::kicker>

3. Size Scales and Letter Spacing

blade

MICRO EYEBROW HEADER

STANDARD SECTION KICKER

FEATURE HEADER CATEGORY

HERO DISPLAY EYEBROW

<x-aura::kicker size="xs">
    MICRO EYEBROW HEADER
</x-aura::kicker>

<x-aura::kicker size="sm">
    STANDARD SECTION KICKER
</x-aura::kicker>

<x-aura::kicker size="md">
    FEATURE HEADER CATEGORY
</x-aura::kicker>

<x-aura::kicker size="lg">
    HERO DISPLAY EYEBROW
</x-aura::kicker>

4. Real World Hero and Card Headers

blade

ENTERPRISE PLATFORM

Scale your infrastructure without friction

Global multi region cloud servers with automated load balancing, zero downtime rollouts, and SOC 2 verified security.

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

    <x-aura::kicker variant="default" icon="sparkles">
        ENTERPRISE PLATFORM
    </x-aura::kicker>

    <x-aura::heading level="2" size="xl">
        Scale your infrastructure without friction
    </x-aura::heading>

    <x-aura::subheading size="md">
        Global multi region cloud servers with automated load balancing, zero downtime rollouts, and SOC 2 verified security.
    </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 kicker component.

Prop	Default	Available Values
as	p	p span h4 h6
size	sm	xs sm md lg
variant	default	default subtle muted primary accent dark positive warning danger
weight	bold	medium semibold bold extrabold
tracking	widest	wide wider widest
uppercase	true	true false
icon	null	Icon name string
align	null	left center right

Aura Wire

Component Library

Kicker

Component Syntax

1. Tone and Contrast Variants

2. Kickers with Native Icons

3. Size Scales and Letter Spacing

4. Real World Hero and Card Headers

Scale your infrastructure without friction

Component Props

Icon Library

Display

Aura Wire