Section Layouts

Skill level: Beginner · Time: 1 minute per section

Nine Ecozen sections can be drawn in more than one way: the hero, about, services, benefits, results, how it works, testimonials, service area, and call to action sections. The blog preview has three card styles, and the FAQ switches to a grouped layout when you give it topics. You pick a layout with a single line:

options:
  layout: "stack"

Where To Set A Layout

Set it in…	It applies to…
The section file, `src/content/sections/<language>/<section>.md`	Every page that uses the section without its own layout
A page block, for example `benefitsSection:` in a page file	That page only

Set it in every language folder.

Copy the value from the comment next to layout: or from the catalog below. Section files have no schema, so npm run astro-check doesn’t report a misspelled value there. The section then falls back to its first (default) layout. Open the page to check it. In page blocks of files with a schema (for example homepage/english/home-two.md), astro-check reports a wrong value.

Preview Layouts Before You Choose

The four homepages are your preview for most layouts, and three inner pages show the rest: the testimonials wall on /about/, the call to action split on /pricing/, and the service area regions on /contact/. The table at the end of this page shows which page uses which. Pick what you like, then copy the options.layout line (and any fields that layout needs) from that page’s file in src/content/.

Layout Catalog

The first value of each section is its default.

Hero

File: hero-section.md · Block: heroSection

Layout	What it looks like
`photo`	A full-screen photo behind the headline, text, buttons, and a star rating. With `slides`, the photos crossfade with a slow zoom and named tabs run along the bottom; without them, one still photo with a row of facts along the bottom
`split`	A light surface with a small eyebrow, the headline, text, buttons, and a row of key figures on the left, and a tall framed photo on the right
`panel`	A dark panel with the eyebrow and headline on the left and the text and buttons on the right, then a row of photo tiles with captions. The tile under the pointer widens and shows its caption
`form`	A solid block in the deep green brand color (`--color-secondary`) with the headline, text, a check list, a price line, and an optional wide photo on the left, and a quote form card on the right

Options of the hero, by layout:

Option	Layout	What it does
`buttons`	All	A list of buttons. The demo homes add a second, outlined one, for example with `class: "btn-outline-transparent border ..."` on a dark background or `class: "btn-outline-primary border"` on a light one
`image`, `imageAlt`	`photo`, `split`, `form`	The background photo (`photo` without slides), the tall framed photo (`split`), or the wide photo under the copy (`form`). `panel` uses `tiles` instead
`badge`	`split`, `panel`	A small eyebrow above the headline
`rating`	`photo`	Stars with a `value` (“4.9”) and a `label` (“From 600+ customer reviews”). Set `value: ""` to hide it. `avatars` adds small round photos before the stars, each `{ image, alt }`; it ships empty, so use real customer portraits or leave it empty
`slides`	`photo`	Slides, each `{ label, title, description, image, imageAlt }`. `label` names its tab. With two or more slides, the slide tabs replace the `facts` row. Set `slides: []` for one still photo with `title`, `description`, and `image`
`options.interval`	`photo`	How long each slide stays, in milliseconds. Default `7000`
`facts`	`photo`	Short facts along the bottom of the photo, each `{ icon, label }` with a Lucide icon name. Only shown without slides
`stats`	`split`	Key figures in a row under the buttons, each `{ value, label }`. The values count up (see Animations), so write each one as a number with an optional prefix or suffix, such as `"350+"` or `"62%"`
`tiles`	`panel`	Photo tiles, each `{ image, imageAlt, caption }`. Three fit one row. The first tile is wider until the pointer moves over another one. On phones the tiles stack and every caption shows
`checklist`	`form`	A list of short lines with check marks under the description
`price`	`form`	One line under the check list. Markdown: `$1,190` is highlighted
`formCard`	`form`	The quote form card: `enable`, `title`, `description`, and a `form`

# The photo hero with slides, as on /
heroSection:
  options:
    layout: "photo"
    interval: 7000 # milliseconds per slide
  slides:
    - label: "Rooftop solar"
      title: "Clean solar power for homes and businesses"
      description: "Rooftop solar, battery storage, and EV charging..."
      image: "/images/photos/hero-unsplash-IwY-27ceRCA.jpg"
      imageAlt: "Rows of solar panels in farmland under a clear sky"
    - label: "Home batteries"
      title: "Keep the lights on after the sun goes down"
      image: "/images/photos/wide-benefits-unsplash-1Ot6gN266sA.jpg"
      imageAlt: "Aerial view of a modern house with solar panels on the roof"

The main homepage sets its slides in hero-section.md. Each slide changes the photo, headline, and text; the buttons and rating stay. The progress bar of the active tab fills over interval, then the next slide shows. Visitors can click a tab, use the left and right arrow keys on a tab, or swipe on a touch screen. The slides pause while the pointer is on the tabs, while a tab, button, or link in the hero has focus, and after a click on the pause button. With reduced motion on, slides don’t change on their own and the pause button is hidden: the tabs still switch them.

# The split hero, as on /home-two/
heroSection:
  options:
    layout: "split"
  badge: "Commercial and farm solar"
  title: "Solar for buildings that work hard"
  image: "/images/photos/service-commercial-unsplash-aQOzmgcT6sI.jpg"
  imageAlt: "Rows of solar panels on a flat commercial roof"
  stats:
    - value: "350+"
      label: "Business sites installed"
    - value: "5.5"
      label: "Years average payback"

# The panel hero, as on /home-three/
heroSection:
  options:
    layout: "panel"
  tiles:
    - image: "/images/photos/hero-unsplash-baXCV2qg9Ew.jpg"
      imageAlt: "Wind turbines on rolling green farmland"
      caption: "Onshore wind, 6 to 60 MW"

# The form hero, as on /home-four/
heroSection:
  options:
    layout: "form"
  buttons: []
  checklist:
    - "Fitted in about 4 hours"
    - "Works with your solar"
  price: "Wallbox from **$1,190** fitted"
  image: "/images/photos/service-wallbox-unsplash-AbjcC_stuXs.jpg" # wide photo under the copy
  imageAlt: "Wall charger with a coiled cable beside a white car"
  formCard:
    enable: true
    title: "Get a charger quote"
    description: "A fixed price within one working day."
    form:
      emailSubject: "New charger quote request from the website"
      submitButton:
        enable: true
        label: "Get my quote"
      inputs:
        - label: "Postcode"
          name: "Postcode"
          required: true
        # ...more fields, then the success and error message items

The form uses the same fields as the quote form on /contact/ (see Forms), sends through contactFormAction and contactFormProvider, and works next to other forms on the same page. Keep the two message items (note: success and note: deprecated) at the end of inputs.

Pair each hero with a header layout (see Header): photo and panel sit well under the transparent or floating header, as on / and /home-three/; split and form sit under a solid header such as classic or promo, as on /home-two/ and /home-four/.

About

File: company-section.md · Block: companySection

Layout	What it looks like
`default`	Title and text, two photos (`smallImage` and `image`), and two features with icons
`cards`	Title and text beside text cards (`cards`), for example “Our mission” with a check list and “Our vision”

Services

File: services-section.md · Block: servicesSection

Layout	What it looks like
`band`	Glass cards over a full-width background photo (`image`). As it scrolls into view, the band opens from an inset card to full width (not on `/services/`, where it is the page header)
`list`	Photo cards on white

options.limit sets how many services show (4 on the homepages). The cards come from src/content/services/.

Benefits

File: benefits-section.md · Block: benefitsSection

Layout	What it looks like
`grid`	Cards in a row, each with a plain icon, a title, and a short text
`stack`	Large cards, each with its own photo (`image` and `imageAlt` per item), that stack as you scroll. A card shrinks and dims as the next one slides over it

In both layouts, the section’s own image adds a wide photo under the cards, with a scrolling marquee (marquee) and an optional video button (video) on it. Set image: "" to hide the photo and the marquee with it, as /home-two/ does.

Results

File: impact-section.md · Block: impactSection

Layout	What it looks like
`panel`	A dark rounded panel with the statistics
`split`	A photo with a caption card (`image`, `imageCaption`) beside a list of statistics
`cards`	A dark panel with the heading and text on top and a row of white statistic cards below. Four `stats` fill the row, as on `/home-three/`

How It Works

File: process-section.md · Block: processSection

Layout	What it looks like
`steps`	A row of numbered cards (1, 2, 3), each with its title, text, `meta` note, and optional photo. A line draws across the top of the cards as they scroll into view
`timeline`	A numbered list beside a sticky photo (the section’s `image` and `imageAlt`)

Testimonials

File: testimonial-section.md · Block: testimonialSection

Layout	What it looks like
`slider`	A centered heading and a row of review cards with previous and next arrows
`quote`	The heading on the left and one large quote card on the right, with arrows to move between reviews
`wall`	A centered heading with the rating line, then every review as a card in a masonry grid of two or three columns. Each card shows its own stars, the quote, the name and role, and the `system` as a pill. No arrows and no JavaScript

All layouts show the summary rating line (rating and label) when summary.rating is set, and options.limit reviews (6 by default). The wall cards take their stars from each review’s customer.rating (1 to 5, default 5) and don’t show the review photo.

The about page uses wall. In src/content/about-us/english/-index.md:

testimonialSection:
  options:
    layout: "wall"   # slider | quote | wall
  badge: "Reviews"
  title: "In our customers’ words"

The reviews come from src/content/testimonial/english/-index.md. A page block can bring its own reviews instead, with a list, as /home-three/ does for its partner quotes:

testimonialSection:
  enable: true
  options:
    layout: "quote"
  summary:
    rating: ""        # hides the rating line
  list:               # replaces the testimonial collection on this page
    - content: "The rent arrives every quarter, and the sheep still graze the field."
      image: ""       # optional photo, slider layout only
      customer:
        name: "Gareth Lewis"
        role: "Landowner"
        system: "32 MW solar park"

Service Area

File: coverage-section.md · Block: coverageSection

Layout	What it looks like
`list`	The towns in `areas` as a check-mark list in two or three columns
`pills`	The towns in `areas` as rounded tags that wrap
`regions`	The towns grouped by region: one column per region in `regions`, each with its name as a heading and its towns below. Without a photo (`image: ""`), the regions sit side by side in four columns on large screens

options.imagePosition (left or right) places the photo in every layout. The fields are in Sections.

Call To Action

File: cta-section.md · Block: ctaSection

Layout	What it looks like
`band`	A full-width photo with the badge, title, text, and buttons on a glass card in the middle
`split`	A light mint panel: the text and buttons on the left, the photo in a rounded frame on the right (below the text on small screens), with no overlay

Both use the same fields (badge, title, description, image, imageAlt, buttons, showPhone). /pricing/ uses split. On a page with this section, the call-to-action band at the top of the newsletter and cta footers hides, so the page doesn’t end with two calls to action. The main and commercial homepages turn the section off (enable: false). See Footer Band and The Call To Action Above The Footer.

Blog Preview

File: blog-section.md · Block: blogSection

options.layout: grid (three cards in a row), horizontal (image beside text, one post per row), or featured (large photo cards). options.limit sets the number of posts.

FAQ

File: faq-section.md · Block: faqSection

The FAQ has no layout key. With a list, it shows a photo beside an accordion. With groups, it switches to topic links on the left and one list per topic, as on /faq/; image and list are then ignored. See src/content/faq/english/-index.md for a full example.

Project Cards

Project cards come in two styles, set by the section that shows them, not by an option:

Card	Where	What it looks like
`grid`	The project grid on `/projects/`	A photo card with a glass caption: title, summary, and key facts
`card`	The projects section on the commercial and EV homepages (`ProjectsSection`)	The photo above the title and key facts, on a surface card

options.layout in src/content/projects/english/-index.md ships as "grid"; the projects page always uses the grid cards.

Mission

File: mission-section.md · Block: missionSection

One layout: a heading, text, a photo, and two text cards (list). An optional button shows under the description. The button ships off (button.enable: false) in the section file and on in the renewable energy homepage’s block.

Other Sections

All other sections have one layout. The newer sections (statement, bento grid, feature slider, product tabs, projects, contact band, service area, cost comparison, and charging speeds) are described in Sections.

What The Homepages Use

Homepage	Hero	About	Services	Benefits	Results	How it works	Testimonials
Residential (`/`)	`photo` (slides)	`default`	`band`	`grid`	`panel`	`steps`	`slider`
Commercial (`/home-two/`)	`split`	`cards`	`list`	`stack`	`split`	`timeline`	–
Renewable energy (`/home-three/`)	`panel`	–	–	–	`cards`	–	`quote`
EV and batteries (`/home-four/`)	`form`	–	–	–	–	–	`slider`

Other pages:

Page	Section	Layout
`/`	Service area	`list`, with the photo on the right
`/contact/`	Service area	`regions`, without a photo
`/about/`	Testimonials	`wall`
`/pricing/`	Call to action	`split`
`/home-four/` and most other pages	Call to action	`band`

pills and imagePosition: "left" are the other service area options (see Sections).