Overview/Layout Demo

Layout Demo

A throwaway page that exercises every building block of the docs layout. Replace this with the real introduction.

This page exists to check the docs layout end to end: headings and the table of contents, cards, code, tables and lists. Delete it once real content lands.

Cards

Use cards to fan out into a section's pages from an overview.

Create a teamCreate a team, invite your roster and get match-ready.Sign up for an eventFrom event page to confirmed signup, with every state explained.Broadcast an eventRTMP/SRT ingest, overlays and production setup for organisers.Developer docsBuild on the overlay SDK and the upcoming public API.

Text and Emphasis

Body copy sits in muted foreground with a 65–75ch measure. Strong text pops back to full foreground, inline code gets a subtle chip, and links carry the brand color with a real underline.

Blockquotes work for callout-style asides until a dedicated callout component earns its place.

Steps as Lists

  1. Ordered lists handle step-by-step flows.
  2. Each step stays one action long.
  3. Sub-details belong in the step's own sentence, not nested lists.
  • Unordered lists cover requirements and checklists.
  • Keep items parallel in structure.

Code

import { StraveOverlay } from "@strave/overlay-sdk";

const overlay = new StraveOverlay({
	channel: "match:demo",
});

overlay.on("scoreUpdate", (score) => {
	render(score);
});

Tables

ModeTeam sizeSignup type
Standard5v5Team
DraftSoloIndividual
Wingman2v2Team

Deep Heading

H3 and H4 land in the table of contents on the right; click one to check the scroll anchoring.

Even Deeper

That is every block the layout needs to handle.