Section Overview Template

Overview pages orient readers for an entire section. Summarize who it’s for, surface the core journeys, and end with a clear “build vs explore” CTA pair.

❌ DO NOT COPY — Guidance & Constraints

Frontmatter must include title, description, icon. Keep the hero paragraph under two sentences describing audience + outcome.
Provide an <Info> block pointing to the primary entry point (usually the quickstart). Use <Warning> only for major caveats (beta, deprecation).
Stage journeys in 4–6 cards total. Break into multiple <CardGroup> rows when a binary choice (e.g., Python vs Node) or stacked journeys reads better. Keep copy ≤15 words with icons + links.
When migrating an existing overview, reuse the established journeys, images, and stats—reshape them into this layout rather than cutting content unless it’s outdated.
Optional accordions (<AccordionGroup>) can tuck detailed tables (feature breakdowns, comparisons) beneath the hero when extra context is helpful.
Optional visuals (comparison table, Mermaid diagram) should be left-to-right and only added when they reduce confusion.
Finish with exactly two CTA cards: left = adjacent/alternative track, right = next logical step deeper in the section.

✅ COPY THIS — Content Skeleton

mdx

---
title: [Section name] Overview
description: [30-second summary of what lives in this section]
icon: "compass"
---

# [Section] Overview

[State who this section is for.] [Explain what they’ll accomplish after browsing these docs.]

<Info>
  Start with [Quickstart link] if you’re new, then choose a deeper topic below.
</Info>
<AccordionGroup>
  <Accordion title="[Optional value table]" icon="sparkles">
    | Feature | Why it helps |
    | --- | --- |
    | ... | ... |
  </Accordion>
</AccordionGroup>
```mermaid
graph LR
  A[Get set up] */} B[Learn concepts]
  B */} C[Build workflows]
  C */} D[Support & scale]
```

## Choose your path
<CardGroup cols={2}>
  <Card title="[Decision 1]" icon="rocket" href="/[link-1]">
    [One-line outcome]
  </Card>
  <Card title="[Decision 2]" icon="brain" href="/[link-2]">
    [One-line outcome]
  </Card>
</CardGroup>

<CardGroup cols={3}>
  <Card title="[Journey 1]" icon="sparkles" href="/[link-3]">
    [One-line outcome]
  </Card>
  <Card title="[Journey 2]" icon="gear" href="/[link-4]">
    [One-line outcome]
  </Card>
  <Card title="[Journey 3]" icon="book" href="/[link-5]">
    [One-line outcome]
  </Card>
</CardGroup>

<Tip>
  [Optional cross-link, e.g., “Self-hosting? Jump to the OSS overview.”] Delete if unused.
</Tip>

## Keep going

<CardGroup cols={2}>
  <Card
    title="[Alternative or adjacent track]"
    description="[Why it might be the better next step]"
    icon="arrows-left-right"
    href="/[alternate-link]"
  />
  <Card
    title="[Next deep dive]"
    description="[What they’ll build or learn next]"
    icon="rocket"
    href="/[next-link]"
  />
</CardGroup>

✅ Publish Checklist

Hero paragraph states audience + outcome; <Info> points to the primary entry point.
Card grid lists 4–6 journeys with concise copy and valid icons/links.
Optional visuals (tables/Mermaid) are LR and actually clarify the flow.
CTA pair present with related alternative on the left and next logical step on the right.
All placeholders and unused callouts removed before publishing.

Browse Other Templates