CSS Banners & Alerts 09 / 14
Minimalist Border Left CSS Alert
Minimalist border-left CSS alerts in a Swiss typography / documentation aesthetic — Fraunces serif headlines + Geist Mono labels, warm parchment surface, and a single CSS variable <code>--c</code> drives every colour state.
Best fordocumentation sites, technical wikis, developer changelogs, API status pages.
The code
<section class="ba-bdl" aria-label="Border-left minimalist alert demo">
<div class="section-label">// Standard alerts</div>
<div class="card">
<div class="alert" data-c="success"><div class="alert-row"><span class="alert-type">success</span><span class="alert-rule" aria-hidden="true"></span><span class="alert-dot" aria-hidden="true"></span></div><div class="alert-title">Deployment complete.</div><div class="alert-body">Version 3.8.1 is now live across all regions. Zero downtime recorded during the rollout window.</div><a href="#" class="alert-link">View deployment log</a></div>
<div class="alert" data-c="error"><div class="alert-row"><span class="alert-type">error</span><span class="alert-rule" aria-hidden="true"></span><span class="alert-dot" aria-hidden="true"></span></div><div class="alert-title">Database connection refused.</div><div class="alert-body">Unable to reach <code>pg-primary.cluster.internal:5432</code>. Check that your DB is accepting connections and firewall rules permit access from this host.</div><a href="#" class="alert-link">View troubleshooting guide</a></div>
<div class="alert" data-c="warning"><div class="alert-row"><span class="alert-type">warning</span><span class="alert-rule" aria-hidden="true"></span><span class="alert-dot" aria-hidden="true"></span></div><div class="alert-title">Deprecated method in use.</div><div class="alert-body">Your codebase calls <code>client.legacyAuth()</code> which will be removed in v4.0. Migrate to <code>client.auth.verify()</code> before the next major release.</div><a href="#" class="alert-link">Migration guide</a></div>
<div class="alert" data-c="info"><div class="alert-row"><span class="alert-type">info</span><span class="alert-rule" aria-hidden="true"></span><span class="alert-dot" aria-hidden="true"></span></div><div class="alert-title">Read-only mode is active.</div><div class="alert-body">You are browsing a shared workspace snapshot. Changes you make will not be saved. Switch to your personal workspace to enable editing.</div><a href="#" class="alert-link">Switch workspace</a></div>
<div class="alert" data-c="purple"><div class="alert-row"><span class="alert-type">note</span><span class="alert-rule" aria-hidden="true"></span><span class="alert-dot" aria-hidden="true"></span></div><div class="alert-title">Experimental feature enabled.</div><div class="alert-body">You have opted into the <code>ai-suggest</code> beta. Behaviour may change without notice between releases.</div></div>
</div>
<div class="section-gap" aria-hidden="true"></div>
<div class="section-label">// Compact inline alerts</div>
<div class="card">
<div class="alert alert--compact" data-c="success"><span class="compact-type">ok</span><span class="compact-divider" aria-hidden="true"></span><span class="compact-text"><strong>2,048 records</strong> imported without errors.</span></div>
<div class="alert alert--compact" data-c="error"><span class="compact-type">fail</span><span class="compact-divider" aria-hidden="true"></span><span class="compact-text"><strong>Invalid token.</strong> Session has expired — please sign in again.</span></div>
<div class="alert alert--compact" data-c="warning"><span class="compact-type">warn</span><span class="compact-divider" aria-hidden="true"></span><span class="compact-text">You have <strong>3 unreviewed</strong> pull requests older than 14 days.</span></div>
<div class="alert alert--compact" data-c="info"><span class="compact-type">info</span><span class="compact-divider" aria-hidden="true"></span><span class="compact-text">Webhooks are replayed in <strong>FIFO order</strong> with exponential back-off.</span></div>
<div class="alert alert--compact" data-c="neutral"><span class="compact-type">note</span><span class="compact-divider" aria-hidden="true"></span><span class="compact-text">This endpoint is <strong>rate-limited</strong> to 120 requests per minute per API key.</span></div>
<div class="alert alert--compact" data-c="pink"><span class="compact-type">new</span><span class="compact-divider" aria-hidden="true"></span><span class="compact-text">Streaming responses now supported via <code>Accept: text/event-stream</code>.</span></div>
</div>
</section> <section class="ba-bdl" aria-label="Border-left minimalist alert demo">
<div class="section-label">// Standard alerts</div>
<div class="card">
<div class="alert" data-c="success"><div class="alert-row"><span class="alert-type">success</span><span class="alert-rule" aria-hidden="true"></span><span class="alert-dot" aria-hidden="true"></span></div><div class="alert-title">Deployment complete.</div><div class="alert-body">Version 3.8.1 is now live across all regions. Zero downtime recorded during the rollout window.</div><a href="#" class="alert-link">View deployment log</a></div>
<div class="alert" data-c="error"><div class="alert-row"><span class="alert-type">error</span><span class="alert-rule" aria-hidden="true"></span><span class="alert-dot" aria-hidden="true"></span></div><div class="alert-title">Database connection refused.</div><div class="alert-body">Unable to reach <code>pg-primary.cluster.internal:5432</code>. Check that your DB is accepting connections and firewall rules permit access from this host.</div><a href="#" class="alert-link">View troubleshooting guide</a></div>
<div class="alert" data-c="warning"><div class="alert-row"><span class="alert-type">warning</span><span class="alert-rule" aria-hidden="true"></span><span class="alert-dot" aria-hidden="true"></span></div><div class="alert-title">Deprecated method in use.</div><div class="alert-body">Your codebase calls <code>client.legacyAuth()</code> which will be removed in v4.0. Migrate to <code>client.auth.verify()</code> before the next major release.</div><a href="#" class="alert-link">Migration guide</a></div>
<div class="alert" data-c="info"><div class="alert-row"><span class="alert-type">info</span><span class="alert-rule" aria-hidden="true"></span><span class="alert-dot" aria-hidden="true"></span></div><div class="alert-title">Read-only mode is active.</div><div class="alert-body">You are browsing a shared workspace snapshot. Changes you make will not be saved. Switch to your personal workspace to enable editing.</div><a href="#" class="alert-link">Switch workspace</a></div>
<div class="alert" data-c="purple"><div class="alert-row"><span class="alert-type">note</span><span class="alert-rule" aria-hidden="true"></span><span class="alert-dot" aria-hidden="true"></span></div><div class="alert-title">Experimental feature enabled.</div><div class="alert-body">You have opted into the <code>ai-suggest</code> beta. Behaviour may change without notice between releases.</div></div>
</div>
<div class="section-gap" aria-hidden="true"></div>
<div class="section-label">// Compact inline alerts</div>
<div class="card">
<div class="alert alert--compact" data-c="success"><span class="compact-type">ok</span><span class="compact-divider" aria-hidden="true"></span><span class="compact-text"><strong>2,048 records</strong> imported without errors.</span></div>
<div class="alert alert--compact" data-c="error"><span class="compact-type">fail</span><span class="compact-divider" aria-hidden="true"></span><span class="compact-text"><strong>Invalid token.</strong> Session has expired — please sign in again.</span></div>
<div class="alert alert--compact" data-c="warning"><span class="compact-type">warn</span><span class="compact-divider" aria-hidden="true"></span><span class="compact-text">You have <strong>3 unreviewed</strong> pull requests older than 14 days.</span></div>
<div class="alert alert--compact" data-c="info"><span class="compact-type">info</span><span class="compact-divider" aria-hidden="true"></span><span class="compact-text">Webhooks are replayed in <strong>FIFO order</strong> with exponential back-off.</span></div>
<div class="alert alert--compact" data-c="neutral"><span class="compact-type">note</span><span class="compact-divider" aria-hidden="true"></span><span class="compact-text">This endpoint is <strong>rate-limited</strong> to 120 requests per minute per API key.</span></div>
<div class="alert alert--compact" data-c="pink"><span class="compact-type">new</span><span class="compact-divider" aria-hidden="true"></span><span class="compact-text">Streaming responses now supported via <code>Accept: text/event-stream</code>.</span></div>
</div>
</section>/* ─── 09 Minimalist Border-Left Alert — Swiss documentation ──── */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,600;1,9..144,300&family=Geist+Mono:wght@300;400;500&display=swap');
.ba-bdl {
--ba-bdl-bg: #fafaf9;
--ba-bdl-surface: #ffffff;
--ba-bdl-ink: #111110;
--ba-bdl-muted: #6f6e6b;
--ba-bdl-faint: #e8e8e6;
--ba-bdl-c-success: #16a34a;
--ba-bdl-c-error: #dc2626;
--ba-bdl-c-warning: #ca8a04;
--ba-bdl-c-info: #2563eb;
--ba-bdl-c-neutral: #71717a;
--ba-bdl-c-purple: #7c3aed;
--ba-bdl-c-pink: #db2777;
--ba-bdl-border-width: 3px;
--ba-bdl-radius: 2px;
position: relative;
width: 100%;
min-height: 820px;
background: var(--ba-bdl-bg);
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 60px 24px;
gap: 2px;
font-family: 'Fraunces', serif;
box-sizing: border-box;
}
.ba-bdl *, .ba-bdl *::before, .ba-bdl *::after { box-sizing: border-box; margin: 0; padding: 0; }
.ba-bdl .section-label { font-family: 'Geist Mono', monospace; font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase; color: #ccc; align-self: flex-start; max-width: 600px; width: 100%; }
.ba-bdl .section-gap { height: 24px; width: 100%; max-width: 600px; }
.ba-bdl .card { width: 100%; max-width: 600px; border: 1px solid var(--ba-bdl-faint); border-radius: var(--ba-bdl-radius); overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.04); animation: ba-bdl-up 0.5s ease both; }
@keyframes ba-bdl-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.ba-bdl .alert { width: 100%; background: var(--ba-bdl-surface); padding: 16px 20px; position: relative; transition: background 0.18s; border-left: var(--ba-bdl-border-width) solid var(--ba-bdl-c-info); }
.ba-bdl .alert[data-c="success"] { border-left-color: var(--ba-bdl-c-success); --c: var(--ba-bdl-c-success); }
.ba-bdl .alert[data-c="error"] { border-left-color: var(--ba-bdl-c-error); --c: var(--ba-bdl-c-error); }
.ba-bdl .alert[data-c="warning"] { border-left-color: var(--ba-bdl-c-warning); --c: var(--ba-bdl-c-warning); }
.ba-bdl .alert[data-c="info"] { border-left-color: var(--ba-bdl-c-info); --c: var(--ba-bdl-c-info); }
.ba-bdl .alert[data-c="neutral"] { border-left-color: var(--ba-bdl-c-neutral); --c: var(--ba-bdl-c-neutral); }
.ba-bdl .alert[data-c="purple"] { border-left-color: var(--ba-bdl-c-purple); --c: var(--ba-bdl-c-purple); }
.ba-bdl .alert[data-c="pink"] { border-left-color: var(--ba-bdl-c-pink); --c: var(--ba-bdl-c-pink); }
.ba-bdl .alert + .alert { border-top: 1px solid var(--ba-bdl-faint); }
.ba-bdl .alert:hover { background: #fafafa; }
.ba-bdl .alert-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.ba-bdl .alert-type { font-family: 'Geist Mono', monospace; font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c); flex-shrink: 0; }
.ba-bdl .alert-rule { flex: 1; height: 1px; background: var(--c); opacity: 0.15; align-self: center; }
.ba-bdl .alert-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c); opacity: 0.5; align-self: center; flex-shrink: 0; }
.ba-bdl .alert-title { font-size: 17px; font-weight: 600; color: var(--ba-bdl-ink); line-height: 1.3; margin-bottom: 4px; letter-spacing: -0.01em; }
.ba-bdl .alert-body { font-size: 14px; font-weight: 300; color: var(--ba-bdl-muted); line-height: 1.75; font-style: italic; }
.ba-bdl .alert-body code { font-family: 'Geist Mono', monospace; font-size: 12px; font-style: normal; font-weight: 400; background: var(--ba-bdl-faint); padding: 1px 5px; border-radius: 3px; color: var(--ba-bdl-ink); }
.ba-bdl .alert-link { font-family: 'Geist Mono', monospace; font-size: 11px; font-weight: 500; color: var(--c); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.15s; margin-top: 10px; display: inline-block; letter-spacing: 0.04em; }
.ba-bdl .alert-link:hover { border-color: var(--c); }
.ba-bdl .alert-link::after { content: ' →'; }
.ba-bdl .alert--compact { padding: 11px 18px; display: flex; align-items: center; gap: 14px; }
.ba-bdl .alert--compact .compact-type { font-family: 'Geist Mono', monospace; font-size: 9.5px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c); flex-shrink: 0; white-space: nowrap; }
.ba-bdl .alert--compact .compact-text { font-size: 13.5px; font-weight: 300; color: var(--ba-bdl-muted); font-style: italic; line-height: 1.45; flex: 1; }
.ba-bdl .alert--compact .compact-text strong { font-style: normal; font-weight: 600; color: var(--ba-bdl-ink); }
.ba-bdl .alert--compact .compact-text code { font-family: 'Geist Mono', monospace; font-style: normal; font-size: 11px; background: var(--ba-bdl-faint); padding: 1px 4px; border-radius: 3px; }
.ba-bdl .compact-divider { width: 1px; height: 16px; background: var(--ba-bdl-faint); flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) { .ba-bdl .card { animation: none; } } /* ─── 09 Minimalist Border-Left Alert — Swiss documentation ──── */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,600;1,9..144,300&family=Geist+Mono:wght@300;400;500&display=swap');
.ba-bdl {
--ba-bdl-bg: #fafaf9;
--ba-bdl-surface: #ffffff;
--ba-bdl-ink: #111110;
--ba-bdl-muted: #6f6e6b;
--ba-bdl-faint: #e8e8e6;
--ba-bdl-c-success: #16a34a;
--ba-bdl-c-error: #dc2626;
--ba-bdl-c-warning: #ca8a04;
--ba-bdl-c-info: #2563eb;
--ba-bdl-c-neutral: #71717a;
--ba-bdl-c-purple: #7c3aed;
--ba-bdl-c-pink: #db2777;
--ba-bdl-border-width: 3px;
--ba-bdl-radius: 2px;
position: relative;
width: 100%;
min-height: 820px;
background: var(--ba-bdl-bg);
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 60px 24px;
gap: 2px;
font-family: 'Fraunces', serif;
box-sizing: border-box;
}
.ba-bdl *, .ba-bdl *::before, .ba-bdl *::after { box-sizing: border-box; margin: 0; padding: 0; }
.ba-bdl .section-label { font-family: 'Geist Mono', monospace; font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase; color: #ccc; align-self: flex-start; max-width: 600px; width: 100%; }
.ba-bdl .section-gap { height: 24px; width: 100%; max-width: 600px; }
.ba-bdl .card { width: 100%; max-width: 600px; border: 1px solid var(--ba-bdl-faint); border-radius: var(--ba-bdl-radius); overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.04); animation: ba-bdl-up 0.5s ease both; }
@keyframes ba-bdl-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.ba-bdl .alert { width: 100%; background: var(--ba-bdl-surface); padding: 16px 20px; position: relative; transition: background 0.18s; border-left: var(--ba-bdl-border-width) solid var(--ba-bdl-c-info); }
.ba-bdl .alert[data-c="success"] { border-left-color: var(--ba-bdl-c-success); --c: var(--ba-bdl-c-success); }
.ba-bdl .alert[data-c="error"] { border-left-color: var(--ba-bdl-c-error); --c: var(--ba-bdl-c-error); }
.ba-bdl .alert[data-c="warning"] { border-left-color: var(--ba-bdl-c-warning); --c: var(--ba-bdl-c-warning); }
.ba-bdl .alert[data-c="info"] { border-left-color: var(--ba-bdl-c-info); --c: var(--ba-bdl-c-info); }
.ba-bdl .alert[data-c="neutral"] { border-left-color: var(--ba-bdl-c-neutral); --c: var(--ba-bdl-c-neutral); }
.ba-bdl .alert[data-c="purple"] { border-left-color: var(--ba-bdl-c-purple); --c: var(--ba-bdl-c-purple); }
.ba-bdl .alert[data-c="pink"] { border-left-color: var(--ba-bdl-c-pink); --c: var(--ba-bdl-c-pink); }
.ba-bdl .alert + .alert { border-top: 1px solid var(--ba-bdl-faint); }
.ba-bdl .alert:hover { background: #fafafa; }
.ba-bdl .alert-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.ba-bdl .alert-type { font-family: 'Geist Mono', monospace; font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c); flex-shrink: 0; }
.ba-bdl .alert-rule { flex: 1; height: 1px; background: var(--c); opacity: 0.15; align-self: center; }
.ba-bdl .alert-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c); opacity: 0.5; align-self: center; flex-shrink: 0; }
.ba-bdl .alert-title { font-size: 17px; font-weight: 600; color: var(--ba-bdl-ink); line-height: 1.3; margin-bottom: 4px; letter-spacing: -0.01em; }
.ba-bdl .alert-body { font-size: 14px; font-weight: 300; color: var(--ba-bdl-muted); line-height: 1.75; font-style: italic; }
.ba-bdl .alert-body code { font-family: 'Geist Mono', monospace; font-size: 12px; font-style: normal; font-weight: 400; background: var(--ba-bdl-faint); padding: 1px 5px; border-radius: 3px; color: var(--ba-bdl-ink); }
.ba-bdl .alert-link { font-family: 'Geist Mono', monospace; font-size: 11px; font-weight: 500; color: var(--c); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.15s; margin-top: 10px; display: inline-block; letter-spacing: 0.04em; }
.ba-bdl .alert-link:hover { border-color: var(--c); }
.ba-bdl .alert-link::after { content: ' →'; }
.ba-bdl .alert--compact { padding: 11px 18px; display: flex; align-items: center; gap: 14px; }
.ba-bdl .alert--compact .compact-type { font-family: 'Geist Mono', monospace; font-size: 9.5px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c); flex-shrink: 0; white-space: nowrap; }
.ba-bdl .alert--compact .compact-text { font-size: 13.5px; font-weight: 300; color: var(--ba-bdl-muted); font-style: italic; line-height: 1.45; flex: 1; }
.ba-bdl .alert--compact .compact-text strong { font-style: normal; font-weight: 600; color: var(--ba-bdl-ink); }
.ba-bdl .alert--compact .compact-text code { font-family: 'Geist Mono', monospace; font-style: normal; font-size: 11px; background: var(--ba-bdl-faint); padding: 1px 4px; border-radius: 3px; }
.ba-bdl .compact-divider { width: 1px; height: 16px; background: var(--ba-bdl-faint); flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) { .ba-bdl .card { animation: none; } }More from CSS Banners & Alerts
Material Design Floating Alert CardCSS Text Wrap Banner with Long StringsDismissible 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 Updates
View the full collection →