# Section Layouts ## 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: ```yaml options: layout: "stack" ``` ### Where To Set A Layout | Set it in… | It applies to… | | -------------------------------------------------------------- | ---------------------------------- | | The section file, `src/content/sections//
.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](/ecozen/customization/animations/#count-up-numbers)), 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` | ```yaml # 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. ```yaml # 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" ``` ```yaml # 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" ``` ```yaml # 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](/ecozen/customization/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](/ecozen/customization/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`: ```yaml 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: ```yaml 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](/ecozen/customization/sections/#service-area). #### 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](/ecozen/customization/footer/#footer-band) and [The Call To Action Above The Footer](/ecozen/customization/footer/#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](/ecozen/customization/sections/#newer-sections-in-detail). ### 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](/ecozen/customization/sections/#service-area)).