# Cards design for topics?

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

<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: [2016年八月2日 11:00 UTC](https://meta.discourse.org/t/cards-design-for-topics/48107/3 "2016-08-02T11:00:45Z")

</div>

I had a quick go at this (combined with Topic Previews plugin)

 ![](https://global.discourse-cdn.com/meta/original/3X/4/d/4db7aadd41a29e256d580e1e6270bd1727b1b4b5.png)

CSS:

```plaintext
// Display topic list rows as cards

.topic-list-item {
    display: inline-block;
    max-width: 350px;
    box-shadow: 2px 2px 2px 2px #888888;
    margin: 10px;
}

// Hide extraneous topic list columns

.posters, th.posts, td.posts, .views, .activity, {
    display:none;
}

```

You can embellish from there.  
(change the `post excerpt maxlength` setting to get longer excerpts)

Getting Author Info to display properly is outside the scope of simple styling, as this isn’t included in the standard list.

---

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