# Display Tags on topic cards in the Horizon theme

**URL:** <https://meta.discourse.org/t/display-tags-on-topic-cards-in-the-horizon-theme/385770>\
**Category:** Feature\
**Tags:** completed, tags, horizon-theme\
**Created:** [15 oktober 2025 om 22:14 UTC](https://meta.discourse.org/t/display-tags-on-topic-cards-in-the-horizon-theme/385770 "2025-10-15T22:14:38Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![nathank](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nathank/32/290039_2.png) [@nathank](https://meta.discourse.org/u/nathank)\
**Post date:** [15 oktober 2025 om 22:14 UTC](https://meta.discourse.org/t/display-tags-on-topic-cards-in-the-horizon-theme/385770/1 "2025-10-15T22:14:38Z")

</div>

I didn’t notice that tags were not on the topic cards in the topic lists of the Horizon theme until I saw this:

> [@The Horizon theme does not display tags on topic lists](https://meta.discourse.org/t/the-horizon-theme-does-not-display-tags-on-topic-lists/385618/4):
>
> Horizon does not support any tag display on the topic cards, so it is not compatible with Tag Icons. We are considering adding support for displaying tags on topic cards

It would certainly be very helpful to have them, so this has my 👍!

---

<div class="post-metadata">

**Author:** ![jrgong](https://avatars.discourse-cdn.com/v4/letter/j/c57346/32.png) [@jrgong](https://meta.discourse.org/u/jrgong)\
**Post date:** [31 oktober 2025 om 11:13 UTC](https://meta.discourse.org/t/display-tags-on-topic-cards-in-the-horizon-theme/385770/3 "2025-10-31T11:13:24Z")

</div>

Agree! It would be nice to be able to enable/disable whether tags are displayed.

Edit: Some workaround CSS that worked well for us (WIP)

Common CSS:

```css
/* Horizon topic list metadata + pill tags */
.topic-list-body .topic-list-item {
  row-gap: var(--space-2);
}

.topic-list-body .topic-list-item .link-bottom-line .badge-category__wrapper {
  display: none;
}

.topic-list-body .topic-list-item td.main-link .link-bottom-line {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-top: var(--space-1);
  column-gap: var(--space-3);
  row-gap: var(--space-2);
  font-size: var(--font-0) !important;
  line-height: 1.35;
  grid-column: 2 / -2;
}

.topic-list-body .topic-list-item td.main-link .discourse-tags {
  display: inline-flex!important;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.topic-list-body .topic-list-item td.main-link .discourse-tag,
.topic-list-body .topic-list-item td.main-link .discourse-tag.box {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: calc(var(--space-1) * 1.25) var(--space-3);
  border-radius: 999px;
  border: 1px solid var(--primary-low-mid);
  background: var(--secondary);
  color: var(--primary-high);
  font-weight: 500;
  box-shadow:
    inset 0 1px 0 var(--secondary-very-high),
    inset 0 -1px 0 var(--primary-low);
  text-decoration: none;
  margin-right: var(--space-1);
}

.topic-list-body .topic-list-item td.main-link .discourse-tag:hover,
.topic-list-body .topic-list-item td.main-link .discourse-tag.box:hover {
  border-color: var(--primary-low);
  background: var(--secondary-high);
}

```

Mobile CSS:

```css
    .topic-list-body .topic-list-item .badge-category__wrapper {
        font-size: var(--font-down-1);
    }
    .topic-list-item .discourse-tags {
    font-weight: normal;
    font-size: var(--font-down-2);
}

```

---

<div class="post-metadata">

**Author:** ![nathank](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nathank/32/290039_2.png) [@nathank](https://meta.discourse.org/u/nathank)\
**Post date:** [2 november 2025 om 20:12 UTC](https://meta.discourse.org/t/display-tags-on-topic-cards-in-the-horizon-theme/385770/4 "2025-11-02T20:12:24Z")

</div>

> [@jrgong](#):
>
> Edit: Some workaround CSS that worked well for us (WIP)

Nice!

Any chance you are interested in packaging that as a Theme Component and sharing it?

---

<div class="post-metadata">

**Author:** ![jrgong](https://avatars.discourse-cdn.com/v4/letter/j/c57346/32.png) [@jrgong](https://meta.discourse.org/u/jrgong)\
**Post date:** [2 november 2025 om 20:50 UTC](https://meta.discourse.org/t/display-tags-on-topic-cards-in-the-horizon-theme/385770/5 "2025-11-02T20:50:37Z")

</div>

I would rather see it baked into Horizon theme as a setting directly, it would be more appropriate there. Otherwise we just keep adding sigle feature TC after TC.

I will see if and how I could submit a PR….but don’t count on it

---

<div class="post-metadata">

**Author:** ![anoedo](https://avatars.discourse-cdn.com/v4/letter/a/bc8723/32.png) [@anoedo](https://meta.discourse.org/u/anoedo)\
**Post date:** [8 november 2025 om 21:20 UTC](https://meta.discourse.org/t/display-tags-on-topic-cards-in-the-horizon-theme/385770/6 "2025-11-08T21:20:54Z")

</div>

I’m not a professional, so CSS operations are a bit challenging for me……😭 Is it possible to have this tag display feature packaged as a built-in setting within the Horizon theme? Or perhaps implemented as a separate theme component? If there’s any possibility of this happening, I’d be willing to wait! If there’s even the slightest chance, I’d really appreciate it if someone could keep me updated. Thank you so much!

---

<div class="post-metadata">

**Author:** ![anoedo](https://avatars.discourse-cdn.com/v4/letter/a/bc8723/32.png) [@anoedo](https://meta.discourse.org/u/anoedo)\
**Post date:** [8 november 2025 om 22:10 UTC](https://meta.discourse.org/t/display-tags-on-topic-cards-in-the-horizon-theme/385770/7 "2025-11-08T22:10:38Z")

</div>

Alternatively, could you please tell me where on the website I should add this CSS? I can’t find any place to write CSS in my Horizon theme (I apologize as you can see I’m not a professional, so I lack these programming basics 😭 😢 ).

---

<div class="post-metadata">

**Author:** ![Moin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/moin/32/554653_2.png) [@Moin](https://meta.discourse.org/u/Moin)\
**Post date:** [8 november 2025 om 22:19 UTC](https://meta.discourse.org/t/display-tags-on-topic-cards-in-the-horizon-theme/385770/8 "2025-11-08T22:19:30Z")

</div>

You can add your own theme component to the theme in which you add custom css

> [@Customizing themes without an Edit code button](https://meta.discourse.org/t/customizing-themes-without-an-edit-code-button/329601):
>
> Sometimes, you may want to customize a Discourse theme but find that there’s no “Custom code” section with an “Edit code” button available. This often happens with remote themes (themes installed from an external source) and the preinstalled themes (Horizon & Foundation). Here’s how you can still add your customizations: Understanding the limitation For preinstalled themes, you see a banner telling you This theme is preinstalled and can not be deleted or customized For remote themes, you’ll…

---

<div class="post-metadata">

**Author:** ![chapoi](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chapoi/32/537252_2.png) [@chapoi](https://meta.discourse.org/u/chapoi)\
**Post date:** [3 december 2025 om 13:17 UTC](https://meta.discourse.org/t/display-tags-on-topic-cards-in-the-horizon-theme/385770/9 "2025-12-03T13:17:30Z")

</div>

Just dropping a note that this is something we are actively working on. No exact timeline yet – but it’s coming.

---

<div class="post-metadata">

**Author:** ![lindsey](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lindsey/32/318210_2.png) [@lindsey](https://meta.discourse.org/u/lindsey)\
**Post date:** [20 januari 2026 om 19:07 UTC](https://meta.discourse.org/t/display-tags-on-topic-cards-in-the-horizon-theme/385770/10 "2026-01-20T19:07:50Z")

</div>

This is now possible with high-context topic cards!

[Horizon: High Context Topic Cards](https://meta.discourse.org/t/horizon-high-context-topic-cards/393470/)

---

<div class="post-metadata">

**Author:** ![lindsey](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lindsey/32/318210_2.png) [@lindsey](https://meta.discourse.org/u/lindsey)\
**Post date:** [22 januari 2026 om 13:00 UTC](https://meta.discourse.org/t/display-tags-on-topic-cards-in-the-horizon-theme/385770/11 "2026-01-22T13:00:59Z")

</div>

This topic was automatically closed after 41 hours. New replies are no longer allowed.
