Result Page

Full-page result feedback for success, error, warning, and info states — with icon, message, and CTA actions.

css vanilla-js

Targets: JS HTML

Code

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Inter, system-ui, sans-serif;
  background: #050910;
  color: #f2f6ff;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.demo {
  width: 100%;
  max-width: 560px;
  text-align: center;
}
.demo-title {
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 0.375rem;
}
.demo-sub {
  color: #475569;
  font-size: 0.875rem;
  margin-bottom: 2rem;
}

/* ── Tabs ── */
.tabs {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.75rem;
  padding: 0.25rem;
  gap: 0.25rem;
  margin-bottom: 2rem;
}
.tab {
  padding: 0.4375rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  border: none;
  background: none;
  color: #64748b;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  font-family: inherit;
}
.tab.is-active {
  background: rgba(255, 255, 255, 0.1);
  color: #f2f6ff;
}
.tab:hover:not(.is-active) {
  color: #94a3b8;
}

/* ── Panel ── */
.result-panel {
  display: none;
}
.result-panel.is-active {
  display: block;
}

/* ── Result card ── */
.result {
  background: #0d1320;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1.5rem;
  padding: 2.5rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  animation: resultIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes resultIn {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ── Icon ring ── */
.result-icon-ring {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  position: relative;
}
.result-icon-ring::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid transparent;
  animation: ringPulse 2s ease infinite;
}
@keyframes ringPulse {
  0%,
  100% {
    opacity: 0.2;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.05);
  }
}

.result-icon-ring--success {
  background: rgba(52, 211, 153, 0.15);
  color: #34d399;
}
.result-icon-ring--success::before {
  border-color: #34d399;
}
.result-icon-ring--error {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}
.result-icon-ring--error::before {
  border-color: #ef4444;
}
.result-icon-ring--warning {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}
.result-icon-ring--warning::before {
  border-color: #f59e0b;
}

.result-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Badge ── */
.result-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 0.875rem;
}
.result-badge--success {
  background: rgba(52, 211, 153, 0.15);
  color: #34d399;
}
.result-badge--error {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}
.result-badge--warning {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

/* ── Text ── */
.result-heading {
  font-size: 1.375rem;
  font-weight: 800;
  color: #f2f6ff;
  margin-bottom: 0.625rem;
}
.result-body {
  font-size: 0.875rem;
  color: #64748b;
  line-height: 1.65;
  margin-bottom: 1.5rem;
  max-width: 34ch;
}
.result-body strong {
  color: #94a3b8;
}

/* ── Meta strip ── */
.result-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 0.75rem;
  padding: 0.875rem 1.25rem;
  margin-bottom: 1.75rem;
  width: 100%;
  justify-content: center;
}
.meta-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
}
.meta-label {
  font-size: 0.6875rem;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.meta-value {
  font-size: 0.875rem;
  font-weight: 600;
  color: #f2f6ff;
}
.meta-sep {
  width: 1px;
  height: 28px;
  background: rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

/* ── Actions ── */
.result-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.625rem 1.25rem;
  border-radius: 0.625rem;
  font-size: 0.875rem;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s;
  font-family: inherit;
}
.btn--success {
  background: #34d399;
  color: #042f20;
}
.btn--success:hover {
  background: #6ee7b7;
}
.btn--error {
  background: #ef4444;
  color: #fff;
}
.btn--error:hover {
  background: #f87171;
}
.btn--warning {
  background: #f59e0b;
  color: #0f172a;
}
.btn--warning:hover {
  background: #fbbf24;
}
.btn--ghost {
  background: rgba(255, 255, 255, 0.06);
  color: #94a3b8;
  border-color: rgba(255, 255, 255, 0.1);
}
.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #f2f6ff;
}

(() => {
  const tabs = document.querySelectorAll(".tab");
  const panels = document.querySelectorAll(".result-panel");

  function activate(targetPanel) {
    tabs.forEach((t) => {
      const isTarget = t.dataset.panel === targetPanel;
      t.classList.toggle("is-active", isTarget);
      t.setAttribute("aria-selected", String(isTarget));
    });
    panels.forEach((p) => {
      const isTarget = p.id === targetPanel;
      p.classList.toggle("is-active", isTarget);
      p.hidden = !isTarget;
      // Re-trigger animation
      if (isTarget) {
        const card = p.querySelector(".result");
        if (card) {
          card.style.animation = "none";
          card.offsetHeight;
          card.style.animation = "";
        }
      }
    });
  }

  tabs.forEach((tab) => {
    tab.addEventListener("click", () => activate(tab.dataset.panel));
  });
})();

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Result Page</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="demo">
    <h1 class="demo-title">Result Page</h1>
    <p class="demo-sub">Full-page feedback for success, error, and warning states.</p>

    <!-- Tab strip -->
    <div class="tabs" role="tablist" aria-label="Result states">
      <button class="tab is-active" role="tab" aria-selected="true" aria-controls="panel-success" data-panel="panel-success">Success</button>
      <button class="tab" role="tab" aria-selected="false" aria-controls="panel-error" data-panel="panel-error">Error</button>
      <button class="tab" role="tab" aria-selected="false" aria-controls="panel-warning" data-panel="panel-warning">Warning</button>
    </div>

    <!-- Success -->
    <div class="result-panel is-active" id="panel-success" role="tabpanel">
      <div class="result result--success">
        <div class="result-icon-ring result-icon-ring--success" aria-hidden="true">
          <div class="result-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
          </div>
        </div>
        <div class="result-badge result-badge--success">Order Confirmed</div>
        <h2 class="result-heading">Payment Successful</h2>
        <p class="result-body">Your order <strong>#ORD-20483</strong> has been placed and is being prepared. You'll receive a confirmation email shortly.</p>
        <div class="result-meta">
          <span class="meta-item"><span class="meta-label">Amount</span><span class="meta-value">$149.00</span></span>
          <span class="meta-sep"></span>
          <span class="meta-item"><span class="meta-label">Estimated delivery</span><span class="meta-value">Mar 5 – 7</span></span>
        </div>
        <div class="result-actions">
          <button class="btn btn--success">Track Order</button>
          <button class="btn btn--ghost">Back to Home</button>
        </div>
      </div>
    </div>

    <!-- Error -->
    <div class="result-panel" id="panel-error" role="tabpanel" hidden>
      <div class="result result--error">
        <div class="result-icon-ring result-icon-ring--error" aria-hidden="true">
          <div class="result-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
          </div>
        </div>
        <div class="result-badge result-badge--error">Payment Failed</div>
        <h2 class="result-heading">Transaction Declined</h2>
        <p class="result-body">Your payment could not be processed. Your card was declined — please check your card details or try a different payment method.</p>
        <div class="result-meta">
          <span class="meta-item"><span class="meta-label">Error code</span><span class="meta-value">ERR_CARD_DECLINED</span></span>
          <span class="meta-sep"></span>
          <span class="meta-item"><span class="meta-label">Attempted</span><span class="meta-value">Visa •••• 4242</span></span>
        </div>
        <div class="result-actions">
          <button class="btn btn--error">Try Again</button>
          <button class="btn btn--ghost">Contact Support</button>
        </div>
      </div>
    </div>

    <!-- Warning -->
    <div class="result-panel" id="panel-warning" role="tabpanel" hidden>
      <div class="result result--warning">
        <div class="result-icon-ring result-icon-ring--warning" aria-hidden="true">
          <div class="result-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="2" width="14" height="20" rx="2"/><line x1="12" y1="7" x2="12" y2="13"/><circle cx="12" cy="17" r="0.5" fill="currentColor"/></svg>
          </div>
        </div>
        <div class="result-badge result-badge--warning">Action Required</div>
        <h2 class="result-heading">Account Suspended</h2>
        <p class="result-body">Your account has been temporarily suspended due to unusual activity. Verify your identity to restore full access.</p>
        <div class="result-meta">
          <span class="meta-item"><span class="meta-label">Suspended since</span><span class="meta-value">Mar 1, 2026</span></span>
          <span class="meta-sep"></span>
          <span class="meta-item"><span class="meta-label">Access level</span><span class="meta-value">Read-only</span></span>
        </div>
        <div class="result-actions">
          <button class="btn btn--warning">Verify Identity</button>
          <button class="btn btn--ghost">Learn More</button>
        </div>
      </div>
    </div>

  </div>

  <script src="script.js"></script>
</body>
</html>

Result Page

Full-screen feedback pages shown after an operation completes — payment success, submission error, account warning, etc. Each state has a distinct color, icon, and set of actions.

States

Success — order placed, payment processed, form submitted
Error — payment failed, server error, action could not complete
Warning — account suspended, rate limited, action requires attention

Features

Toggle between states with a tab strip (no page reload)
Color-coded icons and accent lines per state
Primary + secondary CTA buttons
Subtle animated icon entrance with CSS @keyframes
Purely CSS-driven — tabs use radio inputs for zero-JS toggling (JS tab strip in demo for better UX)

When to use

Use result pages for full-screen, post-action feedback — not inline error messages. They signal that a meaningful flow step has completed and give the user a clear next action.