Your first page · Page Sections

After installation, add a page with a text introduction and a collection of links:

svelte

<script lang="ts">
  import { ContentPage, HeadingSection, RichTextSection, CardGridSection, type ContentPageData } from '@page-sections/svelte';

  const page: ContentPageData = {
    title: 'The reading room',
    breadcrumbs: [{ label: 'Reading room' }]
  };
</script>

<ContentPage {page} showContentMenu>
  <HeadingSection section={{ id: 'title', title: page.title, introduction: 'Guides for curious people.', headingLevel: 1 }} />
  <RichTextSection
    section={{
      id: 'start',
      title: 'Start here',
      headline: 'Make yourself at home',
      body: 'Choose a guide, or explore the **whole collection**.'
    }}
  />
  <CardGridSection
    section={{
      id: 'guides',
      title: 'Guides',
      headline: 'Your next read',
      background: { color: 'muted' }
    }}
    list={[
      { id: 'design', title: 'Designing a small garden', href: '/guides/design' },
      { id: 'seasons', title: 'Understanding the seasons', href: '/guides/seasons' }
    ]}
  />
</ContentPage>

ContentPage creates the document title, breadcrumbs and a page-local section registry. HeadingSection supplies the visible h1 as ordinary content. Sections at h2/h3 contribute their id and title to the optional index. headline controls the visible section heading, so navigation labels can remain short.

Inspect the result with JavaScript disabled after enabling SSR/prerendering in your application. Text and links should already be in the HTML response.

Next, arrange content in columns, add standalone navigation, or describe the page as data.