Aside

Variants

Starlight comes with four variants of Aside out of the box.

Default

Note

This is an informative aside

src/content/docs/example.mdx

<Aside type="info">
 This is an informative aside
</Aside>

Tip

Tip

This is a tip aside

src/content/docs/example.mdx

<Aside type="tip">
 This is an tip aside
</Aside>

Caution

Caution

This is a caution aside

src/content/docs/example.mdx

<Aside type="caution">
 This is an caution aside
</Aside>

Danger

Danger

This is a danger aside

src/content/docs/example.mdx

<Aside type="danger">
 This is an tip aside
</Aside>

Title property

There’s also an optional title property which will replace the default heading.

This a custom title

This is an informative aside

src/content/docs/example.mdx

<Aside type="info" title="This is a custom title">
 This is an informative aside
</Aside>

Keystatic config

To add this Starlight component as a Keystatic content component, register it as a content component with the following schema:

keystatic.config.tsx

...
Aside: wrapper({
  label: "Aside",
  description:
    "Useful for displaying secondary information alongside a page’s main content.",
  schema: {
    title: fields.text({ label: "Title" }),
    type: fields.select({
      label: "Type",
      defaultValue: "note",
      options: [
        {
          label: "Note",
          value: "note",
        },
        {
          label: "Tip",
          value: "tip",
        },
        {
          label: "Caution",
          value: "caution",
        },
        {
          label: "Danger",
          value: "danger",
        },
      ],
    }),
  },
}),
...