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

Blockquotes

Be not afeard; the isle is full of noises,
Sounds and sweet airs, that give delight and hurt not.

Cards

Check this out

Interesting content you want to highlight.

Other feature

More information you want to share.

Computer stuff

Build internet things with your computation machine.

Starlight ready

Just add Starlight and this theme comes to life.

Link cards

Internationalization Configure Starlight to support multiple languages.

Badges

Note
Success
Tip
Caution
Danger

Different sizes

Small
Medium
Large

Code

With an editor frame

---
// this is a code block example
---
<p>Code can include something dynamic: {Astro.props.variable}</p>

Or highlight important lines!

Including insertions or deletions.

Terminal commands

echo "Welcome, world!"

Basic

Code block without a frame:

// for example
console.log('Welcome, world!');

Labels

<button
  role="button"
  {...props}
  value={value}
  className={buttonClassName}
  disabled={disabled}
  active={active}
>
  {children && !active && (typeof children === 'string' ? <span>{children}</span> : children)}
</button>

File tree

astro.config.mjs
package.json
Directorysrc
- Directorycomponents
  - Header.astro
  - Title.astro
- Directorypages/
  - …

Link buttons

Get started

Configuration Reference

Learn more

Steps

Import the component into your MDX file:

import { Steps } from '@astrojs/starlight/components';

Wrap <Steps> around your ordered list items.

Sirius, Vega, Betelgeuse

Details

Where and when is the Andromeda constellation most visible?

The Andromeda constellation is most visible in the night sky during the month of November at latitudes between +90° and −40°.

Tables

Left	Centered	Right
This is left	Text is centered	And this is right-aligned
More text	Even more text	And even more to the right