List
To style lists to display a list of prerequisites, tasks, or any other information related to a video, use the <List> component.
Prerequisites
Import
Section titled “Import”import { List } from 'starlight-videos/components'Use the <List> component to display a list of prerequisites or tasks related to a video.
Wrap <List> around any standard Markdown list (unordered, ordered, or task) and provide at least a title attribute to give context to the list.
All the usual Markdown syntax is applicable inside the <List> component.
import { List } from 'starlight-videos/components'
<List title="Prerequisites">
- [ ] Node.js- [ ] A code editor
</List>
<List title="What did you learn?">
- How to install Starlight- How to create an amazing documentation
</List>Prerequisites
What did you learn?
- How to install Starlight
- How to create an amazing documentation
Use a custom icon
Section titled “Use a custom icon”Use the icon attribute set to the name of one of Starlight’s built-in icons to add a custom icon to the list.
import { List } from 'starlight-videos/components'
<List title="Prerequisites" icon="open-book">
- Node.js- A code editor
</List>Prerequisites
- Node.js
- A code editor
Customize lists
Section titled “Customize lists”Customize the appearance of a list by using the variant attribute which can be set to minimal (the default), caution, danger, note, success, or tip.
import { List } from 'starlight-videos/components'
<List title="Before you start" variant="caution">
- Make sure to have 5 minutes of free time- Have a cup of coffee or tea ready
</List>
<List title="Heads up" variant="danger">
- Cache invalidation is hard- Naming things is hard
</List>
<List title="Prerequisites" variant="note">
- Node.js- A code editor
</List>
<List title="What did you learn?" variant="success">
- How to install Starlight- How to create an amazing documentation
</List>
<List title="Something to remember" variant="tip">
- Avoid using too many aside blocks- Keep your content concise
</List>Before you start
- Make sure to have 5 minutes of free time
- Have a cup of coffee or tea ready
Heads up
- Cache invalidation is hard
- Naming things is hard
Prerequisites
- Node.js
- A code editor
What did you learn?
- How to install Starlight
- How to create an amazing documentation
Something to remember
- Avoid using too many aside blocks
- Keep your content concise
<List> Props
Section titled “<List> Props”The <List> component accepts the following props:
required
type: string
The title of the list to provide context to the list items.
variant
Section titled “variant”type: 'caution' | 'danger' | 'minimal' | 'note' | 'success' | 'tip'
default: 'minimal'
The appearance of the list.
type: string
The icon to display at the beginning of the list set to the name of one of Starlight’s built-in icons.