Case Study Card

Present an in-depth summary of your projects with this professional case study card, designed to highlight key outcomes.

This component is a step up from a simple portfolio item. It uses a horizontal layout to provide space for a project summary and, crucially, a dedicated section to showcase quantifiable results and key performance indicators (KPIs).

Screenshot of a horizontal case study card with a project summary and key results.

Get Source Code Preview

About this Component

This card effectively communicates the value of your work by leading with a summary and finishing with hard data. The "Key Results" section at the bottom uses strong typography and color to make the positive outcomes of the project stand out, providing powerful social proof.

Features

Data-Driven Results: Includes a dedicated, border-separated section for highlighting key metrics and outcomes of the project.
Responsive Layout: The two-column horizontal layout is ideal for desktop and cleanly stacks to a vertical layout on mobile devices.
Full-Card Link: The entire card is a single, clickable link, providing a large, user-friendly target to direct visitors to the full case study.

Code Breakdown

HTML Structure

Each case study is an article. Its contents are wrapped in a single a tag, which is styled as a flex container. The link has two main children: a div for the image column (.cs-image-col) and a div for the content column (.cs-content-col).

Inside the content column, the "Key Results" are grouped in their own div, with each individual metric (e.g., "+34%") contained in its own div as well.

CSS Styling

The two-column layout is created by setting display: flex on the main card link. The content column (.cs-content-col) is also a flex container, with flex-direction: column. flex-grow: 1 on the main excerpt p tag is what pushes the "Key Results" section to the bottom, ensuring vertical alignment across multiple cards in a list.

A media query checks the screen width and changes the flex-direction of the card to column on smaller screens, which is what creates the stacked mobile layout.

Code

Here is the complete, self-contained code. It's ready to be populated with your own project images, summaries, and results to build an impressive case study page.

<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 */
.list-view-container {
    max-width: 900px;
    margin: 2rem auto;
    padding: 0 1rem;
    display: grid;
    gap: 2rem;
}

/* === Case Study Card Styles === */
.case-study-card {
    --cs-radius: 12px;
    --cs-shadow: 0 4px 10px rgba(0,0,0,0.06);

background-color: #ffffff;
    border-radius: var(--cs-radius);
    box-shadow: var(--cs-shadow);
    display: flex;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}
.case-study-card:hover {
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
}
.case-study-card-link {
    display: flex;
    text-decoration: none;
    color: inherit;
    width: 100%;
}

/* Image Column */
.cs-image-col {
    width: 40%;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}
.cs-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.case-study-card-link:hover .cs-image {
    transform: scale(1.05);
}

/* Content Column */
.cs-content-col {
    padding: 2rem;
    display: flex;
    flex-direction: column;
}

.cs-category {
    font-size: 0.875rem;
    font-weight: 500;
    color: #4f46e5;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}
.cs-title {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 1rem;
}
.cs-excerpt {
    font-size: 1rem;
    line-height: 1.6;
    color: #4b5563;
    margin: 0;
    flex-grow: 1; /* Pushes results to the bottom */
}

/* Key results section */
.cs-key-results {
    display: flex;
    gap: 1.5rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e7eb;
}
.cs-result-item {
    text-align: center;
}
.cs-result-figure {
    font-size: 1.75rem;
    font-weight: 700;
    color: #16a34a; /* Green for positive results */
    display: block;
}
.cs-result-label {
    font-size: 0.8rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Responsive Stacking */
@media (max-width: 768px) {
    .case-study-card-link {
        flex-direction: column;
    }
    .cs-image-col {
        width: 100%;
        height: 250px;
    }
}
</style>

<div class="list-view-container">
    
    
    <article class="case-study-card">
        <a href="#" class="case-study-card-link">
            <div class="cs-image-col">
                
                <img class="cs-image" src="https://placehold.co/800x800/6366f1/ffffff/png?text=E-Commerce" alt="Abstract design representing an e-commerce platform.">
            </div>
            <div class="cs-content-col">
                <p class="cs-category">E-Commerce Redesign</p>
                <h3 class="cs-title">Reimagining the Online Shopping Experience</h3>
                <p class="cs-excerpt">A complete overhaul of the user journey, from product discovery to checkout, resulting in significant performance improvements.</p>
                <div class="cs-key-results">
                    <div class="cs-result-item">
                        <span class="cs-result-figure">+34%</span>
                        <span class="cs-result-label">Conversion Rate</span>
                    </div>
                    <div class="cs-result-item">
                        <span class="cs-result-figure">-1.2s</span>
                        <span class="cs-result-label">Page Load Time</span>
                    </div>
                </div>
            </div>
        </a>
    </article>

<article class="case-study-card">
        <a href="#" class="case-study-card-link">
            <div class="cs-image-col">
                
                <img class="cs-image" src="https://placehold.co/800x800/14b8a6/ffffff/png?text=SaaS" alt="Abstract design representing a SaaS application.">
            </div>
            <div class="cs-content-col">
                <p class="cs-category">SaaS Onboarding Flow</p>
                <h3 class="cs-title">Improving User Activation and Retention</h3>
                <p class="cs-excerpt">By simplifying the signup process and introducing an interactive tutorial, we boosted new user activation significantly.</p>
                <div class="cs-key-results">
                    <div class="cs-result-item">
                        <span class="cs-result-figure">+42%</span>
                        <span class="cs-result-label">Activation Rate</span>
                    </div>
                    <div class="cs-result-item">
                        <span class="cs-result-figure">-21%</span>
                        <span class="cs-result-label">First Week Churn</span>
                    </div>
                </div>
            </div>
        </a>
    </article>
</div>

View Output