csslayout/contents/avatar-list.md

layout, title, description, keywords

layout	title	description	keywords
layouts/post.njk	Avatar list	Create an avatar list with CSS flexbox	css avatar, css flexbox

HTML

<div class="avatars">
    <!-- Avatar item -->
    <div class="avatars__item">
        <div class="avatars__image">
            <!-- Image -->
            ...
        </div>
    </div>

    <!-- Repeat other avatars -->
    ...
</div>

CSS

.avatars {
    display: flex;
}

.avatars__item {
    /* Nagative margin make avatar overlap to previous one */
    margin-left: -0.25rem;
}

.avatars__image {
    /* Add a white curve between avatars */
    box-shadow: 0 0 0 0.25rem #fff;

    /* Center the content */
    align-items: center;
    display: flex;
    justify-content: center;

    /* Rounded border */
    border-radius: 9999px;
}

{% demo %} {% include "patterns/avatar-list.njk" %} {% enddemo %}