Vanilla Breeze

Patterns

Complete UI patterns built with semantic HTML and Vanilla Breeze. Each pattern demonstrates best practices for accessibility, progressive enhancement, and responsive design.

Patterns are complete UI compositions that combine multiple Vanilla Breeze elements. Unlike snippets (isolated building blocks), patterns show how elements work together in real-world layouts. Copy the HTML directly or use them as reference for your own implementations.

Navigation

Navigation patterns for headers, sidebars, breadcrumbs, and pagination.

Navbar

Header navigation with dropdowns, search, and mobile menu.

Breadcrumb

Hierarchical navigation showing the current location.

Pagination

Page navigation for multi-page content.

Sidebar

Vertical navigation for documentation and dashboards.

Footer

Site footer with links, copyright, and newsletter signup.

Forms

Form layouts for authentication, registration, and data entry.

Sign In

Login forms with social auth, two-factor, and remember me.

Registration

Sign up forms with password requirements and terms.

Contact

Contact forms with validation and success states.

Checkout

Payment forms with shipping and billing sections.

Wizard

Multi-step forms with progress indicators.

Marketing

Landing page sections for showcasing products and features.

Hero

Above-the-fold sections with headlines and CTAs.

Features

Feature grids with icons, titles, and descriptions.

Call to Action

Conversion-focused sections with buttons.

Pricing

Pricing tables and comparison grids.

Testimonials

Customer quotes and social proof.

FAQ

Frequently asked questions with accordions.

Application

Layouts for web applications, dashboards, and admin interfaces.

App Shells

Header, sidebar, and content area layouts.

Dashboard

Stats cards, tables, and chart layouts.

Settings

Settings pages with grouped options.

Profile

User profile with avatar and activity.

Feedback

States and pages for user feedback and system status.

Empty States

No content placeholders with actions.

Error Pages

404, 500, and maintenance pages.

Skeleton

Loading placeholders for content.

Data Display

Patterns for presenting structured data and metrics.

Stats

Metric cards with numbers and change indicators.

Description List

Key-value pairs for metadata display.

Timeline

Chronological event displays.

Using Patterns

Each pattern page includes:

  • Live demos: Interactive previews in browser windows
  • Source code: Copy-ready HTML with semantic structure
  • Variants: Multiple versions for different use cases
  • Configuration: Available data attributes and classes

Patterns follow these conventions:

  • Semantic HTML: Use appropriate elements (nav, form, section)
  • Layout elements: Use layout-* custom elements for spacing and positioning
  • Design tokens: Use --size-* for spacing, --color-* for colors
  • Progressive enhancement: Core functionality works without JavaScript
↑