Badge Card

Draw immediate attention to specific items in a list with this clean and effective badge card.

This layout is commonly used in e-commerce shops and content feeds to highlight items that are new, featured, on sale, or have some other special status.

Get Source Code Preview

About this Component

The core of this component is a classic image-and-text card with an added status badge overlaid in the corner. The badge is implemented using CSS positioning to float above the rest of the card content, ensuring it's prominent without disrupting the card's underlying layout. The template includes multiple color variations for common badge types.

Features

CSS Positioning: The badge is placed using position: absolute, making it easy to adjust its location within the card.
Modifier Classes: The example provides different color styles for badges (e.g., .badge-new, .badge-featured) that you can easily customize or expand upon.
Responsive Grid: Comes bundled with the standard responsive grid container to neatly arrange multiple cards.
Accessible & Semantic: The component is built with a semantic article structure and ensures the badge text is part of the card's content, making it accessible to all users.

Code Breakdown

HTML Structure

Each card is an article element with a class of .badge-card. The first element inside the main link is a div for the badge. Placing it here is straightforward and allows its text content to be read by assistive technologies. The rest of the card follows a familiar pattern with an image and a content block for the title and description.

CSS Styling

The badge placement for this component is in the positioning context. The parent card, .badge-card, is given position: relative. This establishes a boundary for any absolutely positioned children. The badge, .badge-card-badge, is then styled with position: absolute and positioned relative to its parent's edges using the top and right properties. This allows the badge to float over the other content. The pill shape of the badge is achieved with a very large border-radius.

Code

Here's the complete, self-contained code. You can change a badge's appearance by editing the modifier classes (e.g., .badge-new) or by creating your own.

<style>
/* This is an optional body style to provide a background for the page */
body {
    background-color: #f9fafb;
    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(320px, 1fr));
    gap: 1.5rem;
    padding: 1.5rem; /* Provides spacing from the viewport edges */
}

/* === Badge Card Styles === */
.badge-card {
    --badge-card-radius: 12px;
    --badge-card-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);

background: #ffffff;
    border-radius: var(--badge-card-radius);
    overflow: hidden; /* Important for containing the image within rounded corners */
    box-shadow: var(--badge-card-shadow);
    position: relative; /* This is the positioning context for the badge */
    transition: transform 0.2s ease-in-out;
}

.badge-card:hover {
    transform: translateY(-5px);
}

.badge-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* === The Badge Element === */
.badge-card-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px; /* Pill shape */
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    z-index: 10;
}

/* Badge Color Variations */
.badge-new {
    background-color: #1d4ed8; /* Strong Blue */
    color: #ffffff;
}
.badge-featured {
    background-color: #f59e0b; /* Amber */
    color: #000000;
}
.badge-sale {
    background-color: #dc2626; /* Red */
    color: #ffffff;
}

/* === Card Content === */
.badge-card-image {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}

.badge-card-content {
    padding: 1.5rem;
}

.badge-card-title {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.badge-card-description {
    font-size: 1rem;
    line-height: 1.5;
    margin: 0;
    color: #4b5563;
}
</style>

<div class="cards-grid-container">
    
    
    <article class="badge-card">
        <a href="#" class="badge-card-link">
            <div class="badge-card-badge badge-new">New</div>
            
            <img class="badge-card-image" src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=80" alt="A modern red and white athletic shoe on a plain background.">
            <div class="badge-card-content">
                <h3 class="badge-card-title">AeroStride Runners</h3>
                <p class="badge-card-description">Our latest model, engineered for maximum comfort and performance on any terrain.</p>
            </div>
        </a>
    </article>
    
    
    <article class="badge-card">
        <a href="#" class="badge-card-link">
            <div class="badge-card-badge badge-featured">Featured</div>
            
            <img class="badge-card-image" src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=80" alt="A classic silver wristwatch with a white face and detailed dials.">
            <div class="badge-card-content">
                <h3 class="badge-card-title">Chrono-Classic Watch</h3>
                <p class="badge-card-description">Timeless design meets modern precision. A perfect accessory for any occasion.</p>
            </div>
        </a>
    </article>

<article class="badge-card">
        <a href="#" class="badge-card-link">
            <div class="badge-card-badge badge-sale">Sale</div>
            
            <img class="badge-card-image" src="https://images.unsplash.com/photo-1572635196237-14b3f281503f?ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=80" alt="A pair of black-framed sunglasses resting on a reflective surface.">
            <div class="badge-card-content">
                <h3 class="badge-card-title">Nova Sunglasses</h3>
                <p class="badge-card-description">Classic style with modern UV protection. Get them now at a discounted price.</p>
            </div>
        </a>
    </article>
    
</div>

View Output