AstroWiki Quick Reference Guide

Aside

Syntax:

<Aside>Some content in an aside.</Aside>

<Aside type="caution">Some cautionary content.</Aside>

<Aside type="tip">

Other content is also supported in asides.

```js
// A code snippet, for example.
```

</Aside>

<Aside type="danger">Do not give your password to anyone.</Aside>

Result:

Note

Some content in an aside.

Caution

Some cautionary content.

Tip

Other content is also supported in asides.

// A code snippet, for example.

Danger

Do not give your password to anyone.

---

Badge

Syntax:

<Badge text="New" variant="note" />
<Badge text="Deprecated" variant="danger" />
<Badge text="Success" variant="success" />
<Badge text="Tip" variant="tip" />
<Badge text="Caution" variant="caution" />
<Badge text="New" size="small" />
<Badge text="New and improved" size="medium" />
<Badge text="New, improved, and bigger" size="large" />

Result:

New Deprecated Success Tip Caution New New and improved New, improved, and bigger

---

Card & CardGrid

Syntax:

<Card title="Single Card">
  Content goes here.
</Card>

<CardGrid>
  <Card title="Card 1">First card</Card>
  <Card title="Card 2">Second card</Card>
</CardGrid>

Result:

Single Card

Content goes here.

Card 1

First card

Card 2

Second card

---

Code

Syntax:

<Code code="console.log('Hello');" lang="js" title="hello.js" />

Result:

hello.js

console.log('Hello');

---

FileTree

Syntax:

<FileTree>
- src/
  - content/
    - docs/
      - guides/
        - astrowiki.mdx
      - index.mdx
</FileTree>

Result:

• Directorysrc/

  • Directorycontent/

    • Directorydocs/

      • Directoryguides/

        • astrowiki.mdx
      • index.mdx

---

Icon

Syntax:

<Icon name="open-book" />

<Icon name="github" size="2rem" color="var(--sl-color-text-accent)" />

Result:

---

LinkButton

Syntax:

<LinkButton href="/guides/linux/fedora/">Fedora Guide</LinkButton>

<LinkButton href="https://astro.build" variant="secondary">
  Astro Website
</LinkButton>

Result:

Fedora Guide

Astro Website

---

LinkCard

Syntax:

<LinkCard
  title="Fedora Guide"
  description="Learn about Fedora Linux."
  href="/guides/linux/fedora/"
/>

Result:

Fedora Guide Learn about Fedora Linux.

---

Steps

Syntax:

<Steps>

1. Import the component into your MDX file:

   ```js
   import { Steps } from '@astrojs/starlight/components';
   ```

2. Wrap `<Steps>` around your ordered list items.

</Steps>

Result:

1. Import the component into your MDX file:

   import { Steps } from '@astrojs/starlight/components';

2. Wrap <Steps> around your ordered list items.

---

Tabs

Syntax:

<Tabs>
<TabItem label="Fedora">
sudo dnf install package
</TabItem>
<TabItem label="Arch">
sudo pacman -S package
</TabItem>
</Tabs>

Result:

Fedora

sudo dnf install package

Arch

sudo pacman -S package

Syntax:

import { Tabs, TabItem } from '@astrojs/starlight/components';

<Tabs>
  <TabItem label="Stars" icon="star">
    Sirius, Vega, Betelgeuse
  </TabItem>
  <TabItem label="Moons" icon="moon">
    Io, Europa, Ganymede
  </TabItem>
</Tabs>

Result:

Stars

This is a tab with a star

Moons

This is a tab with a moon