Discourse Docs Card Filter

Hey Jordan

We could add a sorting parameter in category icons theme setting. For the example, in case of the 6,heart, we can add an additional sorting command, e.g. to sort by topic title ascending, it would be 6,heart,title-asc.

When opening the category card, it would then just append the docs parameters such as: /docs?ascending=true&category=71&order=title

What do you think about that?

1 Like

While it’s possible this could work well on a site, without much feedback around this topic focusing on the ability to sort the cards, I dont necessarily feel the time spent on getting this to work properly is currently warranted.

That being said, we do encourage PRs on components, as well as forking a component to use in your own way!

Please feel free to make a PR with this functionality, or fork it to develop for yourself.


I can make a PR for this request as @jrgong is sponsoring the work.


Bumping this one! Has anyone been able to figure it out?

1 Like

My solution was to turn off the cards (since I have too many categories to make them useful anyway) and modify the sort order of Docs. You can see more about that here Modifying Discourse Docs to only allow for sorting by Title - #2 by Nick_Chomey

1 Like

We definitely welcome beneficial PRs to our components!

If you were to add the ability to sort these cards, I would suggest creating a new value-list where you can put in the order of the cards by category ID and tag ID. I would not add them to an already existing value list for something unrelated.


1 Like

@jordan-vidrine Thank you for designing the great component. Is there anyway to disable the compnent on mobile device but show on PC/Mac ?

Fair enough. But could you at least change the category icons setting to value-list? It’s much easier to manage the cards in multiple text fields rather than a single one. :wink:

And as temporary workaround, it would be super helpful if each docs card had a CSS class with the respective category or tag slug.

Before: <a class="docs-card-box category-card">
After: <a class="docs-card-box [category-slug] category-card">

1 Like

This is a good suggestion :+1:


Let me know if you need help with testing, will be happy to be the lab rat :slight_smile:

1 Like

After thinking over it more, I have decided against changing the category icons setting to a value list as without a fallback option, would cause current users components to break.

Adding a fallback would look like checking to see if either the users has set the icons in the current field, or the new value-list field and I feel that is just too cumbersome to add onto this component, as it would add another level of settings and cause possible confusion.

As for the class additions, its a great idea, but I do not have a timeline for when this will be added as there are more pertinent things needing my attention.

That being said, when possible we also welcome PRs to our components, we are open source after all!

1 Like

Hey @jordan-vidrine

thx for the feedback, I will keep that in mind for any PR coming your way :slight_smile:

BTW on our forum the docs cards are not hidden when an actual docs topic is opened.

See example:

We had same issue on 2.7.x. and after 2.8.1 update it still persists. Any idea what causes the issue?

This is because you are not sorting or filtering yet, you are only linking to an article being rendered in the docs view, without any filters yet. The cards only disappear once a card is clicked in order to set the current filter.

1 Like

This latest PR which has been merged adds category & tag names as classes to their cards.

1 Like

When a tag or category starts with a digit, the css class becomes invalid. Can you make an adjustment, for example prepend card- to the class name to prevent the issue?

Currently: <a class="docs-card-box tag-card [category]">
Fixed: <a class="docs-card-box tag-card card-[category]">

1 Like

Hello, can we display all card later we click any card?
Thank you!

Excuse me,
Can we uppercase tag?
Thank you!

There’s the force lowercase tags admin setting you could toggle that may help here:


Thank you Very much :slight_smile:


You can hide it using CSS…

@media screen and (max-width: 700px) {
.docs-cards-filter {
    display: none;