# Topic Cards
**URL:** https://meta.discourse.org/t/topic-cards/296048
**Category:** Theme component
**Tags:** official, topic-cards
**Created:** [February 20, 2024, 12:04pm UTC](https://meta.discourse.org/t/topic-cards/296048 "2024-02-20T12:04:45Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@Discourse](https://meta.discourse.org/u/Discourse)
#### Post date: [February 20, 2024, 12:04pm UTC](https://meta.discourse.org/t/topic-cards/296048/1 "2024-02-20T12:04:45Z")
| | | |
| --- | --- | --- |
| :discourse2: | **Summary** | **Topic Cards** restyle the topic list to display as cards with a thumbnail |
| :eyeglasses: | **Preview** | [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/topic-cards) |
| :hammer_and_wrench: | **Repository** | [https://github.com/discourse/discourse-topic-cards](https://github.com/discourse/discourse-topic-cards) |
| :open_book: | **New to Discourse Themes?** | [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |
Install this theme component
> [@](#):
>
> :discourse2: As this is an #official theme component maintained by the Discourse team, #Support, #Contribute > Bug, #Contribute > UX, and #Contribute > Feature requests can be made in the respective categories here on Meta, and tagged with the appropriate theme component tag. Click on a link below to get one started. :+1:
>
> [:question: **Support**](https://meta.discourse.org/new-topic?category_id=6&tags=topic-cards "Ask for support on configuring and using Topic Cards") [:bug: **Bug**](https://meta.discourse.org/new-topic?category_id=1&tags=topic-cards "A bug report means something is broken, preventing normal/typical use of the theme component") [:eyes: **UX**](https://meta.discourse.org/new-topic?category_id=9&tags=topic-cards "Discussion about the user interface of Topic Cards, and how features are presented (including language and UI elements)") [:bulb: **Feature**](https://meta.discourse.org/new-topic?category_id=2&tags=topic-cards "Discussion about how existing Topic Cards features can be improved or enhanced, and how proposed new features could work")
> :information_source: This theme component may cause conflicts with other customisations to the topic list
### Features
This component takes inspiration from [Topic Thumbnails](https://meta.discourse.org/t/topic-list-thumbnails/150602), simplifies the use, adds excerpts & full-card clicking, and sprinkles some extra CSS magic.
- Make full card clickable (except for the original poster avatar)
- Show the excerpt
- Show a topic thumbnail, if available
- Show published date
- Trim away some metadata and make likes more prominent
Desktop
Mobile
### Settings
| Translation | Default |
| --- | --- |
| published | Published |
> :discourse2: **Hosted by us?** Theme components are available to use on our Standard, Business, and Enterprise plans.
> Last edited by @chapoi 2024-06-18T00:42:14Z
>
> > **Check document**
> >
> > Perform check on document:
---
### Author:  [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [February 20, 2024, 1:59pm UTC](https://meta.discourse.org/t/topic-cards/296048/2 "2024-02-20T13:59:18Z")
The vertical blue line covers parts of the text
(Seems not to depend on browser/device, I tried Edge/Windows, Chrome/Android and firefox/Android)
---
### Author:  [@frold](https://meta.discourse.org/u/frold)
#### Post date: [February 20, 2024, 2:59pm UTC](https://meta.discourse.org/t/topic-cards/296048/3 "2024-02-20T14:59:38Z")
worked out of the box in chrome on windows and chrome at iphone 8
---
### Author:  [@chapoi](https://meta.discourse.org/u/chapoi)
#### Post date: [February 20, 2024, 3:03pm UTC](https://meta.discourse.org/t/topic-cards/296048/4 "2024-02-20T15:03:53Z")
> [@Moin](#):
>
> The vertical blue line covers parts of the text
Right, forgot this. Will fix – thanks
---
### Author:  [@jayme](https://meta.discourse.org/u/jayme)
#### Post date: [February 21, 2024, 12:36am UTC](https://meta.discourse.org/t/topic-cards/296048/5 "2024-02-21T00:36:06Z")
how do I get rid of the “replies” and the “activity” tabs under the “+New Topic” button?
its making my topic exert really short and it looks bad haha
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [February 21, 2024, 12:59am UTC](https://meta.discourse.org/t/topic-cards/296048/7 "2024-02-21T00:59:01Z")
Hi @jayme, it look like those tabs are not part of this component and are likely put there by another theme component or plugin. When I load a test forum with this component, those tabs don’t exist, nor do they show in the screenshots in the OP. You may have to disable other components to find which one, then if there is no setting for those tabs you may have to disable it.
---
### Author:  [@chapoi](https://meta.discourse.org/u/chapoi)
#### Post date: [February 21, 2024, 10:58am UTC](https://meta.discourse.org/t/topic-cards/296048/8 "2024-02-21T10:58:53Z")
Border/box-shadow doesn’t work well with cards, so had to improvise a bit to get a replacement indication
[https://github.com/discourse/discourse-topic-cards/pull/6](https://github.com/discourse/discourse-topic-cards/pull/6)
---
### Author:  [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [February 22, 2024, 9:48pm UTC](https://meta.discourse.org/t/topic-cards/296048/9 "2024-02-22T21:48:17Z")
> [@chapoi](#):
>
> so had to improvise a bit to get a replacement indication
Somehow I don’t see any indicator now :thinking:
---
### Author:  [@chapoi](https://meta.discourse.org/u/chapoi)
#### Post date: [February 23, 2024, 6:30am UTC](https://meta.discourse.org/t/topic-cards/296048/10 "2024-02-23T06:30:37Z")
Are you using the j/k commands to navigate?
---
### Author:  [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [February 23, 2024, 8:49am UTC](https://meta.discourse.org/t/topic-cards/296048/11 "2024-02-23T08:49:31Z")
No, I just used Tab. Well I actually used my tablet. After I used the back button, the post is usually highlighted. That didn’t happen here. I only tried this on the computer for the recording.
---
### Author:  [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [March 1, 2024, 12:06pm UTC](https://meta.discourse.org/t/topic-cards/296048/12 "2024-03-01T12:06:43Z")
4 posts were split to a new topic: [Topic cards for specific categories](https://meta.discourse.org/t/topic-cards-for-specific-categories/297454)
---
### Author:  [@derak](https://meta.discourse.org/u/derak)
#### Post date: [February 25, 2024, 3:41am UTC](https://meta.discourse.org/t/topic-cards/296048/13 "2024-02-25T03:41:15Z")
awesome theme component!
---
### Author:  [@Gonerdot](https://meta.discourse.org/u/Gonerdot)
#### Post date: [March 2, 2024, 6:35pm UTC](https://meta.discourse.org/t/topic-cards/296048/14 "2024-03-02T18:35:38Z")
I tried to install this component on many themes, but it looks a little crooked everywhere. What am I doing wrong?
---
### Author:  [@chapoi](https://meta.discourse.org/u/chapoi)
#### Post date: [March 2, 2024, 6:40pm UTC](https://meta.discourse.org/t/topic-cards/296048/15 "2024-03-02T18:40:54Z")
Hmmm… difficult to say. It looks like somehow the height of the cards is constrained, and the content bigger than usual.
Can you first verify it’s not due to a conflict with other components or theme? I see you also have the right sidebar enabled and that could affect some size calculations maybe.
So please check that and let me know?
---
### Author:  [@Gonerdot](https://meta.discourse.org/u/Gonerdot)
#### Post date: [March 2, 2024, 6:44pm UTC](https://meta.discourse.org/t/topic-cards/296048/16 "2024-03-02T18:44:46Z")
I disabled all other components, but the problem did not solve.
---
### Author:  [@chapoi](https://meta.discourse.org/u/chapoi)
#### Post date: [March 2, 2024, 6:46pm UTC](https://meta.discourse.org/t/topic-cards/296048/17 "2024-03-02T18:46:56Z")
Odd! :confused: Can I have a look at the forum youve installed it on?
---
### Author:  [@Gonerdot](https://meta.discourse.org/u/Gonerdot)
#### Post date: [March 2, 2024, 6:48pm UTC](https://meta.discourse.org/t/topic-cards/296048/18 "2024-03-02T18:48:43Z")
[bearblog.ru](http://bearblog.ru)
But you need to change the theme to dracula in your profile settings.
---
### Author:  [@chapoi](https://meta.discourse.org/u/chapoi)
#### Post date: [March 2, 2024, 6:50pm UTC](https://meta.discourse.org/t/topic-cards/296048/19 "2024-03-02T18:50:08Z")
Thanks, Ill have a look!
---
### Author:  [@Gonerdot](https://meta.discourse.org/u/Gonerdot)
#### Post date: [March 2, 2024, 6:51pm UTC](https://meta.discourse.org/t/topic-cards/296048/20 "2024-03-02T18:51:35Z")
It seems to me that the problem can be solved by limiting the number of characters in the preview, but I don’t know how to do this
---
### Author:  [@chapoi](https://meta.discourse.org/u/chapoi)
#### Post date: [March 4, 2024, 4:21pm UTC](https://meta.discourse.org/t/topic-cards/296048/21 "2024-03-04T16:21:27Z")
Okay so, the topic-cards need a max-height, otherwise you get issues like:
I can’t say why yours is not fitting well, because in the example on theme creator I can also uses multi-line titles and still fits:
It might have something to do with the font-size, font-family, or line-height. Unfortunately that will require some individual tweaking, and not something I can apply a fix-for-all for.
A possible solution is, as you said, limiting the title to only take 1 line, which you could do by adding this css:
```plaintext
.topic-card {
.link-top-line {
max-width: 100%;
overflow: hidden;
.title {
display: block;
white-space: no-wrap;
}
}
}
```
[Next page](https://meta.discourse.org/t/topic-cards/296048.md?page=2)