Headings

Heading renders text, an optional eyebrow and introduction. Its level controls h1–h6; size is m, l or xl. The default is h2/m. It has no background, page registration or section spacing.

HeadingSection adds the normal Section layout, background, spacing and anchor. It accepts a section using HeadingSectionData (without a required type when used directly). Its visible heading falls back to title. Use headingSize and headingLevel independently.

Optional headline fields remain on all sections, including CarouselSection. Section renders them through Heading, keeping the heading and collection in one semantic region. HeroSection uses Heading too, with xl as its default visual size. Ordinary sections default to l; the content variant defaults to m.

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

<ContentPage page={{ title: 'Field notes' }}>
  <HeadingSection section={{ id: 'page-heading', title: 'Field notes', headingLevel: 1,
    headingSize: 'l', background: { color: 'standard', size: 'standard' } }} />
  <HeadingSection section={{ id: 'chapter', title: 'A new chapter',
    headingLevel: 2, headingSize: 'xl', background: { color: 'muted' } }} />
  <CarouselSection section={{ id: 'projects', title: 'Projects',
    headline: 'Selected projects', headingLevel: 2, headingSize: 'm' }} list={[]} />
</ContentPage>

Place HeadingSection directly inside ContentPage, just like any other section. Choose its background, position and headingLevel explicitly. The page title property is metadata; it does not insert visible content. Use one h1 per page. Only sections at h2 or h3 appear in the right content menu; h3 entries are indented.

Alternatively, place a HeroSection in the same position with headingLevel: 1. Hero size controls the composition height; headingSize controls the text.

Sizes respond to the available container width: m spans 18–24px, l spans 24–32px and xl spans 32–44px. A smaller visual size does not change the heading level. The website uses l for page titles.