CSS Banners & Alerts 13 / 14
Material Design Floating Alert Card
Material Design floating alert cards in an authentic Material You aesthetic — tactile physical depth via dual-layer shadows (ambient + directional), tinted icon containers using <code>color-mix()</code>, pill-shaped buttons with transparent <code>::after</code> ripple overlay, coloured top strip for semantic indication, and a full semantic set (Error / Success / Warning / Info / Primary).
Best forMaterial You apps, Android-inspired web UIs, Material 3 design systems, mobile-first web apps.
The code
<section class="ba-mat" aria-label="Material Design floating alert demo">
<div class="label">// Material You alert cards</div>
<div class="md-alert md-alert--error">
<div class="md-alert-strip" aria-hidden="true"></div>
<div class="md-alert-body">
<div class="md-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg></div>
<div class="md-text"><div class="md-supporting">Error · Authentication</div><div class="md-headline">Sign-in failed</div><div class="md-body-text">Your session has expired or the credentials provided are incorrect. Please sign in again to continue.</div></div>
</div>
<div class="md-divider" aria-hidden="true"></div>
<div class="md-actions"><button class="md-btn md-btn--text" type="button">Dismiss</button><button class="md-btn md-btn--filled" type="button">Sign in</button></div>
</div>
<div class="md-alert md-alert--success">
<div class="md-alert-strip" aria-hidden="true"></div>
<div class="md-alert-body">
<div class="md-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg></div>
<div class="md-text"><div class="md-supporting">Confirmed · Payment</div><div class="md-headline">Order placed successfully</div><div class="md-body-text">Order #ORD-88214 has been confirmed. Your package will be dispatched within 1 business day.</div></div>
</div>
<div class="md-divider" aria-hidden="true"></div>
<div class="md-actions"><button class="md-btn md-btn--text" type="button">Dismiss</button><button class="md-btn md-btn--filled" type="button">Track order</button></div>
</div>
<div class="md-alert md-alert--warning">
<div class="md-alert-strip" aria-hidden="true"></div>
<div class="md-alert-body">
<div class="md-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg></div>
<div class="md-text"><div class="md-supporting">Warning · Storage</div><div class="md-headline">Storage limit almost reached</div><div class="md-body-text">You've used 4.7 GB of your 5 GB quota. Manage files or upgrade your plan to avoid disruption.</div></div>
</div>
<div class="md-divider" aria-hidden="true"></div>
<div class="md-actions"><button class="md-btn md-btn--text" type="button">Manage files</button><button class="md-btn md-btn--filled" type="button">Upgrade</button></div>
</div>
<div class="md-alert md-alert--info">
<div class="md-alert-strip" aria-hidden="true"></div>
<div class="md-alert-body">
<div class="md-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg></div>
<div class="md-text"><div class="md-supporting">Info · Maintenance</div><div class="md-headline">Scheduled downtime this weekend</div><div class="md-body-text">We'll be performing infrastructure upgrades Saturday 23:00–01:00 UTC.</div></div>
</div>
<div class="md-divider" aria-hidden="true"></div>
<div class="md-actions"><button class="md-btn md-btn--text" type="button">Remind me</button><button class="md-btn md-btn--filled" type="button">View details</button></div>
</div>
<div class="md-alert md-alert--primary">
<div class="md-alert-strip" aria-hidden="true"></div>
<div class="md-alert-body">
<div class="md-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 1l2.7 7.6H22l-6.2 4.6 2.4 7.4L12 16.2 5.8 20.6l2.4-7.4L2 8.6h7.3z"/></svg></div>
<div class="md-text"><div class="md-supporting">New · Feature update</div><div class="md-headline">AI writing assistant is live</div><div class="md-body-text">Smart autocomplete is now available in the editor. Start typing to see contextual suggestions powered by your writing style.</div></div>
</div>
<div class="md-divider" aria-hidden="true"></div>
<div class="md-actions"><button class="md-btn md-btn--text" type="button">Later</button><button class="md-btn md-btn--filled" type="button">Try now</button></div>
</div>
<div class="label label-spaced">// Snackbar variant</div>
<div class="md-snack" role="status">
<span class="md-snack-text">Message sent · Archived to your sent folder.</span>
<button class="md-snack-action" type="button">Undo</button>
</div>
</section> <section class="ba-mat" aria-label="Material Design floating alert demo">
<div class="label">// Material You alert cards</div>
<div class="md-alert md-alert--error">
<div class="md-alert-strip" aria-hidden="true"></div>
<div class="md-alert-body">
<div class="md-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg></div>
<div class="md-text"><div class="md-supporting">Error · Authentication</div><div class="md-headline">Sign-in failed</div><div class="md-body-text">Your session has expired or the credentials provided are incorrect. Please sign in again to continue.</div></div>
</div>
<div class="md-divider" aria-hidden="true"></div>
<div class="md-actions"><button class="md-btn md-btn--text" type="button">Dismiss</button><button class="md-btn md-btn--filled" type="button">Sign in</button></div>
</div>
<div class="md-alert md-alert--success">
<div class="md-alert-strip" aria-hidden="true"></div>
<div class="md-alert-body">
<div class="md-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg></div>
<div class="md-text"><div class="md-supporting">Confirmed · Payment</div><div class="md-headline">Order placed successfully</div><div class="md-body-text">Order #ORD-88214 has been confirmed. Your package will be dispatched within 1 business day.</div></div>
</div>
<div class="md-divider" aria-hidden="true"></div>
<div class="md-actions"><button class="md-btn md-btn--text" type="button">Dismiss</button><button class="md-btn md-btn--filled" type="button">Track order</button></div>
</div>
<div class="md-alert md-alert--warning">
<div class="md-alert-strip" aria-hidden="true"></div>
<div class="md-alert-body">
<div class="md-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg></div>
<div class="md-text"><div class="md-supporting">Warning · Storage</div><div class="md-headline">Storage limit almost reached</div><div class="md-body-text">You've used 4.7 GB of your 5 GB quota. Manage files or upgrade your plan to avoid disruption.</div></div>
</div>
<div class="md-divider" aria-hidden="true"></div>
<div class="md-actions"><button class="md-btn md-btn--text" type="button">Manage files</button><button class="md-btn md-btn--filled" type="button">Upgrade</button></div>
</div>
<div class="md-alert md-alert--info">
<div class="md-alert-strip" aria-hidden="true"></div>
<div class="md-alert-body">
<div class="md-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg></div>
<div class="md-text"><div class="md-supporting">Info · Maintenance</div><div class="md-headline">Scheduled downtime this weekend</div><div class="md-body-text">We'll be performing infrastructure upgrades Saturday 23:00–01:00 UTC.</div></div>
</div>
<div class="md-divider" aria-hidden="true"></div>
<div class="md-actions"><button class="md-btn md-btn--text" type="button">Remind me</button><button class="md-btn md-btn--filled" type="button">View details</button></div>
</div>
<div class="md-alert md-alert--primary">
<div class="md-alert-strip" aria-hidden="true"></div>
<div class="md-alert-body">
<div class="md-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 1l2.7 7.6H22l-6.2 4.6 2.4 7.4L12 16.2 5.8 20.6l2.4-7.4L2 8.6h7.3z"/></svg></div>
<div class="md-text"><div class="md-supporting">New · Feature update</div><div class="md-headline">AI writing assistant is live</div><div class="md-body-text">Smart autocomplete is now available in the editor. Start typing to see contextual suggestions powered by your writing style.</div></div>
</div>
<div class="md-divider" aria-hidden="true"></div>
<div class="md-actions"><button class="md-btn md-btn--text" type="button">Later</button><button class="md-btn md-btn--filled" type="button">Try now</button></div>
</div>
<div class="label label-spaced">// Snackbar variant</div>
<div class="md-snack" role="status">
<span class="md-snack-text">Message sent · Archived to your sent folder.</span>
<button class="md-snack-action" type="button">Undo</button>
</div>
</section>/* ─── 13 Material Design Floating Alert Card — Material You ─── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;700&family=Roboto+Mono:wght@400;500&display=swap');
.ba-mat {
--ba-mat-background: #fef7ff;
--ba-mat-surface: #fff;
--ba-mat-surface-variant: #e7e0ec;
--ba-mat-on-surface: #1c1b1f;
--ba-mat-on-surface-variant: #49454f;
--ba-mat-outline: #79747e;
--ba-mat-outline-variant: #cac4d0;
--ba-mat-primary: #6750a4;
--ba-mat-primary-container: #eaddff;
--ba-mat-error: #b3261e;
--ba-mat-error-container: #f9dedc;
--ba-mat-c-success: #386a20; --ba-mat-c-success-bg: #c5ecca;
--ba-mat-c-warning: #6e4a00; --ba-mat-c-warning-bg: #ffddb5;
--ba-mat-c-info: #0061a4; --ba-mat-c-info-bg: #d1e4ff;
--ba-mat-elev-1: 0 1px 2px rgba(0,0,0,0.3), 0 1px 3px 1px rgba(0,0,0,0.15);
--ba-mat-elev-2: 0 1px 2px rgba(0,0,0,0.3), 0 2px 6px 2px rgba(0,0,0,0.15);
--ba-mat-elev-3: 0 4px 8px 3px rgba(0,0,0,0.15), 0 1px 3px rgba(0,0,0,0.3);
--ba-mat-elev-4: 0 6px 10px 4px rgba(0,0,0,0.15), 0 2px 3px rgba(0,0,0,0.3);
--ba-mat-radius-sm: 12px;
--ba-mat-radius-md: 16px;
--ba-mat-radius-full: 1000px;
position: relative;
width: 100%;
min-height: 1000px;
background: var(--ba-mat-background);
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 16px;
padding: 60px 20px;
font-family: 'Roboto', 'DM Sans', sans-serif;
color: var(--ba-mat-on-surface);
box-sizing: border-box;
}
.ba-mat *, .ba-mat *::before, .ba-mat *::after { box-sizing: border-box; margin: 0; padding: 0; }
.ba-mat .label { font-family: 'Roboto Mono', monospace; font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ba-mat-outline); opacity: 0.5; align-self: flex-start; max-width: 560px; width: 100%; }
.ba-mat .label-spaced { margin-top: 8px; }
.ba-mat .md-alert { width: 100%; max-width: 560px; background: var(--ba-mat-surface); border-radius: var(--ba-mat-radius-md); box-shadow: var(--ba-mat-elev-3); overflow: hidden; transition: box-shadow 0.25s, transform 0.25s; animation: ba-mat-in 0.35s cubic-bezier(0.05, 0.7, 0.1, 1.0) both; }
.ba-mat .md-alert:hover { box-shadow: var(--ba-mat-elev-4); transform: translateY(-2px); }
.ba-mat .md-alert:nth-child(2) { animation-delay: 0.0s; } .ba-mat .md-alert:nth-child(3) { animation-delay: 0.06s; } .ba-mat .md-alert:nth-child(4) { animation-delay: 0.12s; } .ba-mat .md-alert:nth-child(5) { animation-delay: 0.18s; } .ba-mat .md-alert:nth-child(6) { animation-delay: 0.24s; }
@keyframes ba-mat-in { from { opacity: 0; transform: scale(0.94) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.ba-mat .md-alert-strip { height: 4px; width: 100%; }
.ba-mat .md-alert-body { padding: 16px 16px 12px; display: flex; gap: 16px; align-items: flex-start; }
.ba-mat .md-icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--ba-mat-radius-sm); display: flex; align-items: center; justify-content: center; }
.ba-mat .md-icon svg { width: 24px; height: 24px; }
.ba-mat .md-text { flex: 1; min-width: 0; }
.ba-mat .md-supporting { font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ba-mat-on-surface-variant); margin-bottom: 4px; }
.ba-mat .md-headline { font-family: 'DM Sans', sans-serif; font-size: 16px; font-weight: 500; color: var(--ba-mat-on-surface); line-height: 1.3; letter-spacing: 0.01em; margin-bottom: 6px; }
.ba-mat .md-body-text { font-size: 13.5px; color: var(--ba-mat-on-surface-variant); line-height: 1.6; }
.ba-mat .md-divider { height: 1px; background: var(--ba-mat-outline-variant); margin: 0 16px; }
.ba-mat .md-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; padding: 8px; }
.ba-mat .md-btn { font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0.06em; padding: 8px 16px; border: none; border-radius: var(--ba-mat-radius-full); cursor: pointer; position: relative; overflow: hidden; transition: all 0.2s; background: transparent; }
.ba-mat .md-btn::after { content: ''; position: absolute; inset: 0; background: currentColor; opacity: 0; transition: opacity 0.2s; border-radius: inherit; }
.ba-mat .md-btn:hover::after { opacity: 0.08; }
.ba-mat .md-btn:active::after { opacity: 0.16; }
.ba-mat .md-btn--text { color: var(--ba-mat-on-surface-variant); }
.ba-mat .md-btn--filled { padding: 8px 24px; color: white; box-shadow: var(--ba-mat-elev-1); }
.ba-mat .md-btn--filled:hover { box-shadow: var(--ba-mat-elev-2); }
.ba-mat .md-alert--error .md-alert-strip { background: var(--ba-mat-error); }
.ba-mat .md-alert--error .md-icon { background: var(--ba-mat-error-container); color: var(--ba-mat-error); }
.ba-mat .md-alert--error .md-btn--filled { background: var(--ba-mat-error); }
.ba-mat .md-alert--error .md-btn--text { color: var(--ba-mat-error); }
.ba-mat .md-alert--success .md-alert-strip { background: var(--ba-mat-c-success); }
.ba-mat .md-alert--success .md-icon { background: var(--ba-mat-c-success-bg); color: var(--ba-mat-c-success); }
.ba-mat .md-alert--success .md-btn--filled { background: var(--ba-mat-c-success); }
.ba-mat .md-alert--success .md-btn--text { color: var(--ba-mat-c-success); }
.ba-mat .md-alert--warning .md-alert-strip { background: var(--ba-mat-c-warning); }
.ba-mat .md-alert--warning .md-icon { background: var(--ba-mat-c-warning-bg); color: var(--ba-mat-c-warning); }
.ba-mat .md-alert--warning .md-btn--filled { background: var(--ba-mat-c-warning); }
.ba-mat .md-alert--warning .md-btn--text { color: var(--ba-mat-c-warning); }
.ba-mat .md-alert--info .md-alert-strip { background: var(--ba-mat-c-info); }
.ba-mat .md-alert--info .md-icon { background: var(--ba-mat-c-info-bg); color: var(--ba-mat-c-info); }
.ba-mat .md-alert--info .md-btn--filled { background: var(--ba-mat-c-info); }
.ba-mat .md-alert--info .md-btn--text { color: var(--ba-mat-c-info); }
.ba-mat .md-alert--primary .md-alert-strip { background: var(--ba-mat-primary); }
.ba-mat .md-alert--primary .md-icon { background: var(--ba-mat-primary-container); color: var(--ba-mat-primary); }
.ba-mat .md-alert--primary .md-btn--filled { background: var(--ba-mat-primary); }
.ba-mat .md-alert--primary .md-btn--text { color: var(--ba-mat-primary); }
.ba-mat .md-snack { width: 100%; max-width: 560px; background: #313033; border-radius: var(--ba-mat-radius-sm); box-shadow: var(--ba-mat-elev-3); padding: 12px 8px 12px 16px; display: flex; align-items: center; gap: 16px; animation: ba-mat-in 0.35s cubic-bezier(0.05, 0.7, 0.1, 1.0) 0.3s both; }
.ba-mat .md-snack-text { flex: 1; font-size: 14px; font-weight: 400; color: #e6e1e5; line-height: 1.4; }
.ba-mat .md-snack-action { font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500; color: #d0bcff; letter-spacing: 0.06em; background: transparent; border: none; border-radius: var(--ba-mat-radius-full); padding: 8px 12px; cursor: pointer; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .ba-mat .md-alert, .ba-mat .md-snack { animation: none; } } /* ─── 13 Material Design Floating Alert Card — Material You ─── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;700&family=Roboto+Mono:wght@400;500&display=swap');
.ba-mat {
--ba-mat-background: #fef7ff;
--ba-mat-surface: #fff;
--ba-mat-surface-variant: #e7e0ec;
--ba-mat-on-surface: #1c1b1f;
--ba-mat-on-surface-variant: #49454f;
--ba-mat-outline: #79747e;
--ba-mat-outline-variant: #cac4d0;
--ba-mat-primary: #6750a4;
--ba-mat-primary-container: #eaddff;
--ba-mat-error: #b3261e;
--ba-mat-error-container: #f9dedc;
--ba-mat-c-success: #386a20; --ba-mat-c-success-bg: #c5ecca;
--ba-mat-c-warning: #6e4a00; --ba-mat-c-warning-bg: #ffddb5;
--ba-mat-c-info: #0061a4; --ba-mat-c-info-bg: #d1e4ff;
--ba-mat-elev-1: 0 1px 2px rgba(0,0,0,0.3), 0 1px 3px 1px rgba(0,0,0,0.15);
--ba-mat-elev-2: 0 1px 2px rgba(0,0,0,0.3), 0 2px 6px 2px rgba(0,0,0,0.15);
--ba-mat-elev-3: 0 4px 8px 3px rgba(0,0,0,0.15), 0 1px 3px rgba(0,0,0,0.3);
--ba-mat-elev-4: 0 6px 10px 4px rgba(0,0,0,0.15), 0 2px 3px rgba(0,0,0,0.3);
--ba-mat-radius-sm: 12px;
--ba-mat-radius-md: 16px;
--ba-mat-radius-full: 1000px;
position: relative;
width: 100%;
min-height: 1000px;
background: var(--ba-mat-background);
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 16px;
padding: 60px 20px;
font-family: 'Roboto', 'DM Sans', sans-serif;
color: var(--ba-mat-on-surface);
box-sizing: border-box;
}
.ba-mat *, .ba-mat *::before, .ba-mat *::after { box-sizing: border-box; margin: 0; padding: 0; }
.ba-mat .label { font-family: 'Roboto Mono', monospace; font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ba-mat-outline); opacity: 0.5; align-self: flex-start; max-width: 560px; width: 100%; }
.ba-mat .label-spaced { margin-top: 8px; }
.ba-mat .md-alert { width: 100%; max-width: 560px; background: var(--ba-mat-surface); border-radius: var(--ba-mat-radius-md); box-shadow: var(--ba-mat-elev-3); overflow: hidden; transition: box-shadow 0.25s, transform 0.25s; animation: ba-mat-in 0.35s cubic-bezier(0.05, 0.7, 0.1, 1.0) both; }
.ba-mat .md-alert:hover { box-shadow: var(--ba-mat-elev-4); transform: translateY(-2px); }
.ba-mat .md-alert:nth-child(2) { animation-delay: 0.0s; } .ba-mat .md-alert:nth-child(3) { animation-delay: 0.06s; } .ba-mat .md-alert:nth-child(4) { animation-delay: 0.12s; } .ba-mat .md-alert:nth-child(5) { animation-delay: 0.18s; } .ba-mat .md-alert:nth-child(6) { animation-delay: 0.24s; }
@keyframes ba-mat-in { from { opacity: 0; transform: scale(0.94) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.ba-mat .md-alert-strip { height: 4px; width: 100%; }
.ba-mat .md-alert-body { padding: 16px 16px 12px; display: flex; gap: 16px; align-items: flex-start; }
.ba-mat .md-icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--ba-mat-radius-sm); display: flex; align-items: center; justify-content: center; }
.ba-mat .md-icon svg { width: 24px; height: 24px; }
.ba-mat .md-text { flex: 1; min-width: 0; }
.ba-mat .md-supporting { font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ba-mat-on-surface-variant); margin-bottom: 4px; }
.ba-mat .md-headline { font-family: 'DM Sans', sans-serif; font-size: 16px; font-weight: 500; color: var(--ba-mat-on-surface); line-height: 1.3; letter-spacing: 0.01em; margin-bottom: 6px; }
.ba-mat .md-body-text { font-size: 13.5px; color: var(--ba-mat-on-surface-variant); line-height: 1.6; }
.ba-mat .md-divider { height: 1px; background: var(--ba-mat-outline-variant); margin: 0 16px; }
.ba-mat .md-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; padding: 8px; }
.ba-mat .md-btn { font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0.06em; padding: 8px 16px; border: none; border-radius: var(--ba-mat-radius-full); cursor: pointer; position: relative; overflow: hidden; transition: all 0.2s; background: transparent; }
.ba-mat .md-btn::after { content: ''; position: absolute; inset: 0; background: currentColor; opacity: 0; transition: opacity 0.2s; border-radius: inherit; }
.ba-mat .md-btn:hover::after { opacity: 0.08; }
.ba-mat .md-btn:active::after { opacity: 0.16; }
.ba-mat .md-btn--text { color: var(--ba-mat-on-surface-variant); }
.ba-mat .md-btn--filled { padding: 8px 24px; color: white; box-shadow: var(--ba-mat-elev-1); }
.ba-mat .md-btn--filled:hover { box-shadow: var(--ba-mat-elev-2); }
.ba-mat .md-alert--error .md-alert-strip { background: var(--ba-mat-error); }
.ba-mat .md-alert--error .md-icon { background: var(--ba-mat-error-container); color: var(--ba-mat-error); }
.ba-mat .md-alert--error .md-btn--filled { background: var(--ba-mat-error); }
.ba-mat .md-alert--error .md-btn--text { color: var(--ba-mat-error); }
.ba-mat .md-alert--success .md-alert-strip { background: var(--ba-mat-c-success); }
.ba-mat .md-alert--success .md-icon { background: var(--ba-mat-c-success-bg); color: var(--ba-mat-c-success); }
.ba-mat .md-alert--success .md-btn--filled { background: var(--ba-mat-c-success); }
.ba-mat .md-alert--success .md-btn--text { color: var(--ba-mat-c-success); }
.ba-mat .md-alert--warning .md-alert-strip { background: var(--ba-mat-c-warning); }
.ba-mat .md-alert--warning .md-icon { background: var(--ba-mat-c-warning-bg); color: var(--ba-mat-c-warning); }
.ba-mat .md-alert--warning .md-btn--filled { background: var(--ba-mat-c-warning); }
.ba-mat .md-alert--warning .md-btn--text { color: var(--ba-mat-c-warning); }
.ba-mat .md-alert--info .md-alert-strip { background: var(--ba-mat-c-info); }
.ba-mat .md-alert--info .md-icon { background: var(--ba-mat-c-info-bg); color: var(--ba-mat-c-info); }
.ba-mat .md-alert--info .md-btn--filled { background: var(--ba-mat-c-info); }
.ba-mat .md-alert--info .md-btn--text { color: var(--ba-mat-c-info); }
.ba-mat .md-alert--primary .md-alert-strip { background: var(--ba-mat-primary); }
.ba-mat .md-alert--primary .md-icon { background: var(--ba-mat-primary-container); color: var(--ba-mat-primary); }
.ba-mat .md-alert--primary .md-btn--filled { background: var(--ba-mat-primary); }
.ba-mat .md-alert--primary .md-btn--text { color: var(--ba-mat-primary); }
.ba-mat .md-snack { width: 100%; max-width: 560px; background: #313033; border-radius: var(--ba-mat-radius-sm); box-shadow: var(--ba-mat-elev-3); padding: 12px 8px 12px 16px; display: flex; align-items: center; gap: 16px; animation: ba-mat-in 0.35s cubic-bezier(0.05, 0.7, 0.1, 1.0) 0.3s both; }
.ba-mat .md-snack-text { flex: 1; font-size: 14px; font-weight: 400; color: #e6e1e5; line-height: 1.4; }
.ba-mat .md-snack-action { font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500; color: #d0bcff; letter-spacing: 0.06em; background: transparent; border: none; border-radius: var(--ba-mat-radius-full); padding: 8px 12px; cursor: pointer; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .ba-mat .md-alert, .ba-mat .md-snack { animation: none; } }More from CSS Banners & Alerts
Dismissible CSS Alert with Close ButtonSticky Top Announcement Banner CSSCSS Cookie Consent Banner BottomCSS Alert Banner with Icon AlignmentCSS Toast Notification Alert Top RightCSS Banner with Diagonal Slash BackgroundCSS Gradient Animated Border AlertSemantic Bootstrap-style Alerts CSSInline Form Validation Alert CSSCSS Pulsing Banner for Live UpdatesMinimalist Border Left CSS AlertResponsive Full Width Hero Banner CSS
View the full collection →