Pattern Forge turns common UI problems into original build recipes.

Sticky Studio Rail

A compact header that changes background and spacing after the page crosses the hero section. Useful for landing pages, docs, and product marketing pages.

<header class="studio-rail" id="studioRail">
  <a href="#intro">Overview</a>
  <a href="#pricing">Pricing</a>
  <a href="#faq">FAQ</a>
</header>

.studio-rail {
  position: sticky;
  top: 0;
  display: flex;
  gap: 14px;
  padding: 18px 24px;
  backdrop-filter: blur(12px);
  transition: background .2s ease, padding .2s ease;
}
.studio-rail.is-compact {
  background: rgba(8, 20, 32, .82);
  padding: 12px 20px;
}

window.addEventListener('scroll', function () {
  studioRail.classList.toggle('is-compact', window.scrollY > 72);
});

Action Drawer

An overlay panel that slides in from the side and lists high-value actions: search, notifications, account shortcuts, or editing controls. Use it when navigation and actions need to coexist.

• Close on `Escape`
• Trap focus while open
• Dim the page behind it
• Respect reduced-motion users

Section Compass

A sidebar nav that highlights the current section while readers scroll. Ideal for tutorials, long guides, and references. You already use the baseline version on EduSmartUp tutorial pages.

Mega Shelf

A multi-column dropdown for categories, callouts, and quick links. Best for larger content hubs where a simple dropdown becomes too cramped.

Bento Launch Board

A mixed-size card grid that lets one hero tile dominate while support facts, quotes, and statistics fill smaller panels around it.

Pricing Ladder

A pricing section with a dominant middle tier, guaranteed comparison rows, and a compact mobile stacking strategy.

Story Rail Article

A two-column article with chapter indicators, callout notes, and in-flow media. Useful for long-form guides and case studies.

Testimonial Mosaic

A mixed-card quote wall that balances customer proof, avatar cards, star ratings, and measurable outcomes.

Split Welcome Login

A left panel for brand value and a right panel for the form. Use it for login, register, and password reset experiences.

<section class="auth-shell">
  <aside class="auth-story">
    <h2>Build faster with guided labs</h2>
    <p>Save projects, track progress, and reopen work anywhere.</p>
  </aside>
  <form class="auth-form">
    <label>Email<input type="email" required></label>
    <label>Password<input type="password" required></label>
    <button type="submit">Continue</button>
  </form>
</section>

Guide Rail Form

A long form with helper copy, inline validation, and section summaries pinned beside the inputs. Good for account setup, grant applications, and onboarding questionnaires.

Command Search Sheet

A keyboard-driven search surface that filters commands, routes, and entities. Useful in dashboards, CMS tools, and docs sites.

Review-Ready Checkout

A two-step checkout with shipping, payment, confirmation summary, coupon entry, and explicit error placement.

Captioned Gallery Track

A gallery with thumbnails, captions, progress position, and an optional full-screen stage. Useful for portfolios and product shots.

Toast Stack

Reusable temporary messages for success, warning, info, and failure states. Include a title, body, icon, and dismiss action.

Skeleton Gallery

A loading state that mimics the final card geometry to reduce layout shift while data arrives.

Focus Lightbox

A media overlay with keyboard navigation, previous/next controls, and locked background scroll.

Metrics Deck

A dashboard opening section that combines KPI cards, trend spark lines, filter pills, and a date-range switcher.

Kanban Board Lane

A drag-ready task layout with assignee chips, due date pills, and density modes for compact and expanded views.

Product Shelf Grid

A product list with filters, quick view, inline badges, price comparison, and review density summaries.

Invoice Review Sheet

A printable order or invoice panel with line items, totals, tax breakdown, signature area, and payment status ribbon.