Reference

Asides

Note

Note aside.

{% aside %}
Note aside.
{% /aside %}

Caution

Caution aside.

{% aside type="caution" %}
Caution aside.
{% /aside %}

Tip

Tip aside.

{% aside type="tip" %}
Tip aside.
{% /aside %}

Danger

Danger aside.

{% aside type="danger" %}
Danger aside.
{% /aside %}

Blockquotes

This is a blockquote.

This is another line in the blockquote.

Code Blocks

function demo() {
  // This is a comment
  console.log('Hello World');
}

File Trees

• astro.config.mjs
• package.json
• Directorysrc

  • Directorycomponents

    • Header.astro
    • Title.astro
  • Directorypages/

    • …

{% filetree %}

- astro.config.mjs
- package.json
- src
  - components
    - Header.astro
    - Title.astro
  - pages/

{% /filetree %}

Steps

1. Import the component into your MDX file:

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

2. Wrap <Steps> around your ordered list items.

  {% steps %}

  1. Import the component into your MDX file:

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

  2. Wrap `<Steps>` around your ordered list items.

  {% /steps %}

Tabs

Tab 1

Tab 1 text

Tab 2

Tab 2 text

{% tabs %}
{% tabitem label="Tab 1" %}
Tab 1 text
{% /tabitem %}

{% tabitem label="Tab 2" %}
Tab 2 text
{% /tabitem %}
{% /tabs %}