# MD Topic List component

**URL:** https://meta.discourse.org/t/md-topic-list-component/117694
**Category:** Theme component
**Created:** [May 14, 2019, 1:59pm UTC](https://meta.discourse.org/t/md-topic-list-component/117694 "2019-05-14T13:59:35Z")
**Posts on this page:** 20
**Page:** 2

<div class="post-metadata">

### Author: ![Steven](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/steven/32/187890_2.png) [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [March 27, 2020, 1:46pm UTC](https://meta.discourse.org/t/md-topic-list-component/117694/23 "2020-03-27T13:46:46Z")

</div>

You can edit the component directly and change the header part and paste this. It will use the older version

```plaintext
<script type='text/x-handlebars' data-template-name='list/topic-list-item.raw'>

{{#if bulkSelectEnabled}}
  <td class="bulk-select">
    <input type="checkbox" class="bulk-select">
  </td>
{{/if}}

<td class='main-link clearfix' colspan="1">
  <span class='link-top-line'>
    {{~raw-plugin-outlet name="topic-list-before-status"}}
    {{~raw "topic-status" topic=topic}}
    {{~topic-link topic class="raw-link raw-topic-link"}}
    {{~#if topic.featured_link}}
    {{~topic-featured-link topic}}
    {{~/if}}
    {{~raw-plugin-outlet name="topic-list-after-title"}}
    {{~#if showTopicPostBadges}}
    {{~raw "topic-post-badges" unread=topic.unread newPosts=topic.displayNewPosts unseen=topic.unseen url=topic.lastUnreadUrl newDotText=newDotText}}
    {{~/if}}
  </span>
  <div class="link-bottom-line">
    {{#unless hideCategory}}
      {{#unless topic.isPinnedUncategorized}}
        {{category-link topic.category}}
      {{/unless}}
    {{/unless}}
    <span class='topic-creator'>{{d-icon "user"}} <a href="/users/{{topic.creator.username}}" data-auto-route="true" data-user-card="{{topic.creator.username}}">{{topic.creator.username}}</a></span> &nbsp;
    {{discourse-tags topic mode="list" tagsForUser=tagsForUser}}
    {{raw "list/action-list" topic=topic postNumbers=topic.liked_post_numbers className="likes" icon="heart"}}
  </div>
  {{#if expandPinned}}
    {{raw "list/topic-excerpt" topic=topic}}
  {{/if}}
</td>

{{raw "list/posts-count-column" topic=topic}}

{{#if showLikes}}
  <td class="num likes">
    {{#if hasLikes}}
      <a href='{{topic.summaryUrl}}'>
        {{number topic.like_count}} {{d-icon "heart"}}</td>
  </a>
{{/if}}
{{/if}}

{{#if showOpLikes}}
  <td class="num likes">
    {{#if hasOpLikes}}
      <a href='{{topic.summaryUrl}}'>
        {{number topic.op_like_count}} {{d-icon "heart"}}</td>
  </a>
{{/if}}
{{/if}}

<td class="num views {{topic.viewsHeat}}">{{number topic.views numberKey="views_long"}}</td>

<td class="last-post">
<div class='poster-avatar'>
<a href="{{topic.lastPostUr}}" data-user-card="{{topic.last_poster_username}}">{{avatar topic.lastPoster usernamePath="username" imageSize="medium"}}</a>
</div>
<div class='poster-info'>
<span class='editor'><a href="/users/{{topic.last_poster_username}}" data-auto-route="true" data-user-card="{{topic.last_poster_username}}">{{topic.last_poster_username}}</a></span>
<br />
<a href="{{topic.lastPostUrl}}">
{{format-date topic.bumpedAt format="tiny"}}
</a>
</div>
</td>
</script>

<script type='text/x-handlebars' data-template-name='topic-list-header.raw'>
{{#if bulkSelectEnabled}}
  <th class="bulk-select">
    {{#if canBulkSelect}}
      {{raw "flat-button" class="bulk-select" icon="list" title="topics.bulk.toggle"}}
    {{/if}}
  </th>
{{/if}}
{{raw "topic-list-header-column" order='default' name=listTitle bulkSelectEnabled=bulkSelectEnabled showBulkToggle=toggleInTitle canBulkSelect=canBulkSelect}}
{{raw "topic-list-header-column" sortable=sortable number='true' order='posts' name='replies'}}
{{#if showLikes}}
  {{raw "topic-list-header-column" sortable=sortable number='true' order='likes' name='likes'}}
{{/if}}
{{#if showOpLikes}}
  {{raw "topic-list-header-column" sortable=sortable number='true' order='op_likes' name='likes'}}
{{/if}}
{{raw "topic-list-header-column" sortable=sortable number='true' order='views' name='views'}}
{{raw "topic-list-header-column" sortable=sortable number='true' order='activity' name='activity'}}
</script>

<script>
(function(){
var TopicListItemView = require('discourse/components/topic-list-item').default;
TopicListItemView.reopen({
    showCategory: function(){
        return !this.get('controller.hideCategory') &&
                this.get('topic.creator') &&
                this.get('topic.category.name') !== 'uncategorized';
    }.property()
});
   
})();
</script>

```

---

<div class="post-metadata">

### Author: ![WorldIsMine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/worldismine/32/455660_2.png) [@WorldIsMine](https://meta.discourse.org/u/WorldIsMine)
#### Post date: [March 27, 2020, 5:05pm UTC](https://meta.discourse.org/t/md-topic-list-component/117694/24 "2020-03-27T17:05:19Z")

</div>

Thank you for that 😃

---

<div class="post-metadata">

### Author: ![Steven](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/steven/32/187890_2.png) [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [March 27, 2020, 5:31pm UTC](https://meta.discourse.org/t/md-topic-list-component/117694/25 "2020-03-27T17:31:43Z")

</div>

I created a specific branch for those who don’t want to edit the component and can’t upgrade their discourse forum right now

You can install a new component, use the advanced settings

Repository containing theme: `https://github.com/iunctis/md-topic-list`  
Branch name: `bf-20200323`

 ![image](https://global.discourse-cdn.com/meta/original/3X/8/0/80dbe62efbd268e45302b7bdc540cce3c5f9b119.png)

You’ll have the component compatible with the version Discourse older than march 23, 2020. Before [this commit](https://github.com/discourse/discourse/commit/dc1836573d96768b4cc685c52c2c15aeac9f069e)

---

<div class="post-metadata">

### Author: ![Steven](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/steven/32/187890_2.png) [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [March 30, 2020, 7:59pm UTC](https://meta.discourse.org/t/md-topic-list-component/117694/26 "2020-03-30T19:59:48Z")

</div>

I was playing a bit with the topic list presentation on **mobile** , it still needs some work but would you be interested with something like this (it would be a separate component):

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

The current topic list mobile presentation:

 ![image](https://global.discourse-cdn.com/meta/original/3X/4/8/4896cb853ee05f3557bba1fcbef8bb9de283cdbb.png)

The avatar still opens the user card, the date links to the last post

---

<div class="post-metadata">

### Author: ![ScammerRevolts](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/scammerrevolts/32/577396_2.png) [@ScammerRevolts](https://meta.discourse.org/u/ScammerRevolts)
#### Post date: [March 31, 2020, 6:55am UTC](https://meta.discourse.org/t/md-topic-list-component/117694/27 "2020-03-31T06:55:38Z")

</div>

I definitely would, would be a nice addition especially since the layout for mobile and desktop would be similar instead of looking totally different 🙂

---

<div class="post-metadata">

### Author: ![jrgong](https://avatars.discourse-cdn.com/v4/letter/j/c57346/32.png) [@jrgong](https://meta.discourse.org/u/jrgong)
#### Post date: [March 31, 2020, 8:45pm UTC](https://meta.discourse.org/t/md-topic-list-component/117694/28 "2020-03-31T20:45:49Z")

</div>

> [@Steven](#):
>
> view the theme component on the theme creator forum
> 
> ![](https://global.discourse-cdn.com/meta/original/3X/c/9/c99a4a896a9c12c0801fadd0167a6600c070bc55.png) [Discourse Theme Creator](https://theme-creator.discourse.org/theme/Steven/md-topic-list)
> 
> ![](https://global.discourse-cdn.com/meta/original/3X/7/5/752f172ac828d52f5059a1165da7c91973029eb2.png)
> 
> ### [‘MD Topic List’ by @Steven](https://theme-creator.discourse.org/theme/Steven/md-topic-list)
> 
> A theme for Discourse shared on [theme-creator.discourse.org](http://theme-creator.discourse.org)

The preview link doesn’t work. When I try to access, I get this error message:

Access Denied

while trying to load [/theme/Steven/md-topic-list.json](https://theme-creator.discourse.org/theme/Steven/md-topic-list.json)

Something went wrong.

---

<div class="post-metadata">

### Author: ![Steven](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/steven/32/187890_2.png) [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [March 31, 2020, 8:48pm UTC](https://meta.discourse.org/t/md-topic-list-component/117694/29 "2020-03-31T20:48:33Z")

</div>

Sorry about that, I cleaned up my Discourse theme pages earlier but I cleaned a bit too much 🧹

It should be fixed now, thanks for reporting!

> **['MD Topic List' by @Steven](https://discourse.theme-creator.io/theme/Steven/md-topic-list)**
>
> A customization for Discourse shared on Discourse Theme Creator

---

<div class="post-metadata">

### Author: ![jrgong](https://avatars.discourse-cdn.com/v4/letter/j/c57346/32.png) [@jrgong](https://meta.discourse.org/u/jrgong)
#### Post date: [April 4, 2020, 10:14am UTC](https://meta.discourse.org/t/md-topic-list-component/117694/30 "2020-04-04T10:14:57Z")

</div>

Hey @Steven

I am on 2.4.1 already, yet my avatars are still gone. See my topic preview screenshot her

 ![Screenshot 2020-04-04 at 12.14.04](https://global.discourse-cdn.com/meta/original/3X/b/4/b4a6444101195e615aeee942b4f8a086d35d7373.png)

---

<div class="post-metadata">

### Author: ![Steven](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/steven/32/187890_2.png) [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [April 4, 2020, 11:21am UTC](https://meta.discourse.org/t/md-topic-list-component/117694/31 "2020-04-04T11:21:38Z")

</div>

Have you tried this branch?

If you have a Discourse version older than march 23rd, you need to use this branch until you upgrade your forum:

> [@Steven](#):
>
> I created a specific branch for those who don’t want to edit the component and can’t upgrade their discourse forum right now
> 
> You can install a new component, use the advanced settings
> 
> Repository containing theme: `https://github.com/iunctis/md-topic-list`  
> Branch name: `bf-20200323`
> 
> ![image](https://global.discourse-cdn.com/meta/original/3X/8/0/80dbe62efbd268e45302b7bdc540cce3c5f9b119.png)
> 
> You’ll have the component compatible with the version Discourse older than march 23, 2020. Before [this commit](https://github.com/discourse/discourse/commit/dc1836573d96768b4cc685c52c2c15aeac9f069e)

---

<div class="post-metadata">

### Author: ![jrgong](https://avatars.discourse-cdn.com/v4/letter/j/c57346/32.png) [@jrgong](https://meta.discourse.org/u/jrgong)
#### Post date: [April 25, 2020, 1:03pm UTC](https://meta.discourse.org/t/md-topic-list-component/117694/32 "2020-04-25T13:03:53Z")

</div>

Is anyone running this theme component in combination Topic List Previews plugin. Or is it causing issues after all?

I am currently using Sam’s minimal theme, but it’s not working with Topic List Previews at its current state. So I am considering switching to be able to have both: Minimalistic topic list and image previews of topics

---

<div class="post-metadata">

### Author: ![Steven](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/steven/32/187890_2.png) [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [April 25, 2020, 1:10pm UTC](https://meta.discourse.org/t/md-topic-list-component/117694/33 "2020-04-25T13:10:00Z")

</div>

It’s expected, the topic list previews plugin override the topic list items templates, so as this theme component. I think the plugin has the edge over the theme component, so I think the best way to has both is to fork the topic list previews plugin and customize the templates.

I did a customized fork myself if you want to check how it can be done : [https://github.com/iunctis/discourse-topic-previews](https://github.com/iunctis/discourse-topic-previews)  
These changes specifically - [https://github.com/iunctis/discourse-topic-previews/commit/6905fced0d5f85a6bc01c9bc0fb657a17475cb41](https://github.com/iunctis/discourse-topic-previews/commit/6905fced0d5f85a6bc01c9bc0fb657a17475cb41) (I don’t really recommand this version to your forum because I have a customized theme that comes with it, and I changed a few things in the tiles most users wouldn’t like)

The desktop templates in the original plugin are here, this is the best way to start : [https://github.com/paviliondev/discourse-topic-previews/tree/master/assets/javascripts/discourse/templates/list](https://github.com/paviliondev/discourse-topic-previews/tree/master/assets/javascripts/discourse/templates/list)

It’s totally doable but you need to be a bit confortable with github (to stay up to date with the plugin) and template customization.

---

<div class="post-metadata">

### Author: ![Steven](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/steven/32/187890_2.png) [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [May 19, 2020, 7:51pm UTC](https://meta.discourse.org/t/md-topic-list-component/117694/34 "2020-05-19T19:51:22Z")

</div>

I pushed a little upgrade just now. No new feature but I added the compatibility with the new thumbnails functions.

The theme component is compatible with these components

> [@Topic List Thumbnails](https://meta.discourse.org/t/topic-list-thumbnails-theme-component/150602):
>
> discourse2Summary Topic List Thumbnails allows you to show topic thumbnails in topic list views.eyeglassesPreview [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/topic-list-thumbnails-blog) (blog style) [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/topic-list-thumbnails-grid) (grid) [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/topic-list-thumbnail-list) (list) [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/topic-list-thumbnails-masonry) (masonry) [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/topic-list-thumbnails-minimal-grid) (minimal grid)hammer_and_wrenchRepository Link [https://github.com/discourse/discourse-topic-thumbnails](https://github.com/discourse/discourse-topic-thumbnails)open_bookNew to Discourse Themes? [Begi…](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966)

> [@Topic List Excerpts](https://meta.discourse.org/t/topic-list-excerpts-theme-component/151520):
>
> discourse2Summary Topic List Excerpts allows you to enable excerpts for unpinned topics (by default, Discourse only displays topic excerpts for pinned topics).eyeglassesPreview [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/topic-list-excerpts)hammer_and_wrenchRepository Link [https://github.com/discourse/discourse-topic-excerpts](https://github.com/discourse/discourse-topic-excerpts)open_bookNew 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 Features Works great alo…

---

<div class="post-metadata">

### Author: ![nory](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nory/32/173397_2.png) [@nory](https://meta.discourse.org/u/nory)
#### Post date: [July 7, 2020, 7:09pm UTC](https://meta.discourse.org/t/md-topic-list-component/117694/35 "2020-07-07T19:09:59Z")

</div>

Hi, it is compatible also with this plugin? [Topic List Previews (legacy)](https://meta.discourse.org/t/topic-list-previews/101646)  
Thank you,  
Deb

---

<div class="post-metadata">

### Author: ![Steven](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/steven/32/187890_2.png) [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [July 7, 2020, 8:15pm UTC](https://meta.discourse.org/t/md-topic-list-component/117694/36 "2020-07-07T20:15:31Z")

</div>

Sadly not since we edit the same file.

You can make both work if you change the header code, and integrate tiles style with my modifications but it require some understanding of how this works.

You can use some inspiration in my old custom version of the topic list preview (it was before the official thumbnails theme component, so it may not work at the moment) : [https://github.com/iunctis/discourse-topic-previews/blob/master/assets/javascripts/discourse/templates/list/topic-list-item.hbr](https://github.com/iunctis/discourse-topic-previews/blob/master/assets/javascripts/discourse/templates/list/topic-list-item.hbr)  
But it used different css class and alignmnent for some things, this may not work with your forum.

---

<div class="post-metadata">

### Author: ![pinder99](https://avatars.discourse-cdn.com/v4/letter/p/dfb087/32.png) [@pinder99](https://meta.discourse.org/u/pinder99)
#### Post date: [January 20, 2021, 10:20am UTC](https://meta.discourse.org/t/md-topic-list-component/117694/37 "2021-01-20T10:20:33Z")

</div>

Hi @Steven i am using your plugin for a while now and i removed activity tab and view tab from topic so i can move both of them below topics like your plugin but i am not successful can you help me out , i just want to add date(activity) like the image below

![image](https://global.discourse-cdn.com/meta/original/3X/8/f/8f3b8906aa358c0b0be510ef7a6ceb46ec98188e.png)

---

<div class="post-metadata">

### Author: ![Steven](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/steven/32/187890_2.png) [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [January 20, 2021, 12:57pm UTC](https://meta.discourse.org/t/md-topic-list-component/117694/38 "2021-01-20T12:57:00Z")

</div>

First you need to change the structure of the table and delete the view and activity tabs columns

```js
<script type='text/x-handlebars' data-template-name='topic-list-header.raw'>
{{#if bulkSelectEnabled}}
  <th class="bulk-select">
    {{#if canBulkSelect}}
      {{raw "flat-button" class="bulk-select" icon="list" title="topics.bulk.toggle"}}
    {{/if}}
  </th>
{{/if}}
{{raw "topic-list-header-column" order='default' name=listTitle bulkSelectEnabled=bulkSelectEnabled showBulkToggle=toggleInTitle canBulkSelect=canBulkSelect}}
{{raw "topic-list-header-column" sortable=sortable number='true' order='posts' name='replies'}}
</script>

```

You can delete the last line also if you want to delete the replies column

* * *

Then let’s takle the big part with the content, first, i’ve deleted the two columns

```js
<script type='text/x-handlebars' data-template-name='list/topic-list-item.raw'>

{{~raw-plugin-outlet name="topic-list-before-columns"}}

{{#if bulkSelectEnabled}}
  <td class="bulk-select">
    <input type="checkbox" class="bulk-select">
  </td>
{{/if}}

<td class='main-link clearfix' colspan="1">
  {{~raw-plugin-outlet name="topic-list-before-link"}}
  <span class='link-top-line'>
    {{~raw-plugin-outlet name="topic-list-before-status"}}
    {{~raw "topic-status" topic=topic}}
    {{~topic-link topic class="raw-link raw-topic-link"}}
    {{~#if topic.featured_link}}
    {{~topic-featured-link topic}}
    {{~/if}}
    {{~raw-plugin-outlet name="topic-list-after-title"}}
    {{~raw "list/unread-indicator" includeUnreadIndicator=includeUnreadIndicator 
                                   topicId=topic.id 
                                   unreadClass=unreadClass~}}
    {{~#if showTopicPostBadges}}
    {{~raw "topic-post-badges" unread=topic.unread newPosts=topic.displayNewPosts unseen=topic.unseen url=topic.lastUnreadUrl newDotText=newDotText}}
    {{~/if}}
  </span>
  <div class="link-bottom-line">
    {{#unless hideCategory}}
      {{#unless topic.isPinnedUncategorized}}
        {{category-link topic.category}}
      {{/unless}}
    {{/unless}}
    <span class='topic-creator'>{{d-icon "user"}} <a href="/users/{{topic.creator.username}}" data-auto-route="true" data-user-card="{{topic.creator.username}}">{{topic.creator.username}}</a></span>
	{{discourse-tags topic mode="list" tagsForUser=tagsForUser}}
    {{raw "list/action-list" topic=topic postNumbers=topic.liked_post_numbers className="likes" icon="heart"}}
  </div>
  {{#if expandPinned}}
    {{raw "list/topic-excerpt" topic=topic}}
  {{/if}}
</td>

{{raw "list/posts-count-column" topic=topic}}

</script>

```

Then we add the content we want, I won’t add all the details you need because it requires a bit of work, but it should look like this

```js
<script type='text/x-handlebars' data-template-name='list/topic-list-item.raw'>

{{~raw-plugin-outlet name="topic-list-before-columns"}}

{{#if bulkSelectEnabled}}
  <td class="bulk-select">
    <input type="checkbox" class="bulk-select">
  </td>
{{/if}}

<td class='main-link clearfix' colspan="1">
  {{~raw-plugin-outlet name="topic-list-before-link"}}
  <span class='link-top-line'>
    {{~raw-plugin-outlet name="topic-list-before-status"}}
    {{~raw "topic-status" topic=topic}}
    {{~topic-link topic class="raw-link raw-topic-link"}}
    {{~#if topic.featured_link}}
    {{~topic-featured-link topic}}
    {{~/if}}
    {{~raw-plugin-outlet name="topic-list-after-title"}}
    {{~raw "list/unread-indicator" includeUnreadIndicator=includeUnreadIndicator 
                                   topicId=topic.id 
                                   unreadClass=unreadClass~}}
    {{~#if showTopicPostBadges}}
    {{~raw "topic-post-badges" unread=topic.unread newPosts=topic.displayNewPosts unseen=topic.unseen url=topic.lastUnreadUrl newDotText=newDotText}}
    {{~/if}}
  </span>
  <div class="link-bottom-line">
    {{#unless hideCategory}}
      {{#unless topic.isPinnedUncategorized}}
        {{category-link topic.category}}
      {{/unless}}
    {{/unless}}
    <span>Started <a href={{topic.url}}>{{format-date topic.createdAt format="tiny"}}</a> by <a href="/users/{{topic.creator.username}}" data-auto-route="true" data-user-card="{{topic.creator.username}}">{{topic.creator.username}}</a></span><br>
    <span><a href="{{topic.lastPostUrl}}">Last post {{format-date topic.bumpedAt format="tiny"}}</a> by <a href="{{topic.lastPostUrl}}" data-user-card="{{topic.last_poster_username}}">{{topic.last_poster_username}}</a></span>
	{{discourse-tags topic mode="list" tagsForUser=tagsForUser}}
    {{raw "list/action-list" topic=topic postNumbers=topic.liked_post_numbers className="likes" icon="heart"}}
  </div>
  {{#if expandPinned}}
    {{raw "list/topic-excerpt" topic=topic}}
  {{/if}}
</td>

{{raw "list/posts-count-column" topic=topic}}

</script>

```

But this is just a first scratch and I didn’t test it, you might need to add some span class, change the date format (using format=“medium” instead of tiny?), but the structure should be pretty much okay

---

<div class="post-metadata">

### Author: ![pinder99](https://avatars.discourse-cdn.com/v4/letter/p/dfb087/32.png) [@pinder99](https://meta.discourse.org/u/pinder99)
#### Post date: [January 20, 2021, 1:02pm UTC](https://meta.discourse.org/t/md-topic-list-component/117694/39 "2021-01-20T13:02:19Z")

</div>

really thankyou @Steven , this is actually what i need really appreciate quick response , just one more thing there is no gap between “admin” and Last post" , how to add some space in them

![image](https://global.discourse-cdn.com/meta/original/3X/7/3/73e6f69cb745b0842c3d371eef19798080474c3c.png)

---

<div class="post-metadata">

### Author: ![Steven](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/steven/32/187890_2.png) [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [January 20, 2021, 1:29pm UTC](https://meta.discourse.org/t/md-topic-list-component/117694/40 "2021-01-20T13:29:23Z")

</div>

I added a `<br>` weird it didn’t take. You put it in the span tag or use `&nbsp;` to force some spacing if you’re not comfortable with adding a class element in the span tag.

---

<div class="post-metadata">

### Author: ![pinder99](https://avatars.discourse-cdn.com/v4/letter/p/dfb087/32.png) [@pinder99](https://meta.discourse.org/u/pinder99)
#### Post date: [January 20, 2021, 2:39pm UTC](https://meta.discourse.org/t/md-topic-list-component/117694/41 "2021-01-20T14:39:31Z")

</div>

nbsp worked like charm 👍

---

<div class="post-metadata">

### Author: ![pinder99](https://avatars.discourse-cdn.com/v4/letter/p/dfb087/32.png) [@pinder99](https://meta.discourse.org/u/pinder99)
#### Post date: [January 22, 2021, 8:37am UTC](https://meta.discourse.org/t/md-topic-list-component/117694/42 "2021-01-22T08:37:36Z")

</div>

@Steven it is working fine on desktop (also added some more data ) but it is not showing on mobile version , can you help

[Previous page](https://meta.discourse.org/t/md-topic-list-component/117694.md?page=1)

[Next page](https://meta.discourse.org/t/md-topic-list-component/117694.md?page=3)