# 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:** [October 15, 2025, 10:14pm 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:** 1\
**Showing post:** 3

<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:** [October 31, 2025, 11:13am 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);
}

```

---

_[View the full topic](https://meta.discourse.org/t/display-tags-on-topic-cards-in-the-horizon-theme/385770)._