Image Thumbnail List Template

A versatile list for showcasing items that have an associated image, like articles or products.

This template aligns a thumbnail image with a title, a short description, and other metadata in a clean, row-based format.

A screenshot of a list of items, each with a thumbnail on the left and text on the right.

Get Source Code Preview

About this Template

This component, often called a "media object", is a fundamental design pattern for the web. This implementation uses a semantic ul, where each list item is an article containing an image and its corresponding text. The layout is managed with Flexbox, ensuring the thumbnail and text content align properly and responsively. The entire code is self-contained for easy integration.

Features

Semantic Markup: Uses an unordered list of articles, which is a semantically sound structure for a list of self-contained items like blog posts or products.
Robust Flexbox Layout: Ensures the image and text columns are perfectly aligned and adapt gracefully to different content heights.
Easy Placeholder Images: Uses an external placeholder service to demonstrate image placement, making it easy for you to replace with your own images.
Subtle Hover Effect: A gentle hover effect provides users with visual feedback.
Self-Contained: All CSS is scoped to the .thumbnail-list-template class to avoid conflicts.

Code Breakdown

The core structure is a ul element with the class .thumbnail-list. The default list styling is removed.

Each list item has an a tag as its immediate child, making the entire card clickable. This anchor tag has a class of .thumbnail-item and is a flex container with display: flex applied. This places its two children, a figure for the image and a div for the text, side-by-side. The image is set to have a fixed width, and the text container grows to fill the remaining space.

Code

Here's the full code for the template:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Thumbnail List</title>
    <style>
        /* ==========================================================================
           Styles for Demo Preview Only
           ========================================================================== */
        body {
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: #f1f5f9;
            color: #334155;
            margin: 0;
            padding: 2rem;
            display: flex;
            justify-content: center;
        }

/* ==========================================================================
           Image Thumbnail List Component Styles - Copy from here
           ========================================================================== */
        .thumbnail-list-template {
            --thumb-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            --thumb-primary-text-color: #1e293b;
            --thumb-secondary-text-color: #64748b;
            --thumb-accent-color: #0ea5e9;
            --thumb-bg-color: #ffffff;
            --thumb-border-color: #e2e8f0;
            --thumb-hover-bg-color: #f8fafc;
            --thumb-img-border-radius: .25rem;
            
            font-family: var(--thumb-font-family);
            color: var(--thumb-primary-text-color);
            width: 100%;
            max-width: 700px;
        }

.thumbnail-list-template *,
        .thumbnail-list-template *::before,
        .thumbnail-list-template *::after {
            box-sizing: border-box;
        }

.thumbnail-list-template .list-header {
            text-align: center;
            margin-bottom: 2rem;
        }
        
        .thumbnail-list-template .list-header h2 {
            font-size: 1.75rem;
            margin: 0 0 .25rem 0;
        }

.thumbnail-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

.thumbnail-item {
            display: flex;
            gap: 1.5rem;
            align-items: flex-start;
            padding: 1.5rem;
            background-color: var(--thumb-bg-color);
            border-bottom: 1px solid var(--thumb-border-color);
            text-decoration: none;
            color: inherit;
            transition: background-color 0.2s ease;
        }
        
        .thumbnail-list li:first-child .thumbnail-item { border-radius: .5rem .5rem 0 0; }
        .thumbnail-list li:last-child .thumbnail-item { border-bottom: none; border-radius: 0 0 .5rem .5rem; }
        .thumbnail-list li:only-child .thumbnail-item { border-radius: .5rem; }

.thumbnail-item:hover {
            background-color: var(--thumb-hover-bg-color);
            color: var(--thumb-accent-color);
        }

.thumbnail-figure {
            margin: 0;
            flex-shrink: 0;
            width: 100px;
        }

@media(min-width: 640px) {
            .thumbnail-figure {
                width: 150px;
            }
        }
        
        .thumbnail-image {
            display: block;
            width: 100%;
            height: auto;
            aspect-ratio: 4 / 3;
            object-fit: cover;
            border-radius: var(--thumb-img-border-radius);
            background-color: #e2e8f0; /* Placeholder color */
        }

.item-content h3 {
            font-size: 1.2rem;
            margin: 0 0 .5rem 0;
        }
        
        .item-content .item-description {
            margin: 0 0 .75rem 0;
            color: var(--thumb-secondary-text-color);
            font-size: .9rem;
            line-height: 1.5;
        }
        
        /* The link hover state affects the description color */
        .thumbnail-item:hover .item-description {
             color: var(--thumb-primary-text-color);
        }
        
        .item-meta {
            font-size: .8rem;
            color: var(--thumb-secondary-text-color);
            text-transform: uppercase;
            letter-spacing: .5px;
        }

</style>
</head>
<body>

<div class="thumbnail-list-template">
    <div class="list-header">
        <h2>Acme Peculiar Gadgets</h2>
    </div>

<ul class="thumbnail-list">
        <li>
            <a href="#" class="thumbnail-item">
                <figure class="thumbnail-figure">
                    <img src="https://placehold.co/150x112/0ea5e9/ffffff" alt="The Self-Watering Pet Rock." class="thumbnail-image">
                </figure>
                <div class="item-content">
                    <h3>The Self-Watering Pet Rock</h3>
                    <p class="item-description">Tired of the constant demands of caring for a standard pet rock? Our patented automated hydration system ensures your geological companion stays perfectly... moist.</p>
                    <div class="item-meta">Home & Garden</div>
                </div>
            </a>
        </li>
        <li>
            <a href="#" class="thumbnail-item">
                <figure class="thumbnail-figure">
                    <img src="https://placehold.co/150x112/4f46e5/ffffff" alt="A pair of Dehydrated Water Packets." class="thumbnail-image">
                </figure>
                <div class="item-content">
                    <h3>Dehydrated Water Packets</h3>
                    <p class="item-description">Perfect for camping and long journeys! Our groundbreaking formula removes all the heavy, inconvenient moisture from H2O. Just add water to rehydrate.</p>
                    <div class="item-meta">Outdoor & Survival</div>
                </div>
            </a>
        </li>
        <li>
            <a href="#" class="thumbnail-item">
                <figure class="thumbnail-figure">
                    <img src="https://placehold.co/150x112/16a34a/ffffff" alt="The Inflatable Dartboard." class="thumbnail-image">
                </figure>
                <div class="item-content">
                    <h3>Inflatable Dartboard</h3>
                    <p class="item-description">All the fun of darts with none of the commitment or risk of property damage. A thrilling game of suspense and gradual deflation. Darts not included.</p>
                    <div class="item-meta">Games & Recreation</div>
                </div>
            </a>
        </li>
    </ul>
</div>

</body>
</html>

View Output