Callout Card

<!DOCTYPE html>
<title>My Example</title>

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

/* Optional: a container to center the card on the page for demonstration */
.demo-container-callout {
    display: flex;
    justify-content: center;
    padding: 2rem;
}

/* === Callout Card Styles === */
.callout-card {
    --callout-radius: 12px;
    --callout-shadow: 0 4px 10px rgba(0,0,0,0.06);
    --callout-accent-color: #4f46e5; /* Indigo */
    --callout-bg-color: #ffffff;
    
    background-color: var(--callout-bg-color);
    border-radius: var(--callout-radius);
    box-shadow: var(--callout-shadow);
    border-left: 5px solid var(--callout-accent-color);
    max-width: 800px;
    width: 100%;
    
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 2rem;
}

.callout-card-icon-wrapper {
    flex-shrink: 0;
}
.callout-card-icon-wrapper svg {
    width: 48px;
    height: 48px;
    color: var(--callout-accent-color);
}

.callout-card-content {
    flex-grow: 1;
}

.callout-card-title {
    font-size: 1.375rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    color: #111827;
}

.callout-card-description {
    font-size: 1rem;
    line-height: 1.6;
    color: #4b5563;
    margin: 0 0 1rem;
}

.callout-card-cta {
    display: inline-block;
    color: var(--callout-accent-color);
    font-weight: 500;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: border-bottom-color 0.2s ease;
}
.callout-card-cta:hover {
    border-bottom-color: var(--callout-accent-color);
}

/* Style Variation */
.callout-card.style-2 {
    --callout-accent-color: #16a34a; /* Green */
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .callout-card {
        flex-direction: column;
        align-items: flex-start;
        text-align: center;
    }
    .callout-card-icon-wrapper {
        margin: 0 auto;
    }
}
</style>

<div class="demo-container-callout">
    <section class="callout-card">
        <div class="callout-card-icon-wrapper">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none" stroke="currentColor"><path d="M12,19.77a11.13,11.13,0,0,0-2.26.94L10,25.24,5.44,25a11.13,11.13,0,0,0-.94,2.26l3.37,3.05-3.37,3a10.68,10.68,0,0,0,.94,2.26L10,35.39l-.23,4.54a11.09,11.09,0,0,0,2.26.93l3.05-3.37,3,3.37a10.64,10.64,0,0,0,2.26-.93l-.23-4.54,4.54.23a10.64,10.64,0,0,0,.93-2.26l-3.37-3,3.37-3.05A11.09,11.09,0,0,0,24.66,25l-4.54.23.23-4.53a10.68,10.68,0,0,0-2.26-.94l-3,3.37Z"/><circle cx="15.05" cy="30.32" r="3.96"/><path d="M29.91,7.14a11,11,0,0,0-2.27.93l.24,4.54-4.54-.23a10.64,10.64,0,0,0-.93,2.26l3.36,3-3.36,3.05A11.09,11.09,0,0,0,23.34,23l4.54-.23-.24,4.53a11,11,0,0,0,2.27.94l3-3.37,3,3.37a11.13,11.13,0,0,0,2.26-.94L38,22.76l4.53.23a11.13,11.13,0,0,0,.94-2.26l-3.37-3.05,3.37-3a10.68,10.68,0,0,0-.94-2.26L38,12.61l.23-4.54A11,11,0,0,0,36,7.14l-3,3.37Z"/><circle cx="32.95" cy="17.68" r="3.96"/></svg>
        </div>
        <div class="callout-card-content">
            <h3 class="callout-card-title">New Feature: Automation API</h3>
            <p class="callout-card-description">Supercharge your workflow by connecting your favorite tools. Our new API is now available for all Pro plan subscribers.</p>
            <a href="#" class="callout-card-cta">Read the Docs</a>
        </div>
    </section>
</div>