Section Layouts

Kivo Theme Documentation

Skill level: Beginner · Time: 1 minute per section

14 Kivo sections can be drawn in more than one way (46 layouts in total, counting each default), and the page header has 4 layouts. You pick one with a single line, and the content stays the same, so you can try every option without rewriting anything.

options:
  layout: "bento"

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
A page block, for example `featureGridSection:` in a page file	That page only

Set it in both language folders.

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; open the page to check it. In page blocks, astro-check checks the value, except in the contact, FAQ, and pricing page files.

Preview Layouts Before You Choose

The layout gallery. /elements/ shows every layout of the sections that have more than one, and of the page header, each with its options.layout line to copy. The contact section’s sales layout is shown on /contact/ instead. The gallery is hidden from search engines, the sitemap, and site search. Keep it as a reference while you build, then delete src/content/pages/english/elements.md (and french/) and src/pages/[...lang]/elements.astro before launch, or keep it unlisted.

Kivo layout gallery

The Change layout button. A demo feature, off by default. When you turn it on, a floating Change layout button (bottom left) on the four homepages cycles the section in view through all its layouts. Hover it to see a card with the file to edit and the exact line to copy.

Set [settings.layoutSwitcher] enable = true in config.toml.
Run npm run dev and open a homepage.
Scroll to the section you want to change.
Click Change layout until you like what you see.
Click the copy button on the card and paste the line into the file it names.

When you are done, set enable = false again. The theme’s demo deploys show the button because they are built with PUBLIC_DEMO_MODE=true; leave that variable unset on your site.

Layout Catalog

The first value of each section is its default.

Hero

File: hero-saas.md · Block: heroSaas

Layout	What it looks like
`default`	Copy on the left, an animated deploy mockup on the right
`centered`	Centered copy, optional logo strip below
`screenshot`	Centered copy above a product screenshot in a browser frame (`image`), or the mockup
`code`	Copy beside a code window; with `code.tabs`, requests are typed and responses stream in
`form`	Copy beside a sign-up card that posts to your newsletter

More hero options: options.rotatingStyle (typewriter or fade) for the rotating words, options.showGrid for the grid backdrop, and alternatives to the deploy mockup: preview.terminal (an animated terminal, default layout only), and, in default and screenshot, agent (an AI agent run) and dashboard (an analytics dashboard). Each needs enable: true. badges adds proof badges (GitHub stars, ratings) under the buttons in every layout.

Block: pageHeader in a page file (the title comes from the page’s title)

Layout	What it looks like
`default`	Breadcrumb and title
`intro`	Copy on the left, buttons on the right
`centered`	Everything centered
`split`	Copy on the left, a product visual or an `image` on the right

Features

File: feature-grid-section.md (also security-section.md, benefits-section.md, feature-bento-section.md) · Block: featureGridSection

Layout	What it looks like
`default`	Icon grid; `options.columns` 3 or 4
`alternating`	Rows where copy and media swap sides
`tabs`	Feature tabs on the left, description and media on the right
`sticky`	Sticky intro and buttons on the left, a list on the right
`bento`	Cells of different widths; each item’s `span` (1–3) sets its width

Items can show a visual (an animated product illustration) or an image in alternating, tabs, and bento.

Steps

File: steps-section.md · Block: stepsSection

Layout	What it looks like
`default`	Tabs with animated previews; `options.autoplay` and `options.interval`
`timeline`	Sticky intro, numbered vertical steps; `options.previews: false` hides visuals

Testimonials

File: customer-quotes-section.md · Block: customerQuotesSection

Layout	What it looks like
`default`	Customer logo tabs with a rotating quote
`marquee`	Two rows of quote cards scrolling in opposite directions
`spotlight`	One large quote with avatar and logo, beside two stat tiles
`metrics`	Proof badges, 3–4 counting stat tiles, and a logo strip

Code

File: code-tabs-section.md · Block: codeTabsSection

Layout	What it looks like
`default`	Intro on the left, tabbed code on the right
`stacked`	Centered intro above full-width tabs
`compare`	The first two tabs side by side
`terminal`	Intro beside an animated terminal
`api`	Request tabs above a response panel with a status chip (needs `response`)

Pricing

File: plans-section.md · Block: plansSection. See Pricing.

Layout	What it looks like
`default`	Plan cards with a monthly/yearly toggle
`usage`	Usage sliders with a live monthly estimate (needs `usage.meters`)
`single`	The featured plan beside its feature checklist
`compact`	Every plan as a row of one table

FAQ

File: questions-section.md · Block: questionsSection

Layout	What it looks like
`default`	Sticky intro beside an accordion
`two-column`	Centered intro, questions split into two columns

Questions can have a group heading in both layouts.

Changelog

Section	Layouts
Homepage preview (`changelog-section.md`)	`default` (dated list) · `cards` (cards with date, tag, and image)
`/changelog/` list (`changelog-list-section.md`)	`default` · `cards` (grid with images) · `compact` (dense rows)

Call To Action

File: call-to-action.md · Block: ctaSection

default · split · band · newsletter, plus options.appearance: saas, dark, light, or accent. See Footer & Call To Action.

Other Sections

Section	Where it is set	Layouts
Feature index	`feature-index-section.md`, `featureIndexSection`	`default` · `list` · `grouped` (by entry `category`) · `featured`
Feature hero	`feature-hero-section.md`, `featureHeroSection`	`default` · `screenshot`
Feature detail page template	`options.layout` in a feature entry in `src/content/services/`	`default` · `api` · `guide` · `showcase`
Contact	`contact-section.md`, `contactSection`	`default` · `sales`
Log in, sign up, reset password	`options.layout` in `src/content/auth/<language>/*.md`	`default` (split with a side panel) · `centered`
Logos	`clients.md`, `clientsSection`	`options.layout`: `grid` · `plain`; `columnsPerRow`: 4 or 6; `titleStyle`: `heading` or `eyebrow`
Header	`[settings.layout] header` in `config.toml`	`default` · `simple` · `centered`
Footer	`[settings.layout] footer` in `config.toml`	`default` · `minimal` · `large`

All other sections have one layout (default).

Recipes By Product Type

The demo homepages show combinations that suit each kind of product:

Product	Hero	Features	Code	Pricing	Testimonials	Call to action
Developer cloud (`/`)	`default`	`default`	`default`	`default`	`default`	`default`
API product (`/home-api/`)	`code`	`tabs`	`compare`	`usage`	`metrics`	`split`
AI product (`/home-ai/`)	`screenshot` + `agent`	`alternating`	–	`usage`	`marquee`	`default`
Analytics (`/home-analytics/`)	`screenshot` + `dashboard`	`sticky`	–	`compact`	`spotlight`	`newsletter`
CLI or dev tool	`form`	`default`	`terminal`	`single`	`metrics`	`band`