Example Product

This is an example product page showcasing our styling system. Notice the custom font, gradient title, centered layout, and theme-aware colors that automatically adapt to light and dark modes.

Feature Grid Demo

Responsive Cards

The feature-grid automatically adjusts columns based on screen size using CSS Grid.

Theme Tokens

Cards use --pp-card and --pp-border tokens for consistent theming.

Auto Layout

Minimum 220px width per card, grows to fill available space evenly.

Side-by-Side Layout

This demonstrates the .sbs class with sbs-reverse modifier. The image appears on the right on desktop, left on mobile. Notice how the layout gracefully adapts.

Custom accent colors and brand buttons show how to layer your brand on top of the theme system.

Watch Demo

Video Integration

Videos use the .video-wrap and .video-inner classes for consistent framing. This example shows autoplay, loop, and muted attributes for smooth user experience.

The video container automatically adapts to different screen sizes while maintaining aspect ratio.

Layout Flexibility

This section shows another .sbs layout with sbs-reverse. Images and content automatically reflow on mobile while maintaining visual hierarchy.

Brand buttons use custom gradient backgrounds and hover effects. Try switching between light and dark themes to see the colors adapt.

External Link Demo

Styling Reference: This example demonstrates feature-grid, sbs layouts, custom brand colors, video integration, and theme tokens. Copy any section and adapt the colors, fonts, and content for your own product pages.

Easify 3