Steps
To style a numbered list of tasks to create step-by-step guides, use the <Steps>
component.
Import
import { Steps } from '@astrojs/starlight/components';
Usage
Use the <Steps>
component to style numbered lists of tasks.
This is useful for more complex step-by-step guides where each step needs to be clearly highlighted.
Wrap <Steps>
around a standard Markdown ordered list.
All the usual Markdown syntax is applicable inside <Steps>
.
import { Steps } from '@astrojs/starlight/components';
<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>
{% 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 %}
-
Import the component into your MDX file:
import { Steps } from '@astrojs/starlight/components'; -
Wrap
<Steps>
around your ordered list items.
<Steps>
Props
Implementation: Steps.astro
The <Steps>
component does not accept any props.