Skip to content
New: Customize your theme with an AI assistant. Read the guide
Ultimate Astro Theme GuidesDocs
Log inBrowse Themes

Section Layouts

Section Layouts

Files: section files in src/content/sections/english/, page content files · Skill level: Beginner

Nine sections can be drawn in more than one way. The content stays the same; one field picks the look:

layout: "split"   # default | split | signup

  • In the section file, it changes the section on every page that doesn’t set its own.

  • In a page block, it changes the section on that page only:

    src/content/homepage/english/-index.md
    heroSection:
      layout: "split"

The first value of each list is the default. Copy values exactly: a misspelled value shows an error in npm run dev.

The layout gallery at /elements/

Open /elements/ (and /fr/elements/) on your local site to see every layout below, one after the other, with the copy from your section files. Each preview is labeled with the section and the layout name (“Hero · split”). The page is not in the menus, is marked noindex, and is left out of the sitemap and site search. Delete src/pages/[...lang]/elements.astro before launch if you don’t want it online.

Hero (hero-section.md)

LayoutLooks likeUsed on
defaultCentered title with a rating badge, the dashboard below with two annotations and two comment pins on it/
splitOn white: copy and rating stars on the left, a collage of product cards on a lilac block on the right/home-2/
signupCentered title with a “New” pill and an email field, the dashboard with side cards, a dark logo band under it/home-3/

Layout-only fields: default reads badge, comments, notes; split reads rating and visual (comment, calendar, progress, chat); signup reads pill, signup, and visual (task, project). showDashboard: false hides the dashboard in default and signup. The email field of signup opens the sign-up page with the address filled in.

Logos (logos-section.md)

LayoutLooks likeUsed on
defaultOpen scrolling strip with a line above/, /pricing/
boxedThe same strip inside a cream card/home-2/
bandWhite logos on a dark band, no lineinside the signup hero on /home-3/

Why (why-section.md)

LayoutLooks likeUsed on
defaultCream cards with an icon, text, and a small product card (visual of each item)/
simpleOutlined cards with a centered icon and text, no product card/home-2/

Features (features-section.md)

LayoutLooks likeUsed on
defaultTwo colored cards side by side, then wide cards (wide: true) with the visual beside the text/, /features/
stackedEvery card full width with the visual beside the text; on large screens the cards pin under the header and pile up while the page scrollsgallery only

Feature Rows (feature-rows-section.md)

LayoutLooks likeUsed on
alternatingBig rows, a product card in a colored panel on one side; the sides swap every row/home-2/, /home-3/, solution pages
compactA grid of outlined cards (three across on large screens), the visual cropped on top, then title, text, numbers, and a small button; the subtitle is hiddengallery only

Integrations (integrations-section.md)

LayoutLooks likeUsed on
tilesIcon tiles wired to your logo in the middle/
chipsNamed pills in a cream band/home-2/
cloudA cream card with the title, button, and tilted pills; no tag/home-3/

Testimonials (testimonials-section.md)

LayoutLooks likeUsed on
columnsReview cards in three columns/ and /about/ (first three), /testimonials/ (all)
marqueeDark review cards scrolling sideways, with avatars and a rating beside the title (rating)/home-3/

Pricing (pricing-section.md)

LayoutLooks likeUsed on
defaultPlan cards side by side with the monthly / yearly switch/, /home-2/, /pricing/
compactOne row per plan: name, description, and features on the left, price and button in a white panel on the right. Good for three or four plansgallery only

FAQ (faq-section.md)

LayoutLooks likeUsed on
splitIntro and a help card beside the questions/, /home-3/, /features/, /pricing/
centeredIntro above one column of questions, the help card below/home-2/
groupedQuestions by topic (groups), with a topic list that stays in view on desktop/faq/

split and centered read items; grouped reads groups and topicsLabel. Both lists live in faq-section.md, so you can switch freely.

Page Header (pageHeaderblock)

LayoutLooks likeUsed on
defaultCentered tag, title, description, and buttonsevery inner page
splitText and buttons on the left, a visual on the right/integrations/

The split visual is set with pageHeader.visual:

pageHeader:
  layout: "split"
  visual:
    type: "tools"            # image | dashboard | tools
    # image:  src: "/images/..." and alt: "..."
    # tools:  a list of { name, icon, color } tiles around your logo
    tools:
      - { name: "Chatnest", icon: "MessageSquare", color: "lilac" }

Other Layout Options

  • Auth screens (src/content/auth/english/*.md): options.layout: "default" puts a colored panel beside the form; "centered" shows a single card.
  • Text pages (src/content/pages/english/*.md): contentPage.options.layout has one value, default; contentPage.options.numbered: true numbers the headings.

Recipes By Product Type

  • A simple product site: start from /, set the FAQ to centered, and keep pricing default.
  • A sign-up-first launch page: use the signup hero, testimonials marquee, and integrations cloud, as on /home-3/.
  • Few plans, more detail: pricing compact, with the comparison table on /pricing/.
  • Feature-heavy pages: features stacked on /features/, or feature rows compact for a scannable grid.

Do It With AI

Set these layouts on the homepage (src/content/homepage/english/-index.md and french/-index.md,
add the blocks if missing): hero "[default | split | signup]", logos "[default | boxed | band]",
why "[default | simple]", integrations "[tiles | chips | cloud]", testimonials "[columns |
marquee]", FAQ "[split | centered | grouped]". Check that the fields each layout reads are filled
in the section files. Then tell me to compare the result with /elements/.
Type something to search...
to navigateto selectESC to close