---
title: Spine-Aware
description: Opt-in wrapper for developer-authored components that want to join the page-edge content spine
visibility: guest
---

# 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](../extending/spine-contract.md).

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

:::preview{title="Custom block joining the spine via <x-wirekit::spine-aware>"}
<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.

:::preview{title="Tier comparison — every wrapper full-width; the tinted block shows the inline-padding offset"}
<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:

```blade
<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

- [Content-Edge Spine](../extending/spine-contract.md) — the full participation contract.
- [Public CSS API → wk-spine-aware](../extending/public-css-api.md) — emission catalog row.
- [Composition Patterns — Chrome vs. Content](../extending/composition-patterns.md) — broader composition guidance.