A Tutorial

The overview is a brief explanation of what to expect in the article. By storing it in the frontmatter we can access it for previews in search.

Callouts

Use callouts to highlight specific information.

Code Blocks

Use code blocks for code and plaintext. We also have inline code.

function Test() {
  console.log('hello');
}

code {
  position: relative;
  max-width: var(--measure);
  padding: var(--gutter);
  border-radius: var(--border-radius);
  button {
    position: absolute;
    right: var(--gutter);
    bottom: var(--gutter);
    border: var(--color-light) solid var(--border-thin);
    background-color: transparent;
    color: var(--color-light);
    &:is(:hover) {
      background-color: var(--color-grey-dark);
    }
  }
}

/
├── public/
├── src/
│   └── pages/
│       └── index.astro
└── package.json

Details

Use details callouts to hide a long explanation that may be useful but tangential.

Images

Images must contain alternative text and a caption. Images are automatically processed into various sizes and modern file formats, such as avif and webp. This ensures the right size and a lightweight version of the image is rendered on the client.

Links

Links should indicate to the user if they point to a relative page in the knowledge base or to an exerntal page.

Internal links look like this: A Second Tutorial

External links indicate they point to an external page with an icon: Google

Paragraphs, lists, etc.

Paragraphs contain proper spacing between headers and between other elements for readability.

• This
• is
• an
• unordered
• list

This is a paragraph in between a few lists.

1. This
2. is
3. an
4. ordered
5. list

Tables

Tables are useful for tabular data. Hover a row to highlight it.

See also

• Tutorial

Can't find what you need? Contact us for additional help.

Back to the top.