Overview

Combine HTML, Markdown, live bot data, and dsc.bot components to create a useful listing page.

Overview basics

The editor accepts HTML. Standard headings, paragraphs, lists, links, images, tables, and code blocks are supported. Start with a clear introduction, explain the main features, and finish with installation or support information.

htmlBasic overview

<h1>Meet my bot</h1>
<p>A short explanation of what the bot does.</p>

<h2>Features</h2>
<ul>
  <li>Useful feature</li>
  <li>Another useful feature</li>
</ul>

Markdown

Wrap Markdown in <db-markdown>. GitHub-style tables, task lists, links, and fenced code blocks are supported.

htmlMarkdown component

<db-markdown>
# Meet my bot

Build a better community with:

- Moderation tools
- Configurable welcome messages
- Useful slash commands

[Join our support server](https://discord.gg/example)
</db-markdown>

Preview

Plain content

Wrap custom layouts in <db-plain> to disable the overview's default typography styles for that content.

htmlPlain content

<db-plain style="display: grid; gap: 0.75rem;">
  <h2 style="margin: 0; font-size: 1.5rem;">A custom layout</h2>
  <p style="margin: 0;">This content is not affected by the overview's typography styles.</p>
</db-plain>

Preview

Buttons

Use <db-button> for listing actions. action is required and accepts add, vote, or link. Link actions also require a link URL.

htmlAction buttons

<div style="display: flex; flex-wrap: wrap; gap: 0.75rem;">
  <db-button action="add" variant="default">Add to Discord</db-button>
  <db-button action="vote" variant="secondary">Vote for this bot</db-button>
  <db-button action="link" link="https://example.com" variant="outline">
    Visit our website
  </db-button>
</div>

Preview

Variants include default, link, destructive, outline, secondary, accent, and the supported ghost variants.

Accordions

Group related details in <db-accordion>. Each <db-accordion-item> requires a title and can contain HTML or other supported components. Visitors can open one item at a time and close the current item.

htmlFrequently asked questions

<db-accordion>
  <db-accordion-item title="What permissions does the bot need?">
    <p>The bot only needs the permissions used by the features you enable.</p>
  </db-accordion-item>
  <db-accordion-item title="Where can I get help?">
    <p>Join our support server or read the setup guide.</p>
  </db-accordion-item>
</db-accordion>

Preview

Callouts

Use <db-callout> to emphasize a useful note or warning. A title is required. The variant can be info or warning and defaults to info.

htmlOverview callouts

<db-callout title="Setup tip">
  Run /setup after adding the bot to your server.
</db-callout>

<db-callout title="Permission required" variant="warning">
  Automatic moderation requires the Manage Messages permission.
</db-callout>

Preview

Carousels

Place <db-carousel-item> elements inside <db-carousel>. Add the boolean autoplay attribute to advance slides automatically.

htmlFeature carousel

<db-carousel autoplay>
  <db-carousel-item>
    <div style="display: grid; min-height: 18rem; place-content: center; padding: 2rem; text-align: center;">
      <h2>Simple setup</h2>
      <p>Configure the bot in a few minutes.</p>
    </div>
  </db-carousel-item>
  <db-carousel-item>
    <div style="display: grid; min-height: 18rem; place-content: center; padding: 2rem; text-align: center;">
      <h2>Powerful moderation</h2>
      <p>Keep your community safe with configurable tools.</p>
    </div>
  </db-carousel-item>
</db-carousel>

Preview

Variables

Double-bracket variables insert current listing data when the overview renders:

htmlLive values

<h1>{{ bot.username }}</h1>
<p>Used in approximately {{ bot.installs }} servers.</p>
<p>Community votes: {{ bot.votes }}</p>
<p>Avatar hash: {{ bot.avatarHash }}</p>

Available variables are bot.username, bot.avatarHash, bot.votes, and bot.installs. Translation variables may also be available when managing localized content.

Images, video, and embeds

Use standard image markup and provide useful alternative text:

htmlImage

<img src="https://example.com/feature.png" alt="A preview of the feature" />

Videos can use a direct source or nested sources for multiple formats. Poster images use the image proxy.

htmlVideo

<video controls poster="https://example.com/preview.jpg">
  <source src="https://example.com/feature.webm" type="video/webm" />
  <source src="https://example.com/feature.mp4" type="video/mp4" />
</video>

Embeds use an iframe with a valid src. Visitors must load or trust an unfamiliar host, and frames run in a restricted sandbox.

htmlEmbed

<iframe
  src="https://example.com/embed"
  width="100%"
  height="420"
></iframe>

Custom styles

Add a <style> block to customize your overview. Styles are scoped to the overview; imports and host selectors are removed.

htmlOverview styles

<style>
  .feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1rem;
  }

  .feature-card {
    padding: 1rem;
    border: 1px solid currentColor;
    border-radius: 0.75rem;
  }
</style>

<div class="feature-grid">
  <div class="feature-card">Moderation</div>
  <div class="feature-card">Welcome messages</div>
</div>

Safe authoring

Preview the overview before saving it.
Use HTTPS content from hosts you control or trust.
Give every image meaningful alternative text.
Check narrow and wide layouts; avoid fixed widths where possible.
Keep headings in order and make link text descriptive.