Category List with Banners

This component adds optional banners to the default category page styles Categories Only and Categories With Featured Topics:

4543e940b42af9d41ae62783c0197e9543c1d5ea_2_690x496

You can add banners in the component settings by defining the category right below the banner, a banner color and the heading text. There’s also an option to hide the default colored borders:

464cc2077487e10127f0a2ad228812d76c4fffc3

To add styles you can select the general class, as well as specific banners by category-id:

.category list .category-list-banner {
  &.category-5 { [style a specific banner] }
  &:after { [style the headings]}
}

For example you could color-code your categories:

bf49e9a0b56789474c67cadb893af076796fab97_2_690x455

Or add background images:

e28a72499caf4edc8c76ccf1a91d57940076884b_2_683x499

:warning: Caution: This component only adds layout elements to the category page. So you can’t refer to these headings anywhere else on your site. Another caution: There’s no default page style Categories Only on mobile. It will always show featured topics as well.

:cd: Repository: GitHub - nolosb/discourse-category-list-banners: A Discourse theme component. Adds optional banners to the default category lists.

:parrot: Discussion: Category List with Banners - theme-component - Discourse Meta