Activity Summary Card

Provide a high-level, clickable summary of key application metrics with this classic dashboard card.

This component is a fundamental part of any admin dashboard. It's designed to give administrators a quick link to important sections of the site (like users, sales, or comments) while also showing a snapshot of recent activity.

Screenshot of several admin dashboard summary cards in a grid.

Get Source Code Preview

About this Component

The entire card is designed as a single clickable link to improve usability. The design uses a colored icon, a prominent figure for the main statistic, a clear label, and a "View all" link in the footer to guide the user. The card can be easily themed for different types of content using simple modifier classes.

Features

Clickable Card: The entire card is a single, large link, making it an easy target for users to click to navigate to a detailed view.
Themed Icons: The background and icon colors can be easily customized with CSS variables. The template includes modifier classes to demonstrate this for different metrics.
Aligned Footer: Flexbox is used to ensure the footer always aligns neatly to the bottom, creating a uniform look for all cards in a grid.

Code Breakdown

HTML Structure

The entire card is an anchor (a) with a class of .asc-card-link which serves as both the card container and the main link. To add a different color theme, you add a modifier class (e.g., style-sales) to this a tag. Inside, a div holds the icon, another div holds the main text content, and a footer contains the call-to-action text.

CSS Styling

The main card is a flex container with flex-direction: column. We have flex-grow: 1 on the .asc-content div makes that section expand to fill all available vertical space. This pushes the footer to the bottom of the card, ensuring consistent alignment in a grid. The color themes are handled by two CSS variables: --asc-icon-bg and --asc-icon-color. The modifier classes, like .style-sales, simply override these variables to apply new colors to the icon and its background.

Code

Here's the complete, self-contained code. It's ready to be used to build a dynamic and informative admin dashboard.

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

/* === Grid Container for the Cards === */
.cards-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.5rem;
    padding: 1.5rem;
}

/* === Activity Summary Card Styles === */
.asc-card-link {
    --asc-radius: 12px;
    --asc-shadow: 0 4px 10px rgba(0,0,0,0.06);
    --asc-icon-bg: #e0e7ff; /* Default: light indigo */
    --asc-icon-color: #4338ca; /* Default: dark indigo */
    
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border-radius: var(--asc-radius);
    box-shadow: var(--asc-shadow);
    padding: 1.5rem;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.asc-card-link:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
}

.asc-icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--asc-icon-bg);
    margin-bottom: 1.25rem;
}
.asc-icon-wrapper svg {
    width: 24px;
    height: 24px;
    color: var(--asc-icon-color);
}

.asc-content {
    flex-grow: 1; /* Pushes footer to the bottom */
}
.asc-label {
    font-size: 1rem;
    font-weight: 500;
    color: #6b7280;
    margin: 0;
}
.asc-figure {
    font-size: 2rem;
    font-weight: 700;
    color: #111827;
    margin: 0.25rem 0 0;
}

.asc-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.25rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: #4f46e5;
}
.asc-footer svg {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}
.asc-card-link:hover .asc-footer svg {
    transform: translateX(3px);
}

/* --- Color Variations --- */

/* Style for Sales/Revenue (Green) */
.asc-card-link.style-sales {
    --asc-icon-bg: #dcfce7;
    --asc-icon-color: #16a34a;
}
.asc-card-link.style-sales .asc-footer { color: #16a34a; }

/* Style for Comments/Messages (Orange) */
.asc-card-link.style-comments {
    --asc-icon-bg: #ffedd5;
    --asc-icon-color: #f97316;
}
.asc-card-link.style-comments .asc-footer { color: #f97316; }

</style>

<div class="cards-grid-container">

<a href="#" class="asc-card-link">
        <div class="asc-icon-wrapper">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M1.5 6.5C1.5 3.46243 3.96243 1 7 1C10.0376 1 12.5 3.46243 12.5 6.5C12.5 9.53757 10.0376 12 7 12C3.96243 12 1.5 9.53757 1.5 6.5Z"></path> <path d="M14.4999 6.5C14.4999 8.00034 14.0593 9.39779 13.3005 10.57C14.2774 11.4585 15.5754 12 16.9999 12C20.0375 12 22.4999 9.53757 22.4999 6.5C22.4999 3.46243 20.0375 1 16.9999 1C15.5754 1 14.2774 1.54153 13.3005 2.42996C14.0593 3.60221 14.4999 4.99966 14.4999 6.5Z"></path> <path d="M0 18C0 15.7909 1.79086 14 4 14H10C12.2091 14 14 15.7909 14 18V22C14 22.5523 13.5523 23 13 23H1C0.447716 23 0 22.5523 0 22V18Z"></path> <path d="M16 18V23H23C23.5522 23 24 22.5523 24 22V18C24 15.7909 22.2091 14 20 14H14.4722C15.4222 15.0615 16 16.4633 16 18Z"></path></svg>
        </div>
        <div class="asc-content">
            <h3 class="asc-label">New Users</h3>
            <p class="asc-figure">1,204</p>
        </div>
        <footer class="asc-footer">
            <span>View all</span>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"><path fill-rule="evenodd" d="M2 8a.75.75 0 01.75-.75h8.69L8.22 4.03a.75.75 0 011.06-1.06l4.5 4.5a.75.75 0 010 1.06l-4.5 4.5a.75.75 0 01-1.06-1.06L11.44 8.75H2.75A.75.75 0 012 8z" clip-rule="evenodd"/></svg>
        </footer>
    </a>

<a href="#" class="asc-card-link style-sales">
        <div class="asc-icon-wrapper">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                <path d="M1.5 16.5a1.5 1.5 0 0 1 1.5-1.5h3a1.5 1.5 0 0 1 1.5 1.5v4.5a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 1.5 21v-4.5zm7.5-6a1.5 1.5 0 0 1 1.5-1.5h3a1.5 1.5 0 0 1 1.5 1.5v10.5a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 21V10.5zm7.5-7.5A1.5 1.5 0 0 1 18 1.5h3A1.5 1.5 0 0 1 22.5 3v18a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 16.5 21V3z"/>
            </svg>
        </div>
        <div class="asc-content">
            <h3 class="asc-label">Total Sales</h3>
            <p class="asc-figure">$84,120</p>
        </div>
        <footer class="asc-footer">
            <span>View report</span>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor">
                <path fill-rule="evenodd" d="M2 8a.75.75 0 01.75-.75h8.69L8.22 4.03a.75.75 0 011.06-1.06l4.5 4.5a.75.75 0 010 1.06l-4.5 4.5a.75.75 0 01-1.06-1.06L11.44 8.75H2.75A.75.75 0 012 8z" clip-rule="evenodd"/>
            </svg>
        </footer>
    </a>
    
    
    <a href="#" class="asc-card-link style-comments">
        <div class="asc-icon-wrapper">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                <g transform="scale(0.375)">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M48,12H4c-2.211,0-4,1.789-4,4v28c0,2.211,1.789,4,4,4h8v12 
                    c0,1.617,0.973,3.078,2.469,3.695C14.965,63.902,15.484,64,16,64c1.039,0,2.062-0.406,2.828-1.172L33.656,48H48 
                    c2.211,0,4-1.789,4-4V16C52,13.789,50.211,12,48,12z"/>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M60,0H16c-2.211,0-4,1.789-4,4v4h40c2.211,0,4,1.789,4,4v24h4 
                    c2.211,0,4-1.789,4-4V4C64,1.789,62.211,0,60,0z"/>
                </g>
            </svg>
        </div>
        <div class="asc-content">
            <h3 class="asc-label">New Comments</h3>
            <p class="asc-figure">249</p>
        </div>
        <footer class="asc-footer">
            <span>Moderate now</span>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"><path fill-rule="evenodd" d="M2 8a.75.75 0 01.75-.75h8.69L8.22 4.03a.75.75 0 011.06-1.06l4.5 4.5a.75.75 0 010 1.06l-4.5 4.5a.75.75 0 01-1.06-1.06L11.44 8.75H2.75A.75.75 0 012 8z" clip-rule="evenodd"/></svg>
        </footer>
    </a>
</div>

View Output