Skip to main content

​
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

---
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>

{/* Optional: delete if not needed */}
<AccordionGroup>
  <Accordion title="[Optional value table]" icon="sparkles">
    | Feature | Why it helps |
    | --- | --- |
    | ... | ... |
  </Accordion>
</AccordionGroup>

{/* Optional: delete if not needed */}
```mermaid
graph LR
  A[Get set up] */} B[Learn concepts]
  B */} C[Build workflows]
  C */} D[Support & scale]
```

## Choose your path

{/* Use multiple rows if a 2-up decision helps */}
<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>

{/* Duplicate another CardGroup (2 or 3 columns) if you need more coverage, but keep the total ≤6 cards. */}

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

## Keep going

{/* DEBUG: verify CTA targets */}

<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

Quickstart

Operation Guide

Feature Guide

Concept Guide

Integration Guide

Cookbook

API Reference

Parameters Reference

Migration Guide

Release Notes

Troubleshooting Playbook

Section Overview

Contribution Hub

Docs Home