Pages and sections

Every page is a JSON file containing a list of sections: the hero, a row of features, a pricing table, a contact form… You build a page by listing sections in the order you want them.

Anatomy of a page file#

src/demos/cafe/pages/about.json

{
  "title": "Our story",
  "description": "How a corner café grew with its neighbourhood.",
  "sections": [
    {
      "type": "page-header",
      "title": "Our story",
      "text": "Ten years, three cafés and the same six stools by the window.",
      "image": "placeholder"
    },
    {
      "type": "about",
      "eyebrow": "Since 2016",
      "title": "A corner café that grew with its neighbourhood",
      "text": ["Maya and Theo opened with a second-hand roaster and a borrowed oven."],
      "image": "placeholder",
      "list": ["Roasted in house", "Baked at 6 am", "Free oat milk"]
    },
    {
      "type": "cta",
      "style": "boxed",
      "title": "Come and say hello",
      "buttons": [{ "label": "Find a café", "href": "locations.html" }]
    }
  ]
}

title and description are the page's title and search description (see SEO).
sections is the list. Each section has a type (which block it is) and its own settings.
Every setting of every section type, with an example, is in the section reference.

Change, reorder, hide or remove sections#

Change text: edit the values in quotes and save.
Reorder: cut a whole section (from its { to its matching }) and paste it elsewhere in the list. Mind the commas: sections are separated by a comma, and the last one has none.
Hide temporarily: add "hidden": true to the section.
Remove: delete the section and the comma that separated it.
Add: copy an example from the section reference, or copy a section you like from any other demo's page. Sections work in every demo and take on its colours.

Options every section accepts#

Option	Values	What it does
`tone`	`light`, `alt`, `dark`, `primary`	Background colour; text adapts automatically. Alternate tones for rhythm.
`padding`	`none`, `sm`, `md` (default), `lg`	Space above and below the section.
`id`	a short name, e.g. `"pricing"`	Lets links jump to the section: `"href": "#pricing"`.
`nav`	a label	On demos without a `nav` menu, adds a menu link to this section (needs an `id`).
`fluid`	`true`	Full-width content instead of the centred container.
`class`	CSS class names	Adds your own classes for custom styling.
`hidden`	`true`	Leaves the section out of the page.

Most sections also have a heading made of eyebrow (the small label above), title and text, and many accept "headAlign": "start" to left-align that heading.

Buttons, icons and highlighted words#

JSON

"buttons": [
  { "label": "Book a table", "href": "reservations.html", "icon": "calendar-check" },
  { "label": "See the menu", "href": "menu.html", "style": "outline" }
]

style: primary (default), outline, light, dark, accent or link (text with an arrow).
icon: any Bootstrap Icons name without the bi- prefix, e.g. "rocket-takeoff".
video: instead of href, opens a video pop-up (see Maps and video).
Text can include simple HTML: <em>words</em> shows words in the primary colour (used in many headings), plus <strong> and <br>.

Create a new page#

Copy an existing page file in src/demos/<demo>/pages/ and rename it, e.g. catering.json. The file name becomes the page: catering.html. Use lowercase letters and dashes.
Change its title, description and sections.
Link to it: add { "label": "Catering", "href": "catering.html" } to the menu (Header and menu) or the footer.
Save. With npm run dev running, open http://localhost:3000/<demo>/catering.html.

Common mistakes#

A missing or extra comma, or a missing quote. The terminal names the file and line; see Troubleshooting.
Curly quotes (“ ”) pasted from a word processor. JSON needs straight quotes ".
A type that doesn't exist. The terminal says unknown type; check the spelling against the section reference.