Aside

To display secondary information alongside a page’s main content, use the <Aside> component.

Preview

Note

Some content in an aside.

Caution

Some cautionary content.

Tip

Other content is also supported in asides.

console.log('A code snippet, for example.')

Some inline markdown like link, inline code, bold, italic, and strikethrough.

A collapsible disclosure

Some collapsible content.

Danger

Do not give your password to anyone.

Watch out!

A warning aside with a custom title.

Usage

import { Aside } from '@astrojs/starlight/components'

<Aside>Some content in an aside.</Aside>

<Aside type="caution">Some cautionary content.</Aside>

<Aside type="tip">

Other content is also supported in asides.

```js
console.log('A code snippet, for example.')
```

Some inline markdown like [link](https://example.com), `inline code`, **bold**, _italic_, and ~~strikethrough~~.

<details>
<summary>A collapsible disclosure</summary>

Some collapsible content.

</details>

</Aside>

<Aside type="danger">Do not give your password to anyone.</Aside>

<Aside type="danger" title="Watch out!">
  A warning aside *with* a custom title.
</Aside>

<Aside> Props

The <Aside> component accepts the same props in Starlight’s <Aside> component.