Skip to content

Compare the hero layouts added by Lucode Starlight for Starlight splash pages.

Splash pages use Starlight’s template: splash and Lucode’s hero.layout frontmatter. They are best for docs homepages, product entry points, release guides, and focused feature hubs.

Centered

A classic docs landing page. Text comes first, optional media sits below it, and actions stay close to the headline.

Open the centered example

---
title: Integration Platform
description: Build, document, and operate internal integrations from one place.
template: splash
hero:
layout: split-left
announcement:
text: Version 2.0 is available
link: /guides/getting-started/
image:
file: ../../../assets/placeholder.svg
actions:
- text: Start building
link: /guides/getting-started/
icon: right-arrow
- text: Customize theme
link: /guides/theming/
variant: minimal
---
LayoutUse when
centeredThe page is mostly a documentation entry point and does not need a dominant visual.
centered-topThe visual is the main recognition point for the product, release, or concept.
split-leftYou want a familiar product homepage rhythm with text leading the page.
split-rightYou want the image to anchor the first glance before the reader reaches the copy.
bannerYou want a wider editorial page with a large supporting image below the copy.

The homepage of this documentation site uses the default centered splash treatment with no hero image. That is often enough for a small library. Add imagery when it helps readers understand the product, not just to fill the page.