Cards design for topics?

ux
3

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

Pasted image1145×873 327 KB

CSS:

// 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.

18 Likes