Uniform

We use uniform grids to showcase a defined number of items for easy comparison.

Considerations

Specific

Whether it's user-curated or activity-based suggestions, items in uniform grids are closely related and generally share the same category.

Comparative

Uniform grids are organized so that all images are the same size and data like title and price are aligned so they can be compared easily.

Concise

Uniform grids are meant to contain a specific, curated set of items and are not meant to be scrolled endlessly.

Anatomy

Section title
Subtitle
Row
See more button
Column
Action link
Item tile

Properties

Section title

Section titles are required on uniform grids. They anchor the item tiles on the page and give context as to why the user is seeing them. Subtitles on section titles are optional and only used when additional detail is required.

Item title and price

Titles can be used in uniform grids to give additional information that may be critical for comparing similar items.

Price only

The minimum amount of information used in a uniform grid is price only. Strikethrough price will appear on the right when applicable.

“See more” button

You can add a "See more" button below the default number of rows in a uniform grid to load additional items in place. Once tapped, the button loads a specific number of rows below those shown by default, which pushes the content below the uniform grid down.

After the max number of new items have loaded, the button text changes to "See all," which takes users to the primary destination page. This page should be the same page as the "See all" link in the header, if there is one.

If the uniform grid module appears at the bottom of a page, scrolling will load more items, but no button is necessary. Users can scroll continuously and keep loading content until no more items are available.

Behavior

Number of items

The number of columns in the grid changes responsively based on the width of the screen and its margins. The item width will grow and shrink to fill the column space. As you scale across breakpoints, be sure to follow the specific column guide for each grid size.

Text wrapping

On screens smaller than 540px wide, titles wrap up to 3 lines and then truncate with an ellipses. On screens larger than 540px wide, titles wrap up to 2 lines and then truncate with an ellipses.

Keyboard interaction

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.