2 files changed, 53 insertions, 0 deletions
diff --git a/src/components/avatar_list/avatar_list.js b/src/components/avatar_list/avatar_list.js
new file mode 100644
index 00000000..b9e11aaa
--- /dev/null
+++ b/src/components/avatar_list/avatar_list.js
@@ -0,0 +1,15 @@
+import UserAvatar from '../user_avatar/user_avatar.vue'
+
+const AvatarList = {
+  props: ['users'],
+  computed: {
+    slicedUsers () {
+      return this.users ? this.users.slice(0, 15) : []
+    }
+  },
+  components: {
+    UserAvatar
+  }
+}
+
+export default AvatarList
diff --git a/src/components/avatar_list/avatar_list.vue b/src/components/avatar_list/avatar_list.vue
new file mode 100644
index 00000000..4e0de2c9
--- /dev/null
+++ b/src/components/avatar_list/avatar_list.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="avatars">
+      <div class="avatars-item" v-for="user in slicedUsers">
+        <UserAvatar :user="user" class="avatar-small" />
+      </div>
+  </div>
+</template>
+
+<script src="./avatar_list.js" ></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.avatars {
+  display: flex;
+  margin: 0;
+  padding: 0;
+
+  // For hiding overflowing elements
+  flex-wrap: wrap;
+  height: 24px;
+
+  .avatars-item {
+    margin: 0 0 5px 5px;
+
+    &:first-child {
+      padding-left: 5px;
+    }
+
+    .avatar-small {
+      border-radius: $fallback--avatarAltRadius;
+      border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
+      height: 24px;
+      width: 24px;
+    }
+  }
+}
+</style>