Docs / Examples / Calendar Event Card Example

Calendar Event Card

This example shows how to create shareable calendar event cards, perfect for event promotions, social media, or email invitations.

HTML Content

<div class="event-card">
    <div class="date-badge">
        <div class="month">JAN</div>
        <div class="day">15</div>
        <div class="year">2025</div>
    </div>
    <div class="event-content">
        <div class="event-type">CONFERENCE</div>
        <h1 class="event-title">Web Development Summit 2025</h1>
        <div class="event-details">
            <div class="detail">
                <svg class="icon" viewBox="0 0 24 24" width="16" height="16">
                    <path fill="currentColor" d="M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z" />
                </svg>
                <span>Tech Convention Center, San Francisco</span>
            </div>
            <div class="detail">
                <svg class="icon" viewBox="0 0 24 24" width="16" height="16">
                    <path fill="currentColor" d="M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z" />
                </svg>
                <span>9:00 AM - 6:00 PM PST</span>
            </div>
        </div>
        <div class="event-description">
            Join industry leaders and innovators for a day of inspiring talks, 
            workshops, and networking opportunities. Early bird tickets available now!
        </div>
        <div class="event-footer">
            <div class="attendees">
                <img src="https://i.pravatar.cc/32?u=1" alt="Attendee 1" class="attendee">
                <img src="https://i.pravatar.cc/32?u=2" alt="Attendee 2" class="attendee">
                <img src="https://i.pravatar.cc/32?u=3" alt="Attendee 3" class="attendee">
                <div class="more-attendees">+42</div>
            </div>
            <div class="price">$299</div>
        </div>
    </div>
</div>

CSS Styles

body {
    margin: 0;
    padding: 24px;
    background: white;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.event-card {
    width: 600px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    display: flex;
    overflow: hidden;
}

.date-badge {
    width: 120px;
    background: #3b82f6;
    color: white;
    padding: 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.month {
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
}

.day {
    font-size: 36px;
    font-weight: 700;
    line-height: 1;
    margin: 8px 0;
}

.year {
    font-size: 16px;
    opacity: 0.9;
}

.event-content {
    flex: 1;
    padding: 24px;
}

.event-type {
    font-size: 12px;
    font-weight: 600;
    color: #3b82f6;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.event-title {
    margin: 0 0 16px;
    font-size: 24px;
    color: #1e293b;
    line-height: 1.3;
}

.event-details {
    margin-bottom: 16px;
}

.detail {
    display: flex;
    align-items: center;
    color: #64748b;
    font-size: 14px;
    margin-bottom: 8px;
}

.icon {
    margin-right: 8px;
    flex-shrink: 0;
}

.event-description {
    color: #475569;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 24px;
}

.event-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid #e2e8f0;
}

.attendees {
    display: flex;
    align-items: center;
}

.attendee {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid white;
    margin-right: -8px;
}

.more-attendees {
    background: #f1f5f9;
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
}

.price {
    font-size: 24px;
    font-weight: 700;
    color: #3b82f6;
}

API Request

POST https://app.html2img.com/api/html
{
    "html": "<div class=\"event-card\"><div class=\"date-badge\"><div class=\"month\">JAN</div><div class=\"day\">15</div><div class=\"year\">2025</div></div><div class=\"event-content\"><div class=\"event-type\">CONFERENCE</div><h1 class=\"event-title\">Web Development Summit 2025</h1><div class=\"event-details\"><div class=\"detail\"><svg class=\"icon\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path fill=\"currentColor\" d=\"M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z\" /></svg><span>Tech Convention Center, San Francisco</span></div><div class=\"detail\"><svg class=\"icon\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path fill=\"currentColor\" d=\"M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z\" /></svg><span>9:00 AM - 6:00 PM PST</span></div></div><div class=\"event-description\">Join industry leaders and innovators for a day of inspiring talks, workshops, and networking opportunities. Early bird tickets available now!</div><div class=\"event-footer\"><div class=\"attendees\"><img src=\"https://i.pravatar.cc/32?u=1\" alt=\"Attendee 1\" class=\"attendee\"><img src=\"https://i.pravatar.cc/32?u=2\" alt=\"Attendee 2\" class=\"attendee\"><img src=\"https://i.pravatar.cc/32?u=3\" alt=\"Attendee 3\" class=\"attendee\"><div class=\"more-attendees\">+42</div></div><div class=\"price\">$299</div></div></div></div>",
    "width": 648,
    "height": 400,
    "css": "body{margin:0;padding:24px;background:white;font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,sans-serif}.event-card{width:600px;background:white;border-radius:16px;box-shadow:0 4px 24px rgba(0,0,0,0.08);display:flex;overflow:hidden}.date-badge{width:120px;background:#3b82f6;color:white;padding:24px;text-align:center;display:flex;flex-direction:column;justify-content:center}.month{font-size:20px;font-weight:600;text-transform:uppercase}.day{font-size:36px;font-weight:700;line-height:1;margin:8px 0}.year{font-size:16px;opacity:0.9}.event-content{flex:1;padding:24px}.event-type{font-size:12px;font-weight:600;color:#3b82f6;letter-spacing:1px;margin-bottom:8px}.event-title{margin:0 0 16px;font-size:24px;color:#1e293b;line-height:1.3}.event-details{margin-bottom:16px}.detail{display:flex;align-items:center;color:#64748b;font-size:14px;margin-bottom:8px}.icon{margin-right:8px;flex-shrink:0}.event-description{color:#475569;font-size:14px;line-height:1.6;margin-bottom:24px}.event-footer{display:flex;justify-content:space-between;align-items:center;padding-top:16px;border-top:1px solid #e2e8f0}.attendees{display:flex;align-items:center}.attendee{width:32px;height:32px;border-radius:50%;border:2px solid white;margin-right:-8px}.more-attendees{background:#f1f5f9;color:#64748b;font-size:12px;font-weight:600;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-left:4px}.price{font-size:24px;font-weight:700;color:#3b82f6}"
}
Calendar Event Card

Update the event details, date, and attendee images to match your event information.

How it Works

  1. Modern card design with date badge sidebar
  2. SVG icons for location and time details
  3. Attendee avatars with overlap effect
  4. Responsive layout using flexbox

When using external avatar images, ensure they are publicly accessible and properly cached.