Component showcase

Team and media

Team, video, list, CV, location, highlight and downloads sections. 7 variants, 7 rendered live.

grid

teamin useOpen live
desktop preview
desktop 1280px
mobile preview
mobile 390px
Files
  • src/components/sections/Team.astro
  • src/components/ui/Avatar.astro
  • src/components/sections/health/HealthTeam.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
team | team{title,intro,items[{name,role,credentials[],license,image?,avatar?}]}
Used by
losvallessalud (pinned)
Quality gates
4 codes

team: team-missing-photo initials-with-photo person-page-in-explorer team-photo-gallery

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
only layout; health sites use HealthTeam

video

media-sectionin useOpen live
desktop preview
desktop 1280px
mobile preview
mobile 390px
Files
  • src/components/sections/VideoSection.astro
How to pin

nothing to pin

Reads
video | video{title,intro,videos[{provider,id,url,title,sources}]}
Used by
not tracked (layout is seeded per site)
Quality gates
23 codes

video: dropped-video

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
single layout (MediaVariant default); the planner always returns default

list

media-sectionin useOpen live
desktop preview
desktop 1280px
mobile preview
mobile 390px
Files
  • src/components/sections/ListSection.astro
How to pin

nothing to pin

Reads
list | list{title,intro,role(accepted-insurance|generic|table),items[string],table?,hrefs?}; plain on catalogue routes; uses ui/ItemRows
Used by
not tracked (layout is seeded per site)
Quality gates
23 codes

video: dropped-video

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
single layout (MediaVariant default); the planner always returns default

cv

media-sectionin useOpen live
desktop preview
desktop 1280px
mobile preview
mobile 390px
Files
  • src/components/sections/CvSection.astro
How to pin

nothing to pin

Reads
cv | cv{title,intro,image?,groups[{title,entries[{year,title,detail}]}]}
Used by
not tracked (layout is seeded per site)
Quality gates
23 codes

video: dropped-video

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
single layout (MediaVariant default); the planner always returns default

location

media-sectionin useOpen live
desktop preview
desktop 1280px
mobile preview
mobile 390px
Files
  • src/components/sections/LocationSection.astro
How to pin

nothing to pin

Reads
location | location{title,intro,place,area,hours}; usually theme-injected by withLocationSection beside the map
Used by
not tracked (layout is seeded per site)
Quality gates
23 codes

video: dropped-video

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
single layout (MediaVariant default); the planner always returns default

highlight

media-sectionin useOpen live
desktop preview
desktop 1280px
mobile preview
mobile 390px
Files
  • src/components/sections/Highlight.astro
How to pin

nothing to pin

Reads
highlight | highlight{title,kicker,items[{title,image?}],cta?}
Used by
not tracked (layout is seeded per site)
Quality gates
23 codes

video: dropped-video

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
single layout (MediaVariant default); the planner always returns default

downloads

media-sectionin useOpen live
desktop preview
desktop 1280px
mobile preview
mobile 390px
Files
  • src/components/sections/Downloads.astro
How to pin

nothing to pin

Reads
downloads | downloads{title,intro,items[{title,href,type,size,external,image?}]}
Used by
not tracked (layout is seeded per site)
Quality gates
23 codes

video: dropped-video

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
single layout (MediaVariant default); the planner always returns default