Adding a banner above the topic list with a theme component

This guide shows how to put a dismissible banner above the topic list using a theme component, without editing your theme.

1. Create the component

In Admin › Customize › Themes, choose Install › Create new › Component and name it "Latest banner".

2. Add the markup

In the component's Common › After header field:

<div class="tw-banner" data-dismiss-key="banner-2026-10">
  <strong>Office hours</strong> are every Thursday at 17:00 UTC.
  <button class="tw-banner__close" aria-label="Dismiss">×</button>
</div>

3. Style it

.tw-banner {
  margin: 0 auto 1rem;
  max-width: var(--topic-list-width);
  padding: 0.75rem 1rem;
  border-radius: 8px;
  background: var(--tertiary-very-low);
}

4. Add it to your theme

Open your main theme and add "Latest banner" under Included components. Done — it shows to every visitor until they dismiss it.

Followed this word for word and it worked first time. Thank you for writing it for non-developers.

Worth noting the dismissal is per-browser, so somebody on a phone and a laptop will see it twice.