# Cards design for topics?

**URL:** https://meta.discourse.org/t/cards-design-for-topics/48107
**Category:** UX
**Created:** [August 2, 2016, 8:51am UTC](https://meta.discourse.org/t/cards-design-for-topics/48107 "2016-08-02T08:51:44Z")
**Posts on this page:** 1
**Showing post:** 2

<div class="post-metadata">

### Author: ![Tom\_Newsom](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tom_newsom/32/115981_2.png) [@Tom\_Newsom](https://meta.discourse.org/u/Tom_Newsom)
#### Post date: [August 2, 2016, 9:35am UTC](https://meta.discourse.org/t/cards-design-for-topics/48107/2 "2016-08-02T09:35:25Z")

</div>

The topic list is structured as a table, so I think it would be impossible to do this in CSS. You’d need to write a plugin that hijacks the [topic-list template](https://github.com/discourse/discourse/blob/be3a5a56ccc284b352aa65080fc6b955f73cc72a/app/assets/javascripts/discourse/templates/components/topic-list.hbs) and the [topic-list-item method](https://github.com/discourse/discourse/blob/8e87a727ef2ba46c332695aaf87e0f0d747f7364/app/assets/javascripts/discourse/components/topic-list-item.js.es6) to create `<div>`s instead. No small task.

EDIT: Hang on, you can’t `display: inline-block` a `<tr>` can you? that might work.

Yes it does work. Styling each card would be a bottomless pit of CSS despair, but I believe it can be done. Combine with the Topic List Previews plugin and you’d get an excerpt on each card.

[https://meta.discourse.org/t/topic-list-previews/41630](https://meta.discourse.org/t/topic-list-previews/41630)

---

_[View the full topic](https://meta.discourse.org/t/cards-design-for-topics/48107)._