Component showcase

About

About and text-section layouts. 6 variants, 6 rendered live.

split

aboutin useOpen live
desktop preview
desktop 1280px
mobile preview
mobile 390px
Files
  • src/components/sections/About.astro
  • src/components/sections/about/AboutText.astro
  • src/components/ui/LongCopy.astro
  • src/components/ui/SplitWords.astro
  • src/components/ui/Downloads.astro
How to pin
{
  "variants": {
    "<section id>": "split"
  }
}

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

Reads
about|text | about{title,body,image?,greeting?,quote?,values?[],downloads?[{label,href}],links?[]} / text{title,body,image?,downloads?,links?}
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
half-width photo beside copy (needs image)

overlap

aboutin useOpen live
desktop preview
desktop 1280px
mobile preview
mobile 390px
Files
  • src/components/sections/About.astro
  • src/components/sections/about/AboutText.astro
  • src/components/ui/LongCopy.astro
  • src/components/ui/SplitWords.astro
  • src/components/ui/Downloads.astro
How to pin
{
  "variants": {
    "<section id>": "overlap"
  }
}

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

Reads
about|text | about{title,body,image?,greeting?,quote?,values?[],downloads?[{label,href}],links?[]} / text{title,body,image?,downloads?,links?}
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
glass copy card over photo (short copy + image)

sticky

aboutin useOpen live
desktop preview
desktop 1280px
mobile preview
mobile 390px
Files
  • src/components/sections/About.astro
  • src/components/sections/about/AboutText.astro
  • src/components/ui/LongCopy.astro
  • src/components/ui/SplitWords.astro
  • src/components/ui/Downloads.astro
How to pin
{
  "variants": {
    "<section id>": "sticky"
  }
}

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

Reads
about|text | about{title,body,image?,greeting?,quote?,values?[],downloads?[{label,href}],links?[]} / text{title,body,image?,downloads?,links?}
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
sticky heading column + copy; default for no-photo or long copy

statement

aboutin useOpen live
desktop preview
desktop 1280px
mobile preview
mobile 390px
Files
  • src/components/sections/About.astro
  • src/components/sections/about/AboutText.astro
  • src/components/ui/LongCopy.astro
  • src/components/ui/SplitWords.astro
  • src/components/ui/Downloads.astro
How to pin
{
  "variants": {
    "<section id>": "statement"
  }
}

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

Reads
about|text | about{title,body,image?,greeting?,quote?,values?[],downloads?[{label,href}],links?[]} / text{title,body,image?,downloads?,links?}
Used by
losvallessalud (pinned)
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
giant word-by-word statement; short copy, no photo; never for priced copy

banner

aboutin useOpen live
desktop preview
desktop 1280px
mobile preview
mobile 390px
Files
  • src/components/sections/About.astro
  • src/components/sections/about/AboutText.astro
  • src/components/ui/LongCopy.astro
  • src/components/ui/SplitWords.astro
  • src/components/ui/Downloads.astro
How to pin
{
  "variants": {
    "<section id>": "banner"
  }
}

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

Reads
about|text | about{title,body,image?,greeting?,quote?,values?[],downloads?[{label,href}],links?[]} / text{title,body,image?,downloads?,links?}
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
text stacked over a wide image band; also forced by About.astro when the image is a whole banner

text (runtime layout)

aboutin useOpen live
desktop preview
desktop 1280px
mobile preview
mobile 390px
Files
  • src/components/sections/about/AboutText.astro
How to pin
{
  "variants": {
    "<section id>": "text"
  }
}

not a planned variant (not in AboutVariant)

Reads
about|text | as about
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
emitted by About.astro as data-about-layout=text when copy has no photo to show; data-about-layout=location when the title is a location title (MapPanel)
Notes
Most common layout in built dist