Calendar Date Card

Display event dates in a highly visual "desk calendar" style with this unique and scannable card component.

This layout gives prominence to the event date, making it a great choice for timelines, schedules, or "what's on" listings where the date is an important piece of information.

Screenshot of several cards, each featuring a stylized calendar date block.

Get Source Code Preview

About this Component

This component features a prominent, self-contained date block that visually mimics a page from a tear-off calendar. The month is displayed in a colored banner for emphasis, while the day is a large, bold number. This date block is aligned horizontally with the event's title and other details.

Features

High-Impact Date Display: The stylized date block makes event dates impossible to miss.
Semantic Date Element: The entire date block is a single time element with a machine-readable datetime attribute for excellent accessibility and SEO.
Flexbox Alignment: The component uses a simple Flexbox layout to keep the date block and the event details neatly aligned.
Hover Effect: A subtle "lift" animation on hover provides clear interactive feedback.

Code Breakdown

HTML Structure

Each card is an article with the class .cal-card. For usability, the entire contents are wrapped in a single a tag, making the whole card a clickable link. The date block is a time element containing two span elements for the month and day. This is followed by a div that contains the rest of the event info.

CSS Styling

The main card is set to display: flex and align-items: center to vertically center its direct children (the date block and the info block). The date block itself is also a flex container, using flex-direction: column to stack the month and day vertically. Its distinct "calendar page" look is created with a light background color, a subtle border, and rounded corners.

Code

Here's the complete, self-contained code. You can easily adapt the template by changing the content and updating the datetime attribute for each event.

<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(320px, 1fr));
    gap: 1.5rem;
    padding: 1.5rem;
}

/* === Calendar Date Card Styles === */
.cal-card {
    --cal-card-radius: 12px;
    --cal-card-shadow: 0 4px 10px rgba(0,0,0,0.06);

background-color: #ffffff;
    border-radius: var(--cal-card-radius);
    box-shadow: var(--cal-card-shadow);
    display: flex;
    align-items: center;
    padding: 1rem;
    gap: 1.25rem;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.cal-card: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);
}

.cal-card-link {
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    flex-grow: 1;
    gap: 1.25rem;
}

/* The date block */
.cal-card-date-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Aligns content to the top */
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 10px;
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    overflow: hidden; /* Important for containing the month banner */
}

.cal-card-month {
    display: block;
    width: 100%;
    text-align: center;
    background-color: #ef4444; /* Red for emphasis */
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 0.35rem 0;
}

.cal-card-day {
    font-size: 2.25rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
    margin-top: 0.35rem;
}

/* Event info block */
.cal-card-info {
    flex-grow: 1;
}

.cal-card-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 0.35rem;
    line-height: 1.3;
}

.cal-card-details {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    color: #4b5563;
}

.cal-card-details svg {
    width: 16px;
    height: 16px;
    color: #9ca3af;
    flex-shrink: 0;
}
</style>

<div class="cards-grid-container">
    
    
    <article class="cal-card">
        <a href="#" class="cal-card-link">
            <time class="cal-card-date-block" datetime="2025-08-20">
                <span class="cal-card-month">Aug</span>
                <span class="cal-card-day">20</span>
            </time>
            <div class="cal-card-info">
                <h3 class="cal-card-title">Design Systems Workshop</h3>
                <p class="cal-card-details">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor">
                        <path fill-rule="evenodd" d="M8,0C4.687,0,2,2.687,2,6c0,1.305,0.428,2.502,1.139,3.482c0.013,0.024,0.015,0.05,0.029,0.072l4,6
                            C7.354,15.833,7.666,16,8,16s0.646-0.167,0.832-0.446l4-6c0.015-0.022,0.017-0.048,0.029-0.072C13.572,8.502,14,7.305,14,6
                            C14,2.687,11.313,0,8,0z M8,8c-1.105,0-2-0.895-2-2s0.895-2,2-2s2,0.895,2,2S9.105,8,8,8z"></path>
                    </svg>
                    The Innovation Loft
                </p>
            </div>
        </a>
    </article>

<article class="cal-card">
        <a href="#" class="cal-card-link">
            <time class="cal-card-date-block" datetime="2025-09-05">
                <span class="cal-card-month">Sep</span>
                <span class="cal-card-day">05</span>
            </time>
            <div class="cal-card-info">
                <h3 class="cal-card-title">Founder's Fireside Chat</h3>
                 <p class="cal-card-details">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor">
                        <path fill-rule="evenodd" d="M8,0C4.687,0,2,2.687,2,6c0,1.305,0.428,2.502,1.139,3.482c0.013,0.024,0.015,0.05,0.029,0.072l4,6
                            C7.354,15.833,7.666,16,8,16s0.646-0.167,0.832-0.446l4-6c0.015-0.022,0.017-0.048,0.029-0.072C13.572,8.502,14,7.305,14,6
                            C14,2.687,11.313,0,8,0z M8,8c-1.105,0-2-0.895-2-2s0.895-2,2-2s2,0.895,2,2S9.105,8,8,8z"></path>
                    </svg>
                    Online &amp; In Person
                </p>
            </div>
        </a>
    </article>
    
    
    <article class="cal-card">
        <a href="#" class="cal-card-link">
            <time class="cal-card-date-block" datetime="2025-09-10">
                <span class="cal-card-month">Sep</span>
                <span class="cal-card-day">10</span>
            </time>
            <div class="cal-card-info">
                <h3 class="cal-card-title">Product Launch: The Quantum Series</h3>
                 <p class="cal-card-details">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor">
                        <path fill-rule="evenodd" d="M8,0C4.687,0,2,2.687,2,6c0,1.305,0.428,2.502,1.139,3.482c0.013,0.024,0.015,0.05,0.029,0.072l4,6
                            C7.354,15.833,7.666,16,8,16s0.646-0.167,0.832-0.446l4-6c0.015-0.022,0.017-0.048,0.029-0.072C13.572,8.502,14,7.305,14,6
                            C14,2.687,11.313,0,8,0z M8,8c-1.105,0-2-0.895-2-2s0.895-2,2-2s2,0.895,2,2S9.105,8,8,8z"></path>
                    </svg>
                    Exclusive Livestream
                </p>
            </div>
        </a>
    </article>
</div>

View Output