Components

Browsing the catalogue

A browser is a whole catalogue page in one component. A carousel is a shelf of it for somewhere else.

A beats page with a gold Tracks Browser starts here callout pointing to the Genre filter, followed by filters for Mood, Type Beats, Collaborator, Key, Price and BPM, a sort row, search, suggested tags and a list of beats with prices.
One component. The Tracks Browser draws the dropdowns, the sort row, the search, the suggested tags and the list — and keeps them aligned with each other.

Tracks Browser

Browse

Your beats, with everything needed to narrow them down. It can draw rows or cards, and it is the only catalogue that can, which is why it is the only one with a layout toggle.

Set Layout per breakpoint — Desktop or Mobile. If you have a fixed nav, set Nav Offset to its height so the bar sticks below it.

Kits Browser

Browse

Sample packs and kits, as a grid. The same page shape with a shorter filter set.

A sample packs page with a gold Kits Browser starts here callout pointing to the shorter filter row with Type, Collaborator and Price, followed by sort controls, suggested tags and a grid of four kit covers.
The Kits Browser: the shorter filter set kits actually have — Type, Collaborator, Price — and a grid instead of rows.

Services Browser

Browse

Mixing, mastering, custom work — the same again for services.

Browse

A shelf of tracks, kits or services for a home page or the foot of a detail page. Pick the type in its panel.

A carousel shows what its own panel says. It never follows a filter bar elsewhere on the page.

On a phone

A beats page on a phone: the filter dropdowns are gone and a gold Mobile filters callout points to the outlined floating Filters button at the bottom.
The same page with Layout set to Mobile. The dropdowns are gone and a floating Filters button takes their place.

Choosing what a list shows

Which filters appear, what a page opens already narrowed to, and where a list draws from are the same three questions for every browser and carousel. They have their own pages:

Filters — every key and what it accepts

Sorting — the orders a list can take

Sources — where a list draws from

PreviousOn every pageNextDetail pages