Card-Based List Template

A modern and stylish list where each item is presented as its own self-contained card.

This template uses a responsive grid to arrange cards, making it perfect for blog indexes, product galleries, or feature showcases.

A screenshot of a list of items displayed as individual cards in a grid.

Get Source Code Preview

About this Template

This component arranges list items into a clean grid of cards. It is built on a semantic unordered list (ul) but styles each list item (li) to look like a card with its own background, padding, and shadow. The layout uses CSS Grid's powerful auto-fit property to create a responsive grid that automatically adjusts the number of columns based on the available screen space.

Features

Fully Responsive Grid: The grid layout requires no manual media queries to adapt to different screen sizes.
Semantic Structure: Based on a standard ul, which is appropriate for a collection of items.
Self-Contained Code: All styles are scoped to the .card-list-template class to prevent unwanted side effects.
Modern Card Design: Includes properties like border-radius and box-shadow for a clean, modern aesthetic.
Hover Effect: A subtle lifting effect on hover gives users satisfying visual feedback.

Code Breakdown

The component starts with a div that contains an unordered list, ul, with the class .card-list. We apply display: grid to this list.

The core of the responsive layout comes from this rule on the list: grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)). This single line tells the browser to create as many columns as can fit, where each column has a minimum width of 280px but can expand to fill any available space. Each li is then styled to become a "card", with padding, a background color, and a box shadow.

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>Card-Based 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;
        }

/* ==========================================================================
           Card-Based List Component Styles - Copy from here
           ========================================================================== */
        .card-list-template {
            --card-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            --card-primary-text-color: #1e293b;
            --card-secondary-text-color: #64748b;
            --card-accent-color: #0ea5e9;
            --card-bg-color: #ffffff;
            --card-border-color: #e2e8f0;
            --card-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1);
            --card-hover-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
            
            font-family: var(--card-font-family);
            color: var(--card-primary-text-color);
            width: 100%;
            max-width: 1100px;
        }

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

.card-list-template .list-header {
            text-align: center;
            margin-bottom: 2.5rem;
        }

.card-list-template .list-header h2 {
            font-size: 2rem;
            margin: 0;
        }
        
        .card-list {
            list-style: none;
            padding: 0;
            margin: 0;
            display: grid;
            gap: 1.5rem;
            /* Create a responsive grid without media queries */
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        }

.card-item {
            background: var(--card-bg-color);
            border: 1px solid var(--card-border-color);
            border-radius: .5rem;
            box-shadow: var(--card-shadow);
            padding: 1.5rem;
            display: flex;
            flex-direction: column;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        
        .card-item:hover {
            transform: translateY(-4px);
            box-shadow: var(--card-hover-shadow);
        }

.card-item .item-image {
            display: block;
            width: 100%;
            height: 180px; /* Fixed height for image area */
            object-fit: cover;
            border-radius: .25rem;
            margin-bottom: 1.25rem;
            background-color: var(--card-border-color); /* Placeholder bg */
        }

.card-item .item-title {
            font-size: 1.2rem;
            font-weight: 600;
            margin: 0 0 0.5rem 0;
            line-height: 1.3;
        }

.card-item .item-text {
            color: var(--card-secondary-text-color);
            font-size: 0.9rem;
            line-height: 1.6;
            margin: 0 0 1.25rem 0;
            flex-grow: 1; /* Pushes the link to the bottom */
        }
        
        .card-item .item-link {
            font-size: .875rem;
            font-weight: 500;
            text-decoration: none;
            color: var(--card-accent-color);
        }

.card-item .item-link:hover {
            text-decoration: underline;
        }

</style>
</head>
<body>

<div class="card-list-template">
    <header class="list-header">
        <h2>Further Reading for the Over-Thinker</h2>
    </header>

<ul class="card-list">
        <li class="card-item">
            <img src="https://placehold.co/300x180/64748b/ffffff" alt="A pile of spoons of various sizes." class="item-image">
            <h3 class="item-title">The Metaphysics of Spoons: Is the Spoon a Concept or an Object?</h3>
            <p class="item-text">A deep dive into utensil philosophy that will make you question your entire kitchen drawer. Prepare for a paradigm shift.</p>
            <a href="#" class="item-link">Read Article â†’</a>
        </li>
        <li class="card-item">
            <img src="https://placehold.co/300x180/16a34a/ffffff" alt="A single blade of grass under a microscope." class="item-image">
            <h3 class="item-title">A Single Blade of Grass: An Autobiography</h3>
            <p class="item-text">Experience the triumphs and tribulations of photosynthesis, the looming dread of the lawnmower, and the complex social dynamics of a suburban lawn.</p>
            <a href="#" class="item-link">Read Article â†’</a>
        </li>
        <li class="card-item">
            <img src="https://placehold.co/300x180/db2777/ffffff" alt="A complicated flowchart about making toast." class="item-image">
            <h3 class="item-title">Advanced Toast Theory: A 12-Volume Compendium</h3>
            <p class="item-text">From bread-sourcing ethics to optimal butter-spreading techniques, this comprehensive guide covers everything you thought you knew about toast, and more.</p>
            <a href="#" class="item-link">Read Article â†’</a>
        </li>
    </ul>
</div>

</body>
</html>

View Output