Skip to content
Starlight Terminal

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

Section titled “Asides”

Badges

Section titled “Badges”
  • New
  • Deprecated
  • Demo
  • 200
  • Experimental

Blockquotes

Section titled “Blockquotes”

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

Cards

Section titled “Cards”

Card title

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

Card grid

Section titled “Card grid”

Card title

The content of the card.

Card title

The content of the card.

Section titled “Link card”
Link title The description of the link.
Section titled “Link card grid”
Link title
Link title

FeatureGrid

Section titled “FeatureGrid”

Fast by default

Static output, zero runtime JavaScript required for the layout.

Themed cards

Inherits the terminal color palette and monospace typography.

Responsive

Collapses to fewer columns on narrow viewports automatically.

Section titled “FeatureGrid with link cards”
Link title Card description.
Link title Card description.

Details

Section titled “Details”
The summary of the disclosure

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

Code Blocks

Section titled “Code Blocks”
example.astro
---
// A code block example
---


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


With highlighted content.


Including insertions or deletions.

Diff

Section titled “Diff”
function test() {
  const foo = 'bar'
  const foo = 'baz'
}

Labels

Section titled “Labels”
example.astro
---
import { Icon } from '@astrojs/starlight/components';
---




<Icon name="seti:lock" />




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




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

Terminal frame

Section titled “Terminal frame”
Build something…
pnpm run build

File Tree

Section titled “File Tree”
  • astro.config.mjs an important file
  • package.json
  • README.md
  • Directorysrc
    • Directorycomponents
      • Header.astro
    • …
  • Directorypages/
    • …
Section titled “Link Buttons”

Primary

Secondary

Minimal

Steps

Section titled “Steps”

  1. The first step of the guide that can use any other Markdown syntax.

    const foo = 'bar'

  2. A second and final step.

Tabs

Section titled “Tabs”
Terminal window
npm install starlight-theme-terminal

Tables

Section titled “Tables”
Column 1Column 2Column 3Column 4
Cell 1-1Cell 1-2Cell 1-3Cell 1-4
Cell 2-1Cell 2-2Cell 2-3Cell 2-4
Cell 3-1Cell 3-2Cell 3-3Cell 3-4
Cell 4-1Cell 4-2Cell 4-3Cell 4-4
Cell 5-1Cell 5-2Cell 5-3Cell 5-4
Cell 6-1Cell 6-2Cell 6-3Cell 6-4