1 files changed, 46 insertions, 0 deletions
diff --git a/src/components/avatar_list/avatar_list.vue b/src/components/avatar_list/avatar_list.vue
new file mode 100644
index 00000000..e1b6e971
--- /dev/null
+++ b/src/components/avatar_list/avatar_list.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="avatars">
+    <router-link
+      v-for="user in slicedUsers"
+      :key="user.id"
+      :to="userProfileLink(user)"
+      class="avatars-item"
+    >
+      <UserAvatar
+        :user="user"
+        class="avatar-small"
+      />
+    </router-link>
+  </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>