Kitchen sink

A page with a wide variety of different Markdown syntax or components to show how these look together. See the following pages for individual examples.

Asides

Badges

New
Deprecated
Demo
200
Experimental

Blockquotes

The content of the quote can use any other Markdown syntax.

Cards

Card title

The content of the card that can use any other Markdown syntax.

Card grid

Card title

The content of the card.

Card title

The content of the card.

Link card

Link title The description of the link.

Link card grid

Link title

Details

The summary of the disclosure

The content of the disclosure that can use any other Markdown syntax.

Code Blocks

---
// A code block example
---

<p>A paragraph with a variable: {Astro.props.foo}</p>

With highlighted content.

Including insertions or deletions.

Diff

function test() {
  const foo = 'bar'
  const foo = 'baz'
}

Labels

---
import { Icon } from '@astrojs/starlight/components';
---


<Icon name="seti:lock" />


<button type="button">Login</button>


<a href="/login/">Login</a>

Terminal frame

pnpm run build

File Tree

astro.config.mjs an important file
package.json
README.md
Directorysrc
- Directorycomponents
  - Header.astro
- …
Directorypages/
- …

Link Buttons

Primary

Secondary

Minimal

Steps

The first step of the guide that can use any other Markdown syntax.
```
const foo = 'bar'
```
A second and final step.

Tabs

npm install starlight-fumadocs

pnpm add starlight-fumadocs

yarn add starlight-fumadocs

Tables

Column 1	Column 2	Column 3	Column 4
Cell 1-1	Cell 1-2	Cell 1-3	Cell 1-4
Cell 2-1	Cell 2-2	Cell 2-3	Cell 2-4
Cell 3-1	Cell 3-2	Cell 3-3	Cell 3-4
Cell 4-1	Cell 4-2	Cell 4-3	Cell 4-4
Cell 5-1	Cell 5-2	Cell 5-3	Cell 5-4
Cell 6-1	Cell 6-2	Cell 6-3	Cell 6-4