Skip to main content

🍐 Pea.rs Patterns

Common UI patterns with semantic HTML markup for consistent, accessible interfaces

Stats Pattern

Horizontal statistics display for metrics, counts, and key performance indicators

Centered Statistics

Variant: Centered
  • 99.9% Uptime
  • 2.5M Users
  • 150ms Response Time

Statistics Grid Cards

$124.5K Total Revenue
+12.5% from last month
8,492 Active Users
+8.2% from last month
2,847 Total Orders
-3.1% from last month
4.8 Avg Rating
+0.2 from last month

Product Statistics

1,234 Sold
4.8★ Rating
892 Reviews
24h Delivery

Slats Pattern

Vertical list items perfect for articles, blog posts, products, or any content with metadata

Basic Content Slats

  1. Getting Started with Amphibious 2.0

    Learn the fundamentals of our modern responsive framework. This comprehensive guide covers installation, basic setup, and your first responsive layout.

  2. Building Responsive Grid Layouts

    Master the 16-column grid system and create fluid, adaptive layouts that work beautifully across all devices.

Content Slats with Images

  1. Product thumbnail

    Premium Wireless Headphones

    Experience crystal-clear audio with active noise cancellation and 30-hour battery life. Perfect for music lovers and professionals.

    $199.99 • 4.8★ (234 reviews)
  2. Product thumbnail

    Smart Home Security Camera

    Keep your home safe with 4K video, night vision, and AI-powered motion detection. Easy setup and mobile app control.

    $149.99 • 4.6★ (892 reviews)
  3. Product thumbnail

    Ergonomic Office Chair

    Support your posture with adjustable lumbar support, breathable mesh, and smooth-rolling casters.

    $399.99 • 4.9★ (1,234 reviews)

Card Style Slats

Variant: Cards Grid

  • Sarah Johnson

    Lead Designer

    Specializes in user experience design and brand identity. 10+ years creating beautiful, functional interfaces.

    sarah@example.com

  • Michael Chen

    Senior Developer

    Full-stack developer with expertise in React, Node.js, and cloud architecture. Passionate about performance.

    michael@example.com

  • Emily Rodriguez

    Product Manager

    Drives product strategy and roadmap. Expert in agile methodologies and user research.

    emily@example.com

Customer Review Slats

  • John Doe
    ★★★★★

    Absolutely love this product! The quality exceeded my expectations and the customer service was outstanding. Would definitely recommend to anyone looking for a reliable solution.

  • Alice Smith
    ★★★★☆

    Great product overall. Easy to set up and works as advertised. Only minor issue was with the packaging, but the product itself is excellent.

Aside Pattern

Sidebar content layouts for supplementary information, navigation, or related content

Traditional Float-based Aside

About Amphibious

Amphibious is a modern CSS framework that elegantly scales from desktop to mobile devices. Built on a familiar 16-column grid system, it provides the flexibility and power needed for responsive web design while maintaining simplicity and ease of use.

The framework includes a comprehensive set of components, utilities, and patterns that help developers build beautiful, accessible websites quickly. With its focus on semantic HTML and modern CSS features, Amphibious ensures your sites are future-proof and performant.

Modern Grid-based Layout with Aside

Building Accessible Interfaces

Accessibility isn't just about compliance—it's about ensuring everyone can use your website effectively. By following WCAG guidelines and using semantic HTML, you create experiences that work for all users, regardless of their abilities or the devices they use.

Key Principles
  • Perceivable: Information must be presentable in ways users can perceive
  • Operable: Interface components must be operable by all users
  • Understandable: Information and UI operation must be understandable
  • Robust: Content must be robust enough for various assistive technologies
Best Practices

Start with semantic HTML as your foundation. Use heading elements to create a logical document structure. Provide text alternatives for non-text content. Ensure sufficient color contrast. Make all interactive elements keyboard accessible. Test with screen readers and other assistive technologies.

Product Page with Aside Info

Premium Wireless Headphones

4.8★ Rating
234 Reviews
1.2K Sold
Description

Experience audio like never before with our Premium Wireless Headphones. Featuring advanced noise cancellation technology, these headphones create an immersive listening experience whether you're commuting, working, or relaxing at home.

Key Features
  • Active Noise Cancellation (ANC) with ambient mode
  • 30-hour battery life with quick charge
  • Premium leather ear cushions for all-day comfort
  • Multi-device connectivity with seamless switching
  • Customizable EQ through companion app

The ergonomic design ensures comfort during extended listening sessions, while the foldable design makes them perfect for travel. With crystal-clear call quality and voice assistant integration, these headphones are perfect for both entertainment and productivity.

Combining Patterns

Real-world examples showing how to combine stats, slats, and aside patterns effectively

Dashboard Layout

Analytics Overview

  • $45.2K Revenue
  • 8,492 Users
  • 2,847 Orders
  • 98.5% Uptime
Recent Activity

  1. Order #12345 completed

    Customer: John Doe • Amount: $234.50

  2. New user registration

    Alice Smith joined from organic search

  3. Payment received

    Invoice #98765 • Amount: $1,250.00