Aside

Example source

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

Variants

Supported values for type:

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 | (string & {}) (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.

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

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

.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

Custom type

<Aside> doesn’t throw when you use an invalid type, instead it will treat it as a custom type.

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

<Aside type="tldr" icon="i-ph:bookmark-simple-duotone" title="TL;DR">
  summary
</Aside>

:root,
::backdrop {
  --sl-hue-yellow: 56;
  --sl-color-yellow-low: hsl(var(--sl-hue-yellow), 39%, 22%);
  --sl-color-yellow: hsl(var(--sl-hue-yellow), 82%, 63%);
  --sl-color-yellow-high: hsl(var(--sl-hue-yellow), 82%, 87%);
}

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

Rendered