Landing Page

Build the marketing page that sits in front of your docs.

Five components compose the page in front of your docs: Hero, FeatureGrid with Feature, CTA, and the Action link the first and third share. Each one renders its own full-width <section> with the container, padding, and vertical rhythm already set, so a landing page is a handful of components rather than a wall of layout classes.

They draw every colour from the same design tokens as your docs, so they follow your theme preset and both colour schemes with nothing to configure.

Usage

Pass layout="page" to DocsShell so the shell drops the sidebar and table of contents and gives the sections the full width of the viewport.

			<script>
	import { docs } from 'svelte-docsmith/content';
	import { DocsShell, Hero, FeatureGrid, Feature, CTA, Action } from 'svelte-docsmith';
	import { siteConfig } from '$lib/site-config';
</script>

<DocsShell config={siteConfig} content={docs} layout="page" pattern>
	<Hero title="Your project" description="One line on what it does and who it's for.">
		{#snippet actions()}
			<Action href="/docs/quick-start">Get started</Action>
			<Action href="/docs/introduction" variant="secondary">Read the docs</Action>
		{/snippet}
	</Hero>

	<FeatureGrid background="muted" title="Everything a docs site needs">
		<Feature title="Markdown routes">Add a file, get a page.</Feature>
		<Feature title="Search included">A command palette with no service to run.</Feature>
		<Feature title="Light and dark">Eleven presets ship built in.</Feature>
	</FeatureGrid>

	<CTA title="Start writing" description="Your first page is a markdown file.">
		{#snippet actions()}
			<Action href="/docs/quick-start">Quick start</Action>
		{/snippet}
	</CTA>
</DocsShell>

npm create svelte-docsmith scaffolds a landing page built from these, so the fastest way to see them running is to start a project and edit the result.

Hero

The opening section. Give it a media snippet and it becomes a two-column split, with your headline on the left and a code sample, screenshot, or live component on the right. Leave media off and the hero centres on a single column instead, which suits a project that leads with a sentence rather than a screenshot.

title and description each take a plain string or a snippet. Reach for the snippet form when you want to mark part of the headline up, such as colouring one word with text-primary.

Hero

title required stringSnippet

The headline. Pass a snippet to mark part of it up.

description stringSnippet

Supporting paragraph below the headline.

eyebrow Snippet

A pill, badge, or announcement link above the headline.

actions Snippet

Call-to-action buttons, usually one or two Action links.

media Snippet

The second column. Without it the hero centres on one column.

Feature grid

A grid of short capability blurbs. FeatureGrid owns the section heading and the layout; each Feature is one cell, with an optional icon rendered in a tinted square beside the text.

Set background="muted" to tint the band and rule it top and bottom. Alternate it against the sections either side and the page reads as distinct bands rather than one continuous scroll.

FeatureGrid

title string

Section heading above the grid.

description string

Supporting line below the heading.

columns 23 default 3

Columns at the widest breakpoint. The grid steps down to two, then one, on narrower screens.

background 'default''muted' default 'default'

muted tints the band and adds a rule above and below.

children required Snippet

The Feature cells.

Feature

title required string

The cell heading.

icon Snippet

Optional leading icon, rendered in a tinted square.

children Snippet

The description.

CTA

The closing panel: a bordered card with a soft glow behind the heading, so the page ends on your primary colour instead of trailing off. Use before for a note that should sit above the heading (for example a pre-release Callout) so the section still ends on the actions; use children for content below them.

CTA

title required string

The closing heading.

description string

Supporting line below the heading.

actions Snippet

Call-to-action buttons.

before Snippet

Content above the heading — a pre-release note, for example — so the section can still end on the actions.

children Snippet

Content below the actions, such as a secondary note.

Action

The call-to-action link used by Hero and CTA. primary is the filled button, secondary the outlined one that sits beside it. The primary variant carries a trailing arrow that nudges on hover; turn it off with arrow={false}.

It is deliberately small. Anything more elaborate, such as a button that copies an install command to the clipboard, is clearer written as your own markup inside the actions snippet.

Action

href required string

Where the link points.

variant 'primary''secondary' default 'primary'

Filled or outlined.

external boolean default false

Open in a new tab with rel="noopener noreferrer".

arrow boolean

Trailing arrow. Defaults to on for primary, off for secondary.

children required Snippet

The link label.