The building blocks.

The grid has 4, 6, 8 or 12 columns, based on its container width. These blocks stack on small screens and share a row when more room is available.

This section uses the narrow layout, capped at 780px by the default theme. Its grid responds to that smaller container, even on a wide screen.

The section surface uses full width; its content retains the canonical maximum. On the backgrounds page, full-width surfaces keep their content inside the normal page column.

The following two sections come from a typed, serializable PageData object in src/lib/content.ts. Sections chooses the renderer from each record's type.

{
  "type": "richText",
  "id": "data-story",
  "title": "A story from data",
  "headline": "A field guide to slower days",
  "body": "A small collection can start with **plain data**. These sections are rendered by `Sections`, using the same components as the examples above.",
  "background": {
    "color": "standard"
  }
}