Can anyone explain how to make a user list like as shown in the image below...
[![User list](https://i.stack.imgur.com/fm9FY.jpg)](https://i.stack.imgur.com/fm9FY.jpg)

I'm making a project in Meteor and using Materialize for template and I want to display the list of assigned users. If there are more than a particular count(say 5) of users i want them to be displayed like on that image... I have tried googling this and haven't found anything useful. I also checked the Materialize website and found nothing useful. So if anyone has an idea please help share it.

Ok so this is the output html, in this case i only have one member but in real case I will have more:

```
<div class="row"> ==$0
<label class="active members_padding_card_view">Members</label>
<div class="toolBarUsers flex" style="float:right;">
<dic class="other-profile" style="background-color:#f06292;">
<span>B</span>
</div>

```

This is the .js code

```
Template.profile.helpers({
randomInitials: function () {
var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var nLetter = chars.charAt(Math.floor(Math.random()*chars.length));
var sLetter = chars.charAt(Math.floor(Math.random()*chars.length));
return nLetter + sLetter;
},
tagColor: function () {
var colors = ["#e57373","#f06292","#ba68c8","#9575cd","#7986cb","#64b5f6","#4fc3f7","#4dd0e1","#4db6ac","#81c784","#aed581","#dce775","#fff176","#ffd54f","#ffb74d","#ff8a65","#a1887f","#e0e0e0","#90a4ae"];
return colors[Math.floor(Math.random()*colors.length)];
},
randomAllowed : function(possible) {
    var count = Math.floor((Math.random() * possible) + 1);
    if(count == 1) {
        return;
    }
    return "none";
},

membersList() {
    const instance = Template.instance();
    const cardDataId = new Mongo.ObjectID(instance.data.cardData._id.valueOf());
    return CardDataMembers.find({lkp_card_data_fkeyi_ref: cardDataId});
},
memberData: function() {
    // We use this helper inside the {{#each posts}} loop, so the context
    // will be a post object. Thus, we can use this.xxxx from above memberList
    return Meteor.users.findOne(this.lkp_user_fkeyi_ref);
},
showMembers() {
    const instance = Template.instance();
    const cardDataId = new Mongo.ObjectID(instance.data.cardData._id.valueOf());

    let membersCount = CardDataMembers.find({lkp_card_data_fkeyi_ref: cardDataId}).count();
    ////console.log(membersCount);
    if (membersCount > 0) {
        $('.modal-trigger').leanModal(); 
        return true;
    } else {
        return false;
    }
},
});

```

Right now if I add a lot of users I get this:
[![This...](https://i.stack.imgur.com/sdETG.jpg)](https://i.stack.imgur.com/sdETG.jpg)