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