Pages and blocks

Every page in Lyra is a list of blocks: a hero, a row of numbers, a donate form, a list of stories. You choose the blocks and their order in the page’s file, and change the words. There’s no page builder to learn and nothing to install.

The block library

Open /blocks/ on the demo, or on your own site while npm run dev is running. It shows all 24 blocks in their 49 variants, live, each with a Copy snippet button. Every block also has its own anchor link, such as /blocks/#donate-panel, and a Copy link button, so you can bookmark or share one.

Adding a block to a page

Pages live in src/content/pages/en/. Open one, find sections:, and paste the snippet as a new item:

---
title: About us
description: Who we are and how we work.
sections:
  - type: page-header
    title: About us
    text: Local people, solving local problems since 2012.
  - type: stats
    variant: band
    items:
      - { value: "312", label: wells built }
      - { value: "1,400", label: teachers trained }
  - type: cta
    variant: band
    tone: brand
    title: Give $25 a month
    actions:
      - { label: Give monthly, href: /donate/ }
---

Indentation matters in YAML: each block starts with - type: at the same depth, and its settings sit two spaces further in. If something is wrong, npm run dev names the page and the field.

Any text written below the closing --- is shown after the blocks in a reading column, which is handy for legal pages.

Making a new page

Create a file, such as src/content/pages/en/volunteer.md, with a title and sections:. It’s published at /volunteer/. Add it to the menu in src/site.config.ts. For the Spanish version, create the same file name in src/content/pages/es/.

Settings every block has

Setting	What it does
type	Which block it is.
variant	Which layout of that block. The library shows every variant.
tone	The section’s background: default, cream, blush, mint, sky, sand, brand or night. brand and night are dark, and the text switches to light automatically.
space	Space above and below: normal, small or none.
id	An anchor name, so you can link to the section: id: volunteer on the Get involved page makes /get-involved/#volunteer.

Alternate tones down a page so each section stands apart.

The blocks

Group	Blocks and variants
Openers	hero (split, overlay, campaign, centered), page-header (simple, image)
Giving	donate (panel, card), campaign (highlight, cards)
Impact	stats (band, grid), spending (donut, bars), reports
Your work	causes (grid, list), events (list, cards), stories (grid, featured)
Content	feature (photo before or after), text (narrow, split), cards (icons, tiles, steps), timeline
People and trust	testimonials (single, grid), team (grid, compact), logos (logos, badges), faq (stacked, split)
Forms	form (split, card), newsletter (band, card), search
Media	gallery (grid, mosaic), video (wide, split)
Calls to action	cta (band, split, card)

Blocks that list your content, such as causes, campaign, events, stories and team, fill themselves from src/content/. You choose how many to show, and sometimes a filter:

- type: stories
  variant: grid
  cause: clean-water   # only stories about this cause
  limit: 3

Buttons

Blocks with buttons take a list of actions, up to three:

actions:
  - { label: Donate now, href: /donate/, icon: heart }
  - { label: See our work, href: /causes/, style: link }

style is primary (the default), accent, highlight, outline, ghost or link. icon is any Lucide icon name.

Small formatting in text

In titles and short texts you can use **bold**, *italic* and [links](/donate/). Wrap words in ==double equals== to give them the yellow highlight used in the home page heading. The text block’s body accepts full Markdown, including lists and ## headings.

Only what’s used is loaded

Each block’s styles are added only to the pages that use it, so a long library of blocks never slows a page down.