Aside

Example source

page.mdx

import Aside from 'starlight-plugin-icons/components/Aside.astro'

<Aside type="note">
  Helpful tip content.
  You can use <span class="i-ph:markdown-logo-bold"></span> **Markdown** inside.
</Aside>

Rendered

Note

Helpful note content. You can use Markdown inside.

Variants

Supported values for type:

Note

Note content

Tip

Tip content

Caution

Caution content

Danger

Danger content

Customization

You can override the icon via the icon prop or rely on the default for each type.

Props

• type? one of note | tip | caution | danger (default: note)
• title? string — text label and visible heading (defaults to a localized title by type)
• icon? string — Iconify class (overrides the default type icon)
• class? string — additional CSS classes

Classes

• starlight-aside
• starlight-aside--${type}
• starlight-aside__title
• starlight-aside__icon
• starlight-aside__content

Example

Starlight also allows using CSS variables to customize the aside component.

page.mdx

import Aside from 'starlight-plugin-icons/components/Aside.astro'

<Aside type="tip" icon="i-ph:lightbulb-duotone">Custom icon</Aside>

src/styles/custom.css

.starlight-aside--tip {
  --sl-color-asides-text-accent: var(--sl-color-green-high);
  --sl-color-asides-border: var(--sl-color-green);
  background-color: var(--sl-color-green-low);
}

Rendered

Tip

Custom icon