CSS Layout - Most popular layouts and patterns that can be built with CSS | Product Hunt Embed
.home
~
.explore

Avatar list

+5
<div style="
    display: flex;
">
    <!-- Avatar item -->
    <div style="
        /* Nagative margin make avatar overlap to previous one */
        margin-left: -4px;
    ">
        <div style="
            /* Add a white curve between avatars */
            box-shadow: 0 0 0 4px #FFF;

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

            /* Rounded border */
            border-radius: 9999px;
        ">
            <!-- Image -->
            ...
        </div>
    </div>

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

Related patterns

Avatar

Centering

PN

Initial avatar

Presence indicator

Subscribe to the newsletter for the latest layouts or patterns. No spam. Ever!