Content-Edge Spine

The content-edge spine is the vertical X-coordinate where every page-level WireKit primitive's inline content begins. Top-level wrappers reading --padding-wk-x-lg for their inline padding share this coordinate by default — so a brand logo inside <x-wirekit::brand-bar> sits on the same vertical line as the first paragraph rendered by <x-wirekit::main>, the first column inside <x-wirekit::footer>, the first heading inside <x-wirekit::cta>, and so on.

This page is the canonical contract for spine participation: which components participate, which DON'T, and how to opt a developer-authored custom component into the spine.

#Why the spine matters

Without a shared spine, every page-level component picks its own inline padding. Visually this produces a jagged left edge — the logo flush-left at, say, 1.5 rem, but the first paragraph 2.5 rem in, and the footer columns starting at 1 rem. The eye tracks the misalignment as visual noise.

With the spine, every component reads the SAME --padding-wk-x-lg token. A developer overriding the token in :root {} re-aligns every participant in lockstep. Layout authoring becomes "compose the primitives, set the spine value once, done" instead of per-component pixel tuning.

#Participating components

The YES / OUTER-ONLY / OPT-IN / DIFFERENT-TIER markers are anti-drift enforced — a change to a YES component's Blade template that drops the --padding-wk-x-lg reference fails the upstream build until either the component re-joins the spine OR the table row's marker flips.

#Hero internal layout

The hero is the one ambiguous case in the participant table. Its outer <section> reads --padding-wk-x-lg, so the hero container's left edge aligns with brand-bar / main / footer / etc. above and below — outer-spine participation works as expected.

But INSIDE the hero, the copy / aside flex layout adds its own inner padding (column gap, optional aside max-width). For the balanced (50/50) and lead (60/40) layouts, the hero's <h1> title sits inside an inner flex column whose left edge is one column-gap inboard of the outer section padding. The title text does NOT sit on the spine.

For developers who need hero title text to sit exactly on the spine:

{{-- Use layout="stacked" — removes the inner column-flex padding --}}
<x-wirekit::hero layout="stacked">
    <x-slot:title>Title text sits on the spine</x-slot:title>
    <x-slot:lede>Lede text also spine-aligned.</x-slot:lede>
</x-wirekit::hero>

OR wrap with explicit container control:

{{-- Force the spine by composing inside <x-wirekit::container> --}}
<x-wirekit::container max="xl" padding="lg">
    <h1 class="font-bold text-3xl">Spine-aligned title</h1>
    <p>Spine-aligned lede.</p>
    <x-wirekit::button>Spine-aligned action</x-wirekit::button>
</x-wirekit::container>

The CHANGELOG entry for v2.0.0 said "brand visible-text aligns with article body below" — this is TRUE for body-text-rendered-by-<x-wirekit::main>. It is NOT TRUE for hero's internal title positioning in balanced / lead layouts. The contract documented here makes the asymmetry explicit so future developers don't measure the discrepancy by hand.

#Stability tiers

Each participation marker carries a stability commitment:

#How to extend — developer-authored components

For a developer-authored custom component that wants to join the spine, the canonical path is <x-wirekit::spine-aware> — a thin Blade wrapper that emits the spine padding for you:

<x-wirekit::spine-aware>
    {{-- your content sits on the spine with no manual class wrangling --}}
    <h1>Spine-aligned headline</h1>
    <p>Spine-aligned body.</p>
</x-wirekit::spine-aware>

For more control, use the WireKit::spinePadding(string $tier) 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 options route through the canonical --padding-wk-x-lg token. Hand-typing px-[var(--padding-wk-x-lg)] works too, but the helper protects against tier typos (--padding-wk-x-mg instead of lg) and gives the drift-audit guard a single canonical detection target.

Manual path — for backwards-compatibility with v2.0.x developer code that hand-types the token:

1. Read --padding-wk-x-lg for inline padding. In Blade:

   <div class="px-[var(--padding-wk-x-lg)]">
       {{-- spine-aligned content --}}
   </div>
   

   Copy

2. Don't add inner padding before the first content child. A nested wrapper with its own px-… shifts the visible text off the spine.

3. Reference <x-wirekit::brand-bar>'s blade source as a model. The brand-bar reads --padding-wk-x-lg via its padding="lg" default and applies it consistently across both container-wrapped and edge-to-edge modes — the canonical reference implementation.

4. Developer-tunable. Override --padding-wk-x-lg once in your :root {} block to re-align every participant simultaneously:

   :root {
       --padding-wk-x-lg: 2rem;  /* every spine participant shifts to 2rem inline padding */
   }
   

   Copy

#See Also

• Composition Patterns — Chrome vs. Content — the broader chrome-vs-content axis the spine is one half of.
• Public CSS API — every public wk-* class WireKit emits.
• Theming — Design Token Reference — --padding-wk-x-* token family + override pattern.
• Brand Bar, Main, Container, Footer, CTA, Hero — per-component reference for every spine participant.