Sections

Files: src/content/sections/english/ (and french/), page content files · Skill level: Beginner to edit, light code to add or move

A section is one full-width block of a page: a hero, a pricing table, an FAQ. Each section is two files that share a name:

src/layouts/components/sections/PlansSection.astro   ← how it looks (component)
src/content/sections/english/plans-section.md        ← what it says (content)
src/content/sections/french/plans-section.md

How Kivo Works explains the idea in full. This page is the practical reference.

Change A Section Everywhere

Edit its file in src/content/sections/english/ (and french/). The comments in each file list every option and its allowed values.

Section files have no schema, so npm run astro-check doesn’t catch a wrong value in them, such as a misspelled layout. Copy values from the comments, then check the page in the browser.

Hide A Section

• Everywhere: set enable: false at the top of its section file.

• On one page: add its block to that page’s file with enable: false:

  questionsSection:
    enable: false

• On one page, for good: delete its line in the page’s route file in src/pages/[...lang]/.

A page block can also turn a section back on for one page when the section file has enable: false.

Change A Section On One Page

Add a named block to the page’s content file, with only the keys you want to change. The block name is in the table below. Remember the merge rules: objects merge key by key, lists replace the whole list, and "" clears a value.

Copy the block name exactly. A block with a wrong name, for example teamSection: instead of teamGridSection:, is ignored without an error. npm run astro-check checks the values inside a correctly named block, except in the page files of src/content/contact/, faq/, and pricing/, which have no schema.

questionsSection:
  title: "How we keep your data safe"
  options:
    layout: "two-column"

One Section, Several Content Files

The feature grid and the docs categories sections can read different content files, so the same design shows different lists:

The route picks the file with entry, for example <FeatureGridSection entry="security-section" />.

Add A Section To A Page

This is a small code edit in the page’s route file:

1. Import the component at the top, between the --- lines:

   import QuestionsSection from "@/components/sections/QuestionsSection.astro";

2. Place it where you want it, inside <Base>:

   <QuestionsSection />

3. To give it page-specific content, read its block from the page file and pass it in:

   <QuestionsSection content={entry?.data?.questionsSection} />

Building a brand-new section is a developer task: follow the “Add a new section” skill in SKILLS.md, or ask your AI assistant to.

Section Catalog

Every section, its content file in src/content/sections/<language>/, the block name a page uses to override it, and where it appears. Layout values are in Section Layouts.

Marketing And Homepage

Product

Customers And Proof

Company

Resources

Trust, Status, And Community

Contact And System

Two more files in src/content/sections/ belong to site-wide widgets: announcement-bar.md (Header) and cookie-consent.md (Cookies & Analytics).