Skip to content
Starlight

⚠️ <Steps> Test ⚠️

List without <Steps>

For comparison, a regular ordered list in Starlight renders like this:

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vestibulum ante non neque convallis tempor.

    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam a iaculis libero.

    1. Something nested

    2. Something else

  2. Step six

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vestibulum ante non neque convallis tempor.

List with <Steps>

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vestibulum ante non neque convallis tempor.

    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam a iaculis libero.

    1. Something nested

    2. Something else

  2. Step six

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vestibulum ante non neque convallis tempor.

Compact variant

(This list is ol > li > (text node) instead of ol > li > p like the previous examples.)

Without <Steps>

  1. Content-driven: Astro was designed to showcase your content.
  2. Server-first: Websites run faster when they render HTML on the server.
  3. Fast by default: It should be impossible to build a slow website in Astro.
  4. Easy to use: You don’t need to be an expert to build something with Astro.
  5. Developer-focused: You should have the resources you need to be successful.

With <Steps>

  1. Content-driven: Astro was designed to showcase your content.
  2. Server-first: Websites run faster when they render HTML on the server.
  3. Fast by default: It should be impossible to build a slow website in Astro.
  4. Easy to use: You don’t need to be an expert to build something with Astro.
  5. Developer-focused: You should have the resources you need to be successful.

With headings

Run down of different heading levels as the first text in the list item:

  1. Step one

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vestibulum ante non neque convallis tempor.

  2. Step two

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vestibulum ante non neque convallis tempor.

  3. Step three

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vestibulum ante non neque convallis tempor.

  4. Step four

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vestibulum ante non neque convallis tempor.

  5. Step five

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vestibulum ante non neque convallis tempor.

  6. Step six

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vestibulum ante non neque convallis tempor.

With component content

  1. Installation

    Terminal window
    pnpm i astro

  2. Install your dependencies:

    Terminal window
    pnpm install
  3. Customizing Starlight Learn how to make your Starlight site your own with custom styles, fonts, and more.
  4. Sirius, Vega, Betelgeuse