A mosaic grid groups items in a visually compelling layout to show hierarchy, user signals, and user browsing behavior.
Mosaic grids react consistently and expectedly across all platforms.
Mosaic grids contain items that are recommended and personalized to the user.
Mosaics allow for a list of multiple complex items to be presented in a more consumable format.
Large screen
Small screen
Product-specific mosaic grids are used when we have advertising around a specific product. All tiles in the product-specific mosaic grid are item tiles, and all small tiles are related to the hero tile.
Category / theme mosaic grids are used to highlight a collection or items across adjacent categories. This could be things like "tailgating," "camping essentials," or "back to school."
In this usage, the hero tile and "See all" link take the user to an event or landing page.
Mosaic grids should lead with a hero tile. However, when mosaic grids are stacked one after another, the following hero image will switch to the ride side of the layout. This behavior is only for medium- and large-screen sizes.
Focusing on an item tile outlines the image with a focus indicator. TAB navigates through interactive elements within the tile. ENTER or SPACE activates nested elements or navigates to a detail page when the image is selected.
The price is one of the most important elements and is required for all tiles. The price is always bolded. The price container sits on top of the image or on its own line below the image.
When possible, use the hero tile to reflect a specific signal, such as a frequently searched item, recently viewed, or a strong product recommendation based on browsing behavior.
Items related to the hero should still be personalized and relevant to the user, but they may not have as strong a signal as the hero tile. For example, the items are related to something the user has searched for but not something they've seen before.
At small sizes, the hero item tile is always fixed to the top. Mosaic grids only display 5 item tiles total at small-screen sizes.
At medium and large sizes, the hero item tile is fixed to the left. Mosaic grids only display 7 item tiles at these sizes. The hero item can be fixed to the right only if two mosaic grids are stacked.
Do keep the content in mosaic grids specific to a product, category or theme.
Don’t mix items from unrelated categories or use broad queries for items in a mosaic grid. They should be focused on a specific theme.
Do keep mosaic modules fixed to the grid.
Don’t scroll mosaic grids off the viewport.
