Component showcase

Testimonials

Review layouts. 4 variants, 4 rendered live.

grid

testimonialsin useOpen live
desktop preview
desktop 1280px
mobile preview
mobile 390px
Files
  • src/components/sections/Testimonials.astro
  • src/components/ui/Byline.astro
How to pin
{
  "variants": {
    "<section id>": "grid"
  }
}

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

Reads
testimonials | testimonials{title,items[{quote,author}]}
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
2+ items

marquee

testimonialsin useOpen live
desktop preview
desktop 1280px
mobile preview
mobile 390px
Files
  • src/components/sections/Testimonials.astro
  • src/components/ui/Byline.astro
How to pin
{
  "variants": {
    "<section id>": "marquee"
  }
}

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

Reads
testimonials | testimonials{title,items[{quote,author}]}
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
3+ items, scrolling

quote

testimonialsin useOpen live
desktop preview
desktop 1280px
mobile preview
mobile 390px
Files
  • src/components/sections/Testimonials.astro
  • src/components/ui/Byline.astro
How to pin
{
  "variants": {
    "<section id>": "quote"
  }
}

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

Reads
testimonials | testimonials{title,items[{quote,author}]}
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
single short quote <=220 chars