Direct Message Preview Card

Build a clean and functional inbox interface with this direct message preview card.

This component is a vital part of any application with messaging features. It displays a list of conversations, showing the sender's avatar, their name, a snippet of the latest message, and a timestamp, with a clear visual indicator for unread items.

Screenshot of a list of direct message previews, one of which is marked as unread.

Get Source Code Preview

About this Component

This template is designed to be used as an item within a list. A simple modifier class, .is-unread, is used to change the visual weight of unread messages, making them stand out. The layout uses Flexbox to ensure the avatar, text content, and metadata are all neatly aligned.

Features

Unread State Indicator: The .is-unread class makes the sender's name and message bold and displays a colored dot to draw the user's attention.
Text Truncation: Long message previews are automatically truncated with an ellipsis (...) to prevent them from breaking the layout.
Semantic Structure: The entire component is built inside a semantic unordered list, which is the correct structure for a list of items.

Code Breakdown

HTML Structure

The entire inbox is a ul, with each message preview being a li. To mark a message as unread, you add the .is-unread class to its li. The content of the list item is a single clickable a tag that holds all the visual elements (an img for the avatar, a content div, and a metadata div).

CSS Styling

The layout is achieved using Flexbox on the main anchor tag. The central content block (.dm-content) is given flex-grow: 1, which makes it take up all available horizontal space and pushes the metadata block to the far right. The message snippet truncation is done with a trio of properties on the .dm-message-preview class: white-space: nowrap, overflow: hidden, and text-overflow: ellipsis. The "unread" state is styled entirely by CSS rules that are scoped to the .is-unread parent class.

Code

Here is the complete, self-contained code. To build an inbox, simply populate the ul with a li for each message, adding the .is-unread class as needed.

<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 list of messages */
.messages-container {
    background-color: #ffffff;
    max-width: 600px;
    margin: 2rem auto;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
    overflow: hidden;
}

.messages-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.messages-list li:not(:last-child) .dm-card-link {
    border-bottom: 1px solid #f3f4f6;
}

/* === Direct Message Preview Card Styles === */
.dm-card-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.2s ease;
}
.dm-card-link:hover {
    background-color: #f9fafb;
}

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

.dm-content {
    flex-grow: 1;
    overflow: hidden; /* Important for text truncation */
}

.dm-sender-name {
    font-weight: 500;
    color: #111827;
    margin: 0;
}
.dm-message-preview {
    font-size: 0.95rem;
    color: #6b7280;
    margin: 0.25rem 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Timestamp and unread dot */
.dm-meta {
    flex-shrink: 0;
    text-align: right;
}
.dm-timestamp {
    font-size: 0.8rem;
    color: #9ca3af;
    margin-bottom: 0.5rem;
}

.dm-unread-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #4f46e5;
    display: inline-block;
    visibility: hidden; /* Hidden by default */
}

/* UNREAD STATE STYLES */
/* Add the .is-unread class to the li element */
.is-unread .dm-sender-name {
    font-weight: 700;
}
.is-unread .dm-message-preview {
    color: #1f2937;
    font-weight: 500;
}
.is-unread .dm-unread-dot {
    visibility: visible;
}

</style>

<div class="messages-container">
    <ul class="messages-list">
        
        
        <li class="is-unread">
            <a href="#" class="dm-card-link">
                <img src="https://placehold.co/96x96/ec4899/ffffff/png?text=E" alt="Avatar of Elara Vance" class="dm-avatar">
                <div class="dm-content">
                    <h3 class="dm-sender-name">Elara Vance</h3>
                    <p class="dm-message-preview">Sounds great! I've sent over the final mockups for the dashboard. Let me know what you think.</p>
                </div>
                <div class="dm-meta">
                    <time datetime="10:45" class="dm-timestamp">10:45 AM</time>
                    <span class="dm-unread-dot"></span>
                </div>
            </a>
        </li>

<li>
            <a href="#" class="dm-card-link">
                <img src="https://placehold.co/96x96/3b82f6/ffffff/png?text=A" alt="Avatar of Dr. Aris Thorne" class="dm-avatar">
                <div class="dm-content">
                    <h3 class="dm-sender-name">Dr. Aris Thorne</h3>
                    <p class="dm-message-preview">No problem, I can have the report ready by tomorrow morning.</p>
                </div>
                <div class="dm-meta">
                    <time datetime="09:12" class="dm-timestamp">9:12 AM</time>
                    <span class="dm-unread-dot"></span>
                </div>
            </a>
        </li>
        
         
        <li>
            <a href="#" class="dm-card-link">
                <img src="https://placehold.co/96x96/f59e0b/ffffff/png?text=F" alt="Avatar of Felix Quinn" class="dm-avatar">
                <div class="dm-content">
                    <h3 class="dm-sender-name">Felix Quinn</h3>
                    <p class="dm-message-preview">Meeting reminder for 2:00 PM today, don't forget the presentation slides!</p>
                </div>
                <div class="dm-meta">
                    <time datetime="08:30" class="dm-timestamp">8:30 AM</time>
                    <span class="dm-unread-dot"></span>
                </div>
            </a>
        </li>

</ul>
</div>

View Output