Skip to content
UI Kit
Accent color

Categories and collections

The way into a catalog as tiles, cards and link columns, and the head of a collection page with filters, sort and view.

2 components · 10 variants
Switch category

categories

Categories

The way into a catalog. Shop departments, blog topics, service areas or a directory, as icon tiles, image cards, round thumbnails, link columns or big names on a photo.

Props and details · Categories

Icon grid

Eight departments in a hairline grid with counts and markers. A light follows the pointer, the icon takes the accent on hover, the tiles fill in one after another while scrolling.

Open in Studio

Image cards

Four image cards with name and count. The photo drifts inside its frame while scrolling and zooms on hover. Below desktop a swipe row with arrows, drag and a progress line.

Open in Studio

Circles

Round thumbnails in a row that scrolls with arrows, mouse drag and swipe, with a progress line below. A ring grows in on hover, the circles scale in one by one.

Open in Studio

Full background

Big names over a photo. Pointing at a row crossfades the photo to that category and a card shows its description. On phones the row in the middle of the screen picks the photo while you scroll.

Open in Studio

collection-header

Collection header

The top of a collection or category page. A title on a photo, text with read more and subcategories, tabs with a sticky bar for sort and view, a collection told like a magazine and the page of a maker.

Props and details · Collection header

Photo banner

The title on a wide photo that drifts while scrolling, with a shade from below that keeps it readable in both modes. Breadcrumbs above, count and a link on the photo, subcategory chips below that rise one after another and scroll on phones.

Open in Studio

Text and photo

Title, count and a short text beside a photo. "Read more" opens the long text with a soft height, made for people and search engines alike, and subcategories with thumbnails rise below and lift on hover.

Open in Studio

Tabs and sticky bar

Subcategories as tabs with an underline that slides and a title that follows the tab. Below, a bar with count, filters, sort and a grid or list switch sticks to the top while the products scroll and gets a soft shadow once it does.

Open in Studio

Editorial collection

A collection told like a magazine. A very large title, the intro and a link, a wide photo that grows into view and drifts, then facts in a hairline grid that rise one after another and a quote from the maker.

Open in Studio

Maker page

The page of a brand or maker in a marketplace. A cover that drifts, the mark overlapping it, name with a verified badge, place and year, follow with a count that rises, and the numbers of products, followers and rating.

Open in Studio

Similar components

More from E-Commerce, the same area of the kit.

Often combined with

Sections that usually sit next to Categories and collections on a page.

Often searched

Jump to

Copied to the clipboard