Component token map
Every component split into subcomponents — each with a live, theme-wired sample and the exact token each property reads, the level it sits at, and any exceptions that bypass the system.
{{ lg.label }}
{{ lg.desc }}
Foundation
Page shell
The website-level container every component sits inside. It carries the global theme tokens and the responsive breakpoints — everything below inherits from here.
Page shell.lv-page / .lv-inner
Body text reads --text on a --background page.
Centered, capped at --container-max with the --page-gutter side padding.Theme tokensglobal — every component inherits these
PropertyTokenLevelNotes
{{ r.prop }}{{ r.token }}{{ r.level }}{{ r.note }}
Breakpointswebsite tiers — not per-component
TierTokenLevelNotes
{{ r.prop }}{{ r.token }}{{ r.level }}{{ r.note }}
Component 01
Hero
Full-bleed photo, brand scrims, floating glass perks pane, headline, and the flush info band.
Live specimen<dc-import name="Hero Design"> — the assembled component
Viewport
Hero photo & scrimsbackground + overlay layers
--hero-img · --hero-scrim-left · --hero-scrim-bottom
PropertyTokenLevelNotes
{{ r.prop }}{{ r.token }}{{ r.level }}{{ r.note }}
Headline block.lv-hero-headline
Jenny's BnB
Find us on the mapPropertyTokenLevelNotes
{{ r.prop }}{{ r.token }}{{ r.level }}{{ r.note }}
Glass perks pane.lv-glass-pane · 2 variants
Variant
Dock & boat
Firewood
Lakefront
Pets welcomePropertyTokenLevelNotes
{{ r.prop }}{{ r.token }}{{ r.level }}{{ r.note }}
Info bandflush under hero
2 bedrooms·1 bathroom·Kids and pets welcome
PropertyTokenLevelNotes
{{ r.prop }}{{ r.token }}{{ r.level }}{{ r.note }}
Page selector cardleft rail nav · 2 variants
Variant 1 · Solid fill
{{ it.label }}
Variant 2 · Outline
{{ it.label }}
PropertyTokenLevelNotes
{{ r.prop }}{{ r.token }}{{ r.level }}{{ r.note }}
Component 02
Guide Section
The repeatable guide block. Full live sample below; subsection token maps to be filled in together.
Section containerlive component · .lv-section
PropertyTokenLevelNotes
{{ r.prop }}{{ r.token }}{{ r.level }}{{ r.note }}
Image blocklive component · ImageBlock
full span 6 · 16:9
half span 3 · 16:9
two-thirds span 4 · 2:1
third span 2 · square
PropertyTokenLevelNotes
{{ r.prop }}{{ r.token }}{{ r.level }}{{ r.note }}