Hero

Use HeroSection for a prominent introduction or call to action. It combines an optional image with a readable copy area; omit the image for a text-led hero.

svelte

<script>
  import { ContentPage, HeroSection } from '@page-sections/svelte';
</script>

<ContentPage page={{ title: 'The garden project' }}>
  <HeroSection
    section={{
      id: 'welcome',
      title: 'Welcome',
      eyebrow: 'Open to everyone',
      headline: 'Grow something together',
      introduction: 'A shared space for small beginnings.',
      size: 'm',
      textBackground: true,
      image: {
        src: '/images/garden.jpg',
        alt: 'Neighbours working in a garden',
        width: 1200,
        height: 800
      },
      actions: [{ label: 'Plan your visit', href: '/visit' }]
    }}
  >
    <p>No experience needed.</p>
  </HeroSection>
</ContentPage>

Props and configuration

Prop	Type	Default
`section`	`Omit<HeroSectionData, 'type'>`	Required
`children`	`Snippet`	Optional extra content below actions

Section accepts all SectionDefinition fields, with these additions and specific behaviors:

Field	Type	Default / behavior
`image`	`ImageData`	Optional; loaded eagerly
`size`	`'s'`, `'m'`, `'l'`	m; minimum height 18rem, 28rem, 36rem respectively
`textBackground`	`boolean`	true unless explicitly false
`actions`	`ContentAction[]`	Optional native primary/secondary/text links
`composition`	overlay/artwork	overlay; artwork separates text and contained media
`imageSide`	left/right	right for artwork; ignored for overlay
`headline`	`string`	Falls back to title
`eyebrow`, `introduction`	`string`	Rendered in the hero copy
`headingLevel`	`HeadingLevel` (1-6)	Inherits the surrounding level; standalone h2; set headingLevel: 1 for the page title

The outer Section suppresses its duplicate header and references the hero heading for its accessible label. The data-driven discriminator is type: 'hero'.

Styling, responsive behavior and accessibility

Copy uses responsive padding/margins and a maximum width of 44rem. The heading scales from 2rem to 2.75rem at the default xl size. The optional panel mixes --ps-section-standard with transparency; corners use --ps-radius. The image fills the hero's background area, respecting ImageData's fit choice. Content can grow beyond the minimum height.

Provide appropriate image alt text, or alt: '' for decorative imagery. Actions remain native links in SSR HTML. The heading ID is ${section.id}-title. There is no slideshow, autoplay or special client initialization.

Artwork composition stacks text and media below an 840px container, then uses two columns. The image is contained rather than used as a background. Place HeroSection directly in ContentPage with headingLevel: 1 for the page title.

Hero uses the shared Heading component: accent-colored eyebrow, a 12px gap around supporting text and an independent headingSize (m/l/xl, default xl). Actions start 32px below the heading group. The composition size remains independent of the heading size.