CSS Banners & Alerts 03 / 14

Semantic Bootstrap-style Alerts CSS

Five semantic Bootstrap-style CSS alerts (Success, Danger, Warning, Info, Notice) in an organic botanical / art nouveau aesthetic — warm parchment backgrounds, Cormorant Garamond serif headlines, and earthy pigment palettes (sage, ember, amber, slate, neutral).

Best forcontent sites, settings pages, status confirmations, editorial admin UIs.

Pure CSS MIT licensed
Live Demo Open in tab
Open in playground

The code

<section class="ba-bts" aria-label="Semantic Bootstrap-style alerts demo">
  <p class="ornament">— Status Indicators —</p>

  <div class="alert alert--success" role="alert">
    <div class="alert-inner">
      <div class="alert-flora">
        <div class="alert-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg></div>
      </div>
      <div class="alert-content">
        <div class="alert-status">Success</div>
        <div class="alert-title">Payment processed successfully.</div>
        <div class="alert-body-text">Your subscription has been activated. A receipt has been sent to your registered email address. Changes take effect immediately.</div>
        <div class="alert-actions">
          <button class="btn-primary" type="button">View Receipt</button>
          <button class="btn-ghost" type="button">Dismiss</button>
        </div>
      </div>
    </div>
  </div>

  <div class="alert alert--danger" role="alert">
    <div class="alert-inner">
      <div class="alert-flora">
        <div class="alert-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg></div>
      </div>
      <div class="alert-content">
        <div class="alert-status">Error</div>
        <div class="alert-title">Unable to save your changes.</div>
        <div class="alert-body-text">A conflict was detected with an existing record. Please refresh the page and try again. If this persists, contact our support team with error code <strong>ERR_409</strong>.</div>
        <div class="alert-actions">
          <button class="btn-primary" type="button">Try Again</button>
          <button class="btn-ghost" type="button">Contact Support</button>
        </div>
      </div>
    </div>
  </div>

  <div class="alert alert--warning" role="alert">
    <div class="alert-inner">
      <div class="alert-flora">
        <div class="alert-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg></div>
      </div>
      <div class="alert-content">
        <div class="alert-status">Warning</div>
        <div class="alert-title">Your storage is at 87% capacity.</div>
        <div class="alert-body-text">You are approaching your plan limit. Automatic uploads may pause if usage exceeds 95%. Consider upgrading your plan or removing unused files to avoid disruption.</div>
        <div class="alert-actions">
          <button class="btn-primary" type="button">Upgrade Plan</button>
          <button class="btn-ghost" type="button">Manage Storage</button>
        </div>
      </div>
    </div>
  </div>

  <div class="alert alert--info" role="alert">
    <div class="alert-inner">
      <div class="alert-flora">
        <div class="alert-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg></div>
      </div>
      <div class="alert-content">
        <div class="alert-status">Information</div>
        <div class="alert-title">A new version is available — v4.2.0.</div>
        <div class="alert-body-text">This release includes performance improvements, 3 new API endpoints, and resolved a known issue with date parsing in multi-timezone environments.</div>
        <div class="alert-actions">
          <button class="btn-primary" type="button">View Changelog</button>
          <button class="btn-ghost" type="button">Update Later</button>
        </div>
      </div>
    </div>
  </div>

  <div class="alert alert--neutral" role="alert">
    <div class="alert-inner">
      <div class="alert-flora">
        <div class="alert-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="8" y1="12" x2="16" y2="12"/></svg></div>
      </div>
      <div class="alert-content">
        <div class="alert-status">Notice</div>
        <div class="alert-title">This environment is read-only.</div>
        <div class="alert-body-text">You are currently viewing a staging snapshot. Any edits made here will not be persisted. Switch to the production environment to save changes.</div>
        <div class="alert-actions">
          <button class="btn-primary" type="button">Switch to Production</button>
          <button class="btn-ghost" type="button">Learn More</button>
        </div>
      </div>
    </div>
  </div>
</section>
/* ─── 03 Semantic Bootstrap-style Alerts — botanical ─────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400;1,600&family=Instrument+Sans:wght@400;500;600&display=swap');

.ba-bts {
  --ba-bts-sage-bg: #f0f4ef; --ba-bts-sage-border: #7aad6d; --ba-bts-sage-text: #2d5a27; --ba-bts-sage-icon: #4e9040; --ba-bts-sage-fill: #e6f0e4;
  --ba-bts-ember-bg: #fdf3ef; --ba-bts-ember-border: #d4704a; --ba-bts-ember-text: #7a2a10; --ba-bts-ember-icon: #c05530; --ba-bts-ember-fill: #fce8e1;
  --ba-bts-amber-bg: #fdf8ec; --ba-bts-amber-border: #c8982a; --ba-bts-amber-text: #6b4a00; --ba-bts-amber-icon: #b88020; --ba-bts-amber-fill: #faf0d0;
  --ba-bts-slate-bg: #eff3f8; --ba-bts-slate-border: #5b88c0; --ba-bts-slate-text: #1a3a60; --ba-bts-slate-icon: #3d6fa0; --ba-bts-slate-fill: #e2eaf5;
  --ba-bts-neutral-bg: #f7f5f2; --ba-bts-neutral-border: #9b9288; --ba-bts-neutral-text: #3d3830; --ba-bts-neutral-icon: #7a7068; --ba-bts-neutral-fill: #eeebe7;
  --ba-bts-page-bg: #faf8f4;

  position: relative;
  width: 100%;
  min-height: 720px;
  background: var(--ba-bts-page-bg);
  background-image: radial-gradient(circle at 15% 50%, rgba(122,173,109,0.07) 0%, transparent 50%), radial-gradient(circle at 85% 20%, rgba(91,136,192,0.07) 0%, transparent 40%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  gap: 14px;
  font-family: 'Instrument Sans', sans-serif;
  box-sizing: border-box;
}
.ba-bts *, .ba-bts *::before, .ba-bts *::after { box-sizing: border-box; margin: 0; padding: 0; }

.ba-bts .alert { width: 100%; max-width: 640px; border-radius: 3px; position: relative; overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; animation: ba-bts-rise 0.5s ease both; }
.ba-bts .alert:nth-child(1) { animation-delay: 0.05s; } .ba-bts .alert:nth-child(2) { animation-delay: 0.12s; } .ba-bts .alert:nth-child(3) { animation-delay: 0.19s; } .ba-bts .alert:nth-child(4) { animation-delay: 0.26s; } .ba-bts .alert:nth-child(5) { animation-delay: 0.33s; }
.ba-bts .alert:hover { transform: translateY(-1px); box-shadow: 0 6px 28px rgba(0,0,0,0.07); }
@keyframes ba-bts-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.ba-bts .alert-inner { display: flex; gap: 0; position: relative; }
.ba-bts .alert-flora { width: 56px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; position: relative; padding: 20px 0; }
.ba-bts .alert-flora::after { content: ''; position: absolute; right: 0; top: 16px; bottom: 16px; width: 1px; background: currentColor; opacity: 0.2; }
.ba-bts .alert-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,0.6); border: 1.5px solid currentColor; flex-shrink: 0; }
.ba-bts .alert-icon svg { width: 16px; height: 16px; }
.ba-bts .alert-content { flex: 1; padding: 18px 20px 18px 16px; }
.ba-bts .alert-status { font-size: 9px; font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase; margin-bottom: 5px; opacity: 0.7; display: flex; align-items: center; gap: 8px; }
.ba-bts .alert-status::after { content: ''; flex: 1; height: 1px; background: currentColor; opacity: 0.2; max-width: 40px; }
.ba-bts .alert-title { font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 600; line-height: 1.25; margin-bottom: 5px; }
.ba-bts .alert-body-text { font-size: 13px; line-height: 1.7; opacity: 0.75; max-width: 480px; }
.ba-bts .alert-actions { display: flex; gap: 10px; margin-top: 12px; align-items: center; }
.ba-bts .btn-primary { font-family: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 14px; border: 1.5px solid currentColor; background: transparent; cursor: pointer; border-radius: 2px; transition: all 0.2s; }
.ba-bts .btn-ghost { font-family: inherit; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; padding: 0; border: none; background: transparent; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; opacity: 0.55; transition: opacity 0.2s; }
.ba-bts .btn-ghost:hover { opacity: 1; }

.ba-bts .alert--success { background: var(--ba-bts-sage-bg); border: 1.5px solid var(--ba-bts-sage-border); border-left: 4px solid var(--ba-bts-sage-border); color: var(--ba-bts-sage-text); }
.ba-bts .alert--success .alert-flora { background: var(--ba-bts-sage-fill); color: var(--ba-bts-sage-icon); }
.ba-bts .alert--success .alert-icon { color: var(--ba-bts-sage-icon); border-color: var(--ba-bts-sage-icon); }
.ba-bts .alert--success .btn-primary { color: var(--ba-bts-sage-text); border-color: var(--ba-bts-sage-border); }
.ba-bts .alert--success .btn-primary:hover { background: var(--ba-bts-sage-border); color: white; }
.ba-bts .alert--success .btn-ghost { color: var(--ba-bts-sage-text); }

.ba-bts .alert--danger { background: var(--ba-bts-ember-bg); border: 1.5px solid var(--ba-bts-ember-border); border-left: 4px solid var(--ba-bts-ember-border); color: var(--ba-bts-ember-text); }
.ba-bts .alert--danger .alert-flora { background: var(--ba-bts-ember-fill); color: var(--ba-bts-ember-icon); }
.ba-bts .alert--danger .alert-icon { color: var(--ba-bts-ember-icon); border-color: var(--ba-bts-ember-icon); }
.ba-bts .alert--danger .btn-primary { color: var(--ba-bts-ember-text); border-color: var(--ba-bts-ember-border); }
.ba-bts .alert--danger .btn-primary:hover { background: var(--ba-bts-ember-border); color: white; }
.ba-bts .alert--danger .btn-ghost { color: var(--ba-bts-ember-text); }

.ba-bts .alert--warning { background: var(--ba-bts-amber-bg); border: 1.5px solid var(--ba-bts-amber-border); border-left: 4px solid var(--ba-bts-amber-border); color: var(--ba-bts-amber-text); }
.ba-bts .alert--warning .alert-flora { background: var(--ba-bts-amber-fill); color: var(--ba-bts-amber-icon); }
.ba-bts .alert--warning .alert-icon { color: var(--ba-bts-amber-icon); border-color: var(--ba-bts-amber-icon); }
.ba-bts .alert--warning .btn-primary { color: var(--ba-bts-amber-text); border-color: var(--ba-bts-amber-border); }
.ba-bts .alert--warning .btn-primary:hover { background: var(--ba-bts-amber-border); color: white; }
.ba-bts .alert--warning .btn-ghost { color: var(--ba-bts-amber-text); }

.ba-bts .alert--info { background: var(--ba-bts-slate-bg); border: 1.5px solid var(--ba-bts-slate-border); border-left: 4px solid var(--ba-bts-slate-border); color: var(--ba-bts-slate-text); }
.ba-bts .alert--info .alert-flora { background: var(--ba-bts-slate-fill); color: var(--ba-bts-slate-icon); }
.ba-bts .alert--info .alert-icon { color: var(--ba-bts-slate-icon); border-color: var(--ba-bts-slate-icon); }
.ba-bts .alert--info .btn-primary { color: var(--ba-bts-slate-text); border-color: var(--ba-bts-slate-border); }
.ba-bts .alert--info .btn-primary:hover { background: var(--ba-bts-slate-border); color: white; }
.ba-bts .alert--info .btn-ghost { color: var(--ba-bts-slate-text); }

.ba-bts .alert--neutral { background: var(--ba-bts-neutral-bg); border: 1.5px solid var(--ba-bts-neutral-border); border-left: 4px solid var(--ba-bts-neutral-border); color: var(--ba-bts-neutral-text); }
.ba-bts .alert--neutral .alert-flora { background: var(--ba-bts-neutral-fill); color: var(--ba-bts-neutral-icon); }
.ba-bts .alert--neutral .alert-icon { color: var(--ba-bts-neutral-icon); border-color: var(--ba-bts-neutral-icon); }
.ba-bts .alert--neutral .btn-primary { color: var(--ba-bts-neutral-text); border-color: var(--ba-bts-neutral-border); }
.ba-bts .alert--neutral .btn-primary:hover { background: var(--ba-bts-neutral-border); color: white; }
.ba-bts .alert--neutral .btn-ghost { color: var(--ba-bts-neutral-text); }

.ba-bts .ornament { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 12px; color: #bbb; text-align: center; letter-spacing: 0.1em; }

@media (prefers-reduced-motion: reduce) { .ba-bts .alert { animation: none; } }

More from CSS Banners & Alerts

CSS Pulsing Banner for Live UpdatesMinimalist Border Left CSS AlertResponsive Full Width Hero Banner CSSMaterial 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 Alert
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →