# Category List with Banners

**URL:** <https://meta.discourse.org/t/category-list-with-banners/201280>\
**Category:** Theme component\
**Tags:** unmaintained\
**Created:** [August 21, 2021, 7:11pm UTC](https://meta.discourse.org/t/category-list-with-banners/201280 "2021-08-21T19:11:39Z")\
**Posts on this page:** 1\
**Showing post:** 12

<div class="post-metadata">

**Author:** ![manuel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/manuel/32/468169_2.png) [@manuel](https://meta.discourse.org/u/manuel)\
**Post date:** [April 19, 2022, 7:01pm UTC](https://meta.discourse.org/t/category-list-with-banners/201280/12 "2022-04-19T19:01:06Z")

</div>

Yeah sure, you can style the banners using these classes:

> [@manuel](#):
>
> To add styles you can select the general class, as well as specific banners by category-id:
> 
> ```plaintext
> .category list .category-list-banner {
> &.category-5 { [style a specific banner] }
> &:after { [style the headings]}
> }
> 
> ```

If you want to overwrite **existing** declarations on the general class you’d need to use the `!important` property. E.g. for the styles you mentioned:

```plaintext
.category-list .category-list-banner {
    justify-content: flex-start !important;
    min-height: unset !important;
    &:after {
        font-size: var(--font-up-3) !important;
    }
}

```

That’s because the styles are actually declared on the specific banners. Guess I could improve that on the component, but for now you’d need to overwrite with `important`.

---

_[View the full topic](https://meta.discourse.org/t/category-list-with-banners/201280)._