Wiki Styling Guide

There are several ways to style your content, to make it more readable and visually appealing.

Asides / Callouts

There are 4 types of asides:

1. note
2. tip
3. caution
4. danger

The syntax to use these is as follows (i.e. for a note):

:::note
some note content
:::

# or to use a custom title

:::note[Custom Title Here]
some note content
:::

For example:

Note

some note content

Tip

some tip content

Caution

some caution content

Danger

some danger content

Badges

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

<Badge text="Note" variant="note" />
<Badge text="Success" variant="success" />
<Badge text="Tip" variant="tip" />
<Badge text="Caution" variant="caution" />
<Badge text="Danger" variant="danger" />

For example:

Note Success Tip Caution Danger

Blockquotes

> some blockquote content
>
> on multiple lines

For example:

some blockquote content

on multiple lines

Cards

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

<Card title="Check this out">Interesting content you want to highlight.</Card>

For example:

Check this out

Interesting content you want to highlight.

Card Grids

import { Card, CardGrid } from '@astrojs/starlight/components';

<CardGrid>
  <Card title="Check this out" icon="open-book">
    Interesting content you want to highlight.
  </Card>
  <Card title="Other feature" icon="information">
    More information you want to share.
  </Card>
</CardGrid>

For example:

Check this out

Interesting content you want to highlight.

Other feature

More information you want to share.

Code Blocks

A code block is indicated by a block with three backticks ``` at the start and end. You can indicate the programming language being used after the opening backticks.

```js
console.log("some code content");
```

For example:

console.log("some code content");

File Tree

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

<FileTree>

- astro.config.mjs
- package.json
- src
  - components
    - Header.astro
    - Title.astro
  - pages/

</FileTree>

For example:

• astro.config.mjs
• package.json
• Directorysrc

  • Directorycomponents

    • Header.astro
    • Title.astro
  • Directorypages/

    • …

Icons

See the Iconography reference for a list of available icons.

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

<Icon name="star" color="#ffd700" />
<Icon name="rocket" color="#047857" size="2rem" />

For example:

Link Buttons

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

<LinkButton href="/lockout/contributing">Contributing</LinkButton>
<LinkButton href="https://lockout.live" variant="secondary">
  Lockout.Live
</LinkButton>

For example:

Contributing

Lockout.Live

Link Cards

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

<LinkCard title="Contributing" href="/lockout/contributing" />
<LinkCard title="Lockout.Live" href="https://lockout.live" description="The Bingo Website for Everyone" />

For example:

Contributing

Lockout.Live The Bingo Website for Everyone

Steps

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

<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>

For example:

1. Import the component into your MDX file:

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

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

3. Profit???

Tabs

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

<Tabs>
  <TabItem label="Bingo">The default game mode.</TabItem>
  <TabItem label="Rush">Wobbers favourite game mode.</TabItem>
</Tabs>

For example:

Bingo

The default game mode.

Rush

Wobbers favourite game mode.