User Activity Feed Card

Display a stream of recent user activities or notifications with this versatile and readable feed card template.

This layout is designed to be used as an item within a list. It's ideal for dashboards and profile pages, showing a mix of different actions such as new followers, content uploads, or comments.

Screenshot of a user activity feed with several different types of items.

Get Source Code Preview

About this Component

This template is built to be flexible. It accommodates different types of notifications in a single, consistent style. Some feed items may be simple text updates, while others might include a relevant thumbnail for context, such as a preview of an uploaded photo. The entire component is built using a semantic list structure.

Features

Flexible Structure: Easily adapts to different types of activities, with or without a contextual element like a thumbnail.
Semantic List: The feed is built with an unordered list (ul and li), which is the correct semantic structure for a list of items.
Clear Typography: A strong typographic hierarchy makes it easy to distinguish user names, actions, and timestamps.
Responsive Layout: The Flexbox-based layout is inherently responsive and works well across all screen sizes.

Code Breakdown

HTML Structure

The entire feed is contained in a ul element, with each activity item being a li. Inside each list item is a semantic article tag with the class .uaf-card. This card is a flex container holding three potential children: an avatar image, a main content block (.uaf-card-main), and an optional context block (.uaf-card-context) for thumbnails. Important text like usernames is emphasized with the strong tag.

CSS Styling

The main alignment is handled by applying display: flex to the .uaf-card. The main text content area (.uaf-card-main) is set to flex-grow: 1, which allows it to take up any available space in the middle, pushing the optional context block to the far right. The avatar and context thumbnail are given a flex-shrink: 0 property to prevent them from being compressed on smaller screens. A simple bottom border on the list items creates a clean visual separation between each activity.

Code

Here is the complete code. You can easily adapt it by mixing and matching the different activity formats shown in the example, or by creating your own variations.

<style>
/* This is an optional body style to provide a background for the page */
body {
    background-color: #f3f4f6;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
}

/* Container for the feed */
.activity-feed-container {
    background-color: #ffffff;
    max-width: 640px;
    margin: 2rem auto; /* Centers the list */
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}

.activity-feed-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.activity-feed-list li:not(:last-child) {
    border-bottom: 1px solid #e5e7eb;
}

/* === User Activity Feed Card Styles === */
.uaf-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
}

.uaf-card-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.uaf-card-main {
    flex-grow: 1;
}

.uaf-card-text {
    font-size: 1rem;
    line-height: 1.5;
    margin: 0 0 0.25rem 0;
    color: #374151;
}

.uaf-card-text strong {
    font-weight: 600;
    color: #111827;
}

.uaf-card-text a {
    font-weight: 500;
    color: #4f46e5;
    text-decoration: none;
}
.uaf-card-text a:hover {
    text-decoration: underline;
}

.uaf-card-time {
    font-size: 0.875rem;
    color: #6b7280;
}

.uaf-card-context {
    flex-shrink: 0;
}
.uaf-card-context-thumbnail {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    object-fit: cover;
}

</style>

<div class="activity-feed-container">
    <ul class="activity-feed-list">
        <li>
            
            <article class="uaf-card">
                <img src="https://placehold.co/80x80/6366f1/ffffff/png?text=L" alt="Avatar of Lena" class="uaf-card-avatar">
                <div class="uaf-card-main">
                    <p class="uaf-card-text"><strong>Lena Ray</strong> started following <strong>Nora Ives</strong>.</p>
                    <time class="uaf-card-time" datetime="2023-10-27T14:15:00">15 minutes ago</time>
                </div>
            </article>
        </li>
        <li>
            
            <article class="uaf-card">
                <img src="https://placehold.co/80x80/f59e0b/ffffff/png?text=F" alt="Avatar of Felix" class="uaf-card-avatar">
                <div class="uaf-card-main">
                    <p class="uaf-card-text"><strong>Felix Quinn</strong> uploaded a new photo to the <a href="#">"Urban Exploration"</a> gallery.</p>
                    <time class="uaf-card-time" datetime="2023-10-27T13:45:00">45 minutes ago</time>
                </div>
                <div class="uaf-card-context">
                    <a href="#">
                        
                        <img src="https://picsum.photos/id/111/112/112" alt="Thumbnail of uploaded city photo" class="uaf-card-context-thumbnail">
                    </a>
                </div>
            </article>
        </li>
        <li>
            
            <article class="uaf-card">
                <img src="https://placehold.co/80x80/1d4ed8/ffffff/png?text=N" alt="Avatar of Nora" class="uaf-card-avatar">
                <div class="uaf-card-main">
                    <p class="uaf-card-text"><strong>Nora Ives</strong> commented on your post: <a href="#">"Designing for Accessibility: A Practical Guide"</a></p>
                    <time class="uaf-card-time" datetime="2023-10-27T12:05:00">2 hours ago</time>
                </div>
            </article>
        </li>
    </ul>
</div>

View Output