Asides
To display secondary information alongside a page’s main content, use the <Aside>
component.
Import
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.
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>
{% aside type="caution" title="Watch out!" %}A warning aside *with* a custom title.{% /aside %}
<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.