Skip to main content
WireKit
Copy for LLM

Spine-Aware

<x-wirekit::spine-aware> is a thin Blade wrapper that emits the canonical spine padding (--padding-wk-x-lg) on its outer <div>. Drop any markup inside and it sits on the same vertical content edge as <x-wirekit::brand-bar>, <x-wirekit::main>, <x-wirekit::footer>, <x-wirekit::cta>, and every other spine participant.

Use this when you're building developer-authored Blade components that need to join the spine without copying the padding boilerplate from one of the first-party components.

Basic Usage

Custom block joining the spine via <x-wirekit::spine-aware>

My custom block

This headline's left edge aligns with every other spine participant on the page.

<x-wirekit::spine-aware>
    <h2 style="font-weight: 700; font-size: 1.5rem;">My custom block</h2>
    <p>This headline's left edge aligns with every other spine participant on the page.</p>
</x-wirekit::spine-aware>

Custom tier

The tier prop reads from the --padding-wk-x-{tier} token family. lg (default) is the canonical spine; other tiers (sm / md / xl) deliberately step off the spine for visually-distinct sections.

The demo below stacks four wrappers at the four tiers. Each wrapper's outer dashed outline marks its full width — every tier spans the same outer width. The solid-tinted inner block traces the content edge AFTER the tier's inline padding is applied. The offset between the dashed line and the tinted block is the inline-padding the tier contributes; that offset is the off-spine distance.

Tier comparison — every wrapper full-width; the tinted block shows the inline-padding offset
sm — narrowest inline padding (off-spine, tighter)
md — medium inline padding (off-spine)
lg — canonical spine (default)
xl — widest inline padding (off-spine, more inset)
<x-wirekit::stack gap="sm">
    <x-wirekit::spine-aware tier="sm" style="outline: 1px dashed #ab35ff; outline-offset: -1px;">
        <div style="background: rgba(171, 53, 255, 0.12); padding: 0.5rem 0.75rem; border-radius: 0.375rem;"><strong>sm</strong> — narrowest inline padding (off-spine, tighter)</div>
    </x-wirekit::spine-aware>
    <x-wirekit::spine-aware tier="md" style="outline: 1px dashed #ab35ff; outline-offset: -1px;">
        <div style="background: rgba(171, 53, 255, 0.12); padding: 0.5rem 0.75rem; border-radius: 0.375rem;"><strong>md</strong> — medium inline padding (off-spine)</div>
    </x-wirekit::spine-aware>
    <x-wirekit::spine-aware tier="lg" style="outline: 1px dashed #ab35ff; outline-offset: -1px;">
        <div style="background: rgba(171, 53, 255, 0.12); padding: 0.5rem 0.75rem; border-radius: 0.375rem;"><strong>lg</strong> — canonical spine (default)</div>
    </x-wirekit::spine-aware>
    <x-wirekit::spine-aware tier="xl" style="outline: 1px dashed #ab35ff; outline-offset: -1px;">
        <div style="background: rgba(171, 53, 255, 0.12); padding: 0.5rem 0.75rem; border-radius: 0.375rem;"><strong>xl</strong> — widest inline padding (off-spine, more inset)</div>
    </x-wirekit::spine-aware>
</x-wirekit::stack>

Helper alternative

For one-off cases that don't warrant a full Blade component, call the helper directly in any class string:

<div class="{{ \Pushery\WireKit\WireKit::spinePadding('lg') }} mt-8 mb-4">
    {{-- spine-aligned content with extra surrounding spacing --}}
</div>

Both paths emit the same px-[var(--padding-wk-x-lg)] utility string and protect against tier typos.

Props

Prop Type Default Description
tier 'sm' | 'md' | 'lg' | 'xl' 'lg' Which --padding-wk-x-* token to read. lg is the canonical page-edge spine; other tiers produce a visually-distinct left edge.
scope string | null null Scoped personalization name.

Keyboard Interaction

Layout wrapper — keyboard interaction is delegated to whatever content the developer passes into the slot.

Design Tokens

Token Used for
--padding-wk-x-lg (default) Spine-aligned inline padding
--padding-wk-x-sm / --padding-wk-x-md / --padding-wk-x-xl Alternative tiers (off-spine)

See Also