Homepage components
Hero, Action, Media, Install and StartHere for docs/index.
Hero renders the frontmatter title and description, so the homepage keeps one source for its h1 and metadata. An Install block next to a StartHere block renders as one two-column row.
---
title: Email testing built for automation.
description: Create disposable inboxes and receive real emails from your tests.
---
<Hero eyebrow="TestInbox · v1">
<Action label="Get started" href="./quickstart" />
<Action label="API reference" href="/api" />
</Hero>
<Install>
<Tab label="TypeScript">
```bash
npm install @testinbox/client
```
```typescript
const client = new TestInbox({ apiKey: process.env.TESTINBOX_API_KEY });
```
</Tab>
</Install>
<StartHere>
<Entry title="Quickstart" href="./quickstart" description="First test email" meta="5 min" />
<Entry title="API reference" href="/api" meta="25 endpoints" />
</StartHere>
<Steps variant="strip" title="The workflow">
<Step title="Create an inbox">
`inboxes.create()`
</Step>
</Steps>| Component | Props |
|---|---|
Hero | eyebrow? · up to 3 Action + 1 Media |
Action | label, href, variant? primary | secondary |
Media | poster, alt, caption?, duration? m:ss, linkLabel? + linkHref? |
Install | Tab children with 1–2 fences (command, then config) |
StartHere | Entry with title, href, description?, meta? |