Skip to content

Asides

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

Preview

Import

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

Usage

Display an aside (also known as “admonitions” or “callouts”) using the <Aside> component.

An <Aside> can have an optional type attribute, which controls the aside’s color, icon, and default title.

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
// A code snippet, for example.
```
</Aside>
<Aside type="danger">Do not give your password to anyone.</Aside>
Preview

Starlight also provides a custom syntax for rendering asides in Markdown and MDX as an alternative to the <Aside> component. See the “Authoring Content in Markdown” guide for details of the custom syntax.

Use custom titles

Override the default aside titles by using the title attribute.

import { Aside } from '@astrojs/starlight/components';
<Aside type="caution" title="Watch out!">
A warning aside *with* a custom title.
</Aside>
Preview

<Aside> Props

Implementation: Aside.astro

The <Aside> component accepts the following props:

type

type: 'note' | 'tip' | 'caution' | 'danger'
default: 'note'

The type of aside to display:

  • note asides (the default) are blue and display an information icon.
  • tip asides are purple and display a rocket icon.
  • caution asides are yellow and display a triangular warning icon.
  • danger asides are red and display an octagonal warning icon.

title

type: string

The title of the aside to display. If title is not set, the default title for the current aside type will be used.