Component showcase

Stats

Number rows. 2 variants, 2 rendered live.

plain

statsin useOpen live
desktop preview
desktop 1280px
mobile preview
mobile 390px
Files
  • src/components/sections/Stats.astro
  • src/lib/stat-value.ts
How to pin
{
  "variants": {
    "<section id>": "plain"
  }
}

yes: theme.json variants[<section.id>]="plain" (SectionList passes extras.variants as pinned). Not validated: a wrong id for the kind falls to the component default

Reads
stats | stats{title?,items[{value,label}]}
Used by
not tracked (layout is seeded per site)
Quality gates
22 codes

sections (about/services/stats/faq/testimonials): plain-section thin-card empty-cards empty-area layout-imbalance misaligned-columns short-text-columns text-wall text-fragment headline-is-paragraph heading-truncated duplicate-heading eyebrow-equals-title duplicate-section duplicate-title flattened-list orphan-numbering related-sections-apart placeholder-icon-tile card-no-art empty-art-panel repeated-image

Selected by
planLayout (components/variants.ts): optionsFor(section) eligibility; a family cycles through unused layouts first; pick(seed, kind:index). Precedence: theme.json variants[sectionId] (facts.pinned, NOT validated against eligibility) > effect registry forced variants (only if eligible) > seeded

emphasis

statsin useOpen live
desktop preview
desktop 1280px
mobile preview
mobile 390px
Files
  • src/components/sections/Stats.astro
  • src/lib/stat-value.ts
How to pin
{
  "variants": {
    "<section id>": "emphasis"
  }
}

yes: theme.json variants[<section.id>]="emphasis" (SectionList passes extras.variants as pinned). Not validated: a wrong id for the kind falls to the component default

Reads
stats | stats{title?,items[{value,label}]}
Used by
not tracked (layout is seeded per site)
Quality gates
22 codes

sections (about/services/stats/faq/testimonials): plain-section thin-card empty-cards empty-area layout-imbalance misaligned-columns short-text-columns text-wall text-fragment headline-is-paragraph heading-truncated duplicate-heading eyebrow-equals-title duplicate-section duplicate-title flattened-list orphan-numbering related-sections-apart placeholder-icon-tile card-no-art empty-art-panel repeated-image

Selected by
planLayout (components/variants.ts): optionsFor(section) eligibility; a family cycles through unused layouts first; pick(seed, kind:index). Precedence: theme.json variants[sectionId] (facts.pinned, NOT validated against eligibility) > effect registry forced variants (only if eligible) > seeded
Notes
bigger counters; forced by shader-gradient