Asides and tabs

This page shows how Starlight’s ::: directives (asides) and <Tabs> can be combined in a guide scenario — for example when installation instructions differ by operating system.

---

Asides

Four variants are available: note (default), tip, caution, and danger.

Example: note

This is an information box of type note. Use it for tips and supplementary information that isn’t critical.

Example: caution

This is a caution box. Use it when the student needs to pay attention — for example, when a step is easy to miss.

Example: danger

This is a danger box. Reserve it for cases where a mistake could cause real problems, such as lost data or being locked out.

---

Asides and Tabs combined

A common pattern on the course site is combining an aside with <Tabs> for platform-specific instructions. Students only see the steps relevant to their own operating system, without having to scroll past irrelevant content.

Pick the right tab

Select the tab for your operating system. All steps must be run in a terminal with administrator privileges.

Windows

Open PowerShell as administrator and run:

winget install --id Git.Git

Close and reopen the terminal once installation finishes.

Verify the installation

Confirm Git is on your PATH after installing by running git --version.

macOS

Open Terminal and install via Homebrew:

brew install git

Don’t have Homebrew? Install it first from brew.sh.

Linux

Use your distribution’s package manager. On Debian/Ubuntu:

sudo apt update && sudo apt install git

---

Tabs with more items

Tabs work just as well for presenting code alternatives across languages or frameworks. Use syncKey on multiple <Tabs> blocks that represent the same choice, so the selection stays in sync across the page.

JavaScript

const greeting = (name) => `Hello, ${name}!`;
console.log(greeting('world'));

TypeScript

const greeting = (name: string): string => `Hello, ${name}!`;
console.log(greeting('world'));

Python

def greeting(name: str) -> str:
    return f"Hello, {name}!"

print(greeting("world"))