Blocks · Products

Products

Product-list and collection patterns for commerce composition. Cosmic + flare hero patterns, classic category lists, and restaurant menu variants.

Cosmic patterns

Tilt Grid

prod-cosmic-1

Product card grid with pointer-tilt parallax.

Open block

Hero Feature

prod-cosmic-2

Feature-product spotlight with secondary grid.

Open block

Carousel

prod-cosmic-3

Cosmic-styled product carousel with snap-scroll.

Open block

Comparison Strip

prod-cosmic-4

Side-by-side comparison strip of competing variants.

Open block

Immersive Overlay

prod-cosmic-5

Full-bleed product hero with overlay copy.

Open block

Variant Orbit

prod-cosmic-6

Variants orbit a central focal product image.

Open block

Flare patterns

3D Rotate

prod-flare-3d-rotate

Cards with 3D rotateY on hover.

Open block

Color Swatch Tint

prod-flare-color-swatch-tint

Swatch hover tints the entire card surface.

Open block

Feature Rail

prod-flare-feature-rail

Horizontal rail of feature-product cards.

Open block

List Grid

prod-flare-list-grid

Toggle between list view and grid view.

Open block

Spec Compare

prod-flare-spec-compare

Side-by-side spec table comparing multiple SKUs.

Open block

Variant Grid

prod-flare-variant-grid

Variants surfaced as a colored grid per product.

Open block

Category lists

Category list 1

category-list-1

Classic category index — variant 1.

Open block

Category list 2

category-list-2

Classic category index — variant 2.

Open block

Category list 3

category-list-3

Classic category index — variant 3.

Open block

Category list 4

category-list-4

Classic category index — variant 4.

Open block

Category list 5

category-list-5

Classic category index — variant 5.

Open block

Category list 6

category-list-6

Classic category index — variant 6.

Open block

Category list 7

category-list-7

Classic category index — variant 7.

Open block

Category list 8

category-list-8

Classic category index — variant 8.

Open block

Category list 9

category-list-9

Classic category index — variant 9.

Open block

Category list 10

category-list-10

Classic category index — variant 10.

Open block

Restaurant menus

Restaurant menu 1

restaurant-menu-1

Restaurant menu layout — variant 1.

Open block

Restaurant menu 2

restaurant-menu-2

Restaurant menu layout — variant 2.

Open block

Restaurant menu 3

restaurant-menu-3

Restaurant menu layout — variant 3.

Open block

Restaurant menu 4

restaurant-menu-4

Restaurant menu layout — variant 4.

Open block