Skip to content

Perchford design system

Internal, noindex
LVL-05

Offset level index

Alternate to LVL-01. All four levels as a contents-page index on a twelve-column grid, with deliberate empty space in the left margin.

Untriaged
Open isolated

Use it when

Alternate to LVL-01. All four levels as a contents-page index on a twelve-column grid, with deliberate empty space in the left margin.

Category
Service levels and scope
Layout archetype
Offset grid
Page position
middle (derived)
Purpose
compare (derived)
Field
light (derived)
Interaction
static (derived)
Motifs
Sequence mark

Content it requires

  • serviceLevels from src/data/homeManagement.ts

Do not use it when

  • Shows all four levels including the Home Plan, so it implies they are alternatives. Use LVL-01 where the foundation relationship matters more.
  • Rows shift right on hover. The movement is suppressed under reduced motion.

Variants

None. Colour swaps and mirrored alignment do not count as variants.

Implementation

src/components/patterns/LevelOffsetIndex.astro

---
import LevelOffsetIndex from '../components/patterns/LevelOffsetIndex.astro';
---

<LevelOffsetIndex />

Import directly. Do not route production through patternComponents.

Production usage

Not yet used on a production page. Nothing here has been proven in front of a customer.

Accessibility

  • Verified at 360, 768, 1024, and 1440 with no horizontal overflow.
  • No interactive controls beyond links and buttons inherited from the design system.
  • Colour never carries meaning alone: every state marker is paired with text.
  • Motion respects prefers-reduced-motion.