Catalog page
A page of things to browse, with a filter column beside featured items and grids of cards.
A catalog page lays out things to browse, such as add-ons or products: a filter column with a search, categories and checkboxes, beside a featured block and grids of cards. Use CatalogPage when people pick from many items by kind.
The parts
The filter column
filtersholds aSearchField,CatalogPage.Categories, a list of links to each category, and aCatalogPage.Groupfor each set of checkboxes, then an action.The featured block
CatalogPage.Featuredis the catalog's featured block: its title and its items on a tinted surface.Sections
CatalogPage.Sectionis a titled section of items, such as one category's.Items
CatalogPage.Itemis one thing in the catalog, a plainCatalog.Card: its tile, its name as a link, what it is, its offer and its tags.
The filter column sits beside the catalog from 900px of the page's column in a shell at least 1100px wide, and above it otherwise. The featured block and each section show their items two to a row from 560px of room.
Other catalogs
CatalogPage is one arrangement of Catalog's parts. For a shop's product grid, a gallery of templates or an app's add-ons, use Catalog on its own: a toolbar with a search, filters, a sort and a grid or list toggle, over cards in a grid, a list or rows. CatalogPage.Item takes the card's variant, mediaPosition and size for a look other than its plain one.
CatalogPage
When to use it
Use it for
- Add-ons, integrations, templates or perks someone browses and picks from
- A catalog with categories and a few filters, each item leading to its own page
Not for
- Records someone works through, such as orders: use AppPage with a DataTable and a FilterBar
- A handful of links: use SettingsIndex
Examples
Add on catalog
A catalog whose search and checkbox filter narrow its grid, with a count of what's left.
Add-ons
3 add-ons
All add-ons
Categories
Categories that switch the section shown, the current one marked.
Add-ons
Shipping
Variants and states
Add-ons
The filter column sits beside the catalog from 900px of column, and above it below that.
Add-ons
Tools that work with the roastery.
Featured
Props
CatalogPage
| Prop | Type | Default | Description |
|---|---|---|---|
titlerequired | string | The catalog's title, its h1. | |
breadcrumbs | ReactNode | The trail of pages above it, a Breadcrumbs. | |
description | ReactNode | One line under the title saying what's in the catalog. | |
actions | ReactNode | Actions at the end of the title's row: PageHeader.Actions. | |
filters | ReactNode | The filter column at the start: a SearchField, CatalogPage.Categories, CatalogPage.Groups of checkboxes and an action. | |
filtersLabel | string | "Filters" | Names the filter column's landmark. Defaults to "Filters". |
asideLabel | string | "Details" | Names the right rail's landmark, such as "Customer details". Defaults to "Details". |
fill | boolean | false | Gives the page's last block the rest of the height, so a table scrolls inside it with its header
sticky while the header and filters stay put; the table's pagination then keeps floating lanes above
it. Defaults to false. |
footer | ReactNode | A small footer that ends the page under a hairline, such as a feedback link and the keyboard
shortcuts, in body-sm and text-secondary. |
It also takes Omit<ComponentPropsWithRef<"main">, "title">.
CatalogPage.Categories
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | "Categories" | The list's heading, an h2 in title-sm, which names its navigation. Defaults to "Categories". |
categoriesrequired | readonly CatalogCategory[] | The categories, in order. | |
current | string | The href of the category shown, marked current and drawn in primary. | |
onNavigate | ((href: string, event: MouseEvent<HTMLAnchorElement>) => void) | Runs as a link is followed, where a router can take over. A click that opens the page elsewhere, in a new tab or window, is left to the browser. |
It also takes Omit<ComponentPropsWithRef<"nav">, "title" | "children">.
CatalogPage.Group
| Prop | Type | Default | Description |
|---|---|---|---|
titlerequired | string | The group's heading, an h2 in title-sm, which names it. | |
children | ReactNode | What's in it, 8 apart, such as Checkboxes. |
It also takes Omit<ComponentPropsWithRef<"section">, "title">.
CatalogPage.Item
| Prop | Type | Default | Description |
|---|---|---|---|
titlerequired | string | The item's name, a link in primary to its page. | |
hrefrequired | string | The item's page, such as a DetailPage. | |
description | string | What it is, in body-sm, wrapping. | |
note | string | A line about its offer, such as "First month free", in italic text-secondary. | |
media | ReactNode | Its picture or tile at the start, 48px, such as an InitialsTile. | |
tags | ReactNode | Its TagChips, under the rest. | |
variant | "elevated" | "outline" | "soft" | "plain" | "plain" | How it draws its surface, as a Catalog.Card does. Defaults to "plain". |
mediaPosition | "top" | "start" | "background" | "start" | Where its media sits, as on a Catalog.Card. Defaults to "start". |
onNavigate | ((href: string, event: MouseEvent<HTMLAnchorElement>) => void) | Runs as its link is followed, where a router can take over. A click that opens the page elsewhere, in a new tab or window, is left to the browser. | |
mediaRatio | number | 4 / 3 | The media's width ÷ height at the top, or the whole card's with the media behind it, such as 1 for a square. Defaults to 4 / 3 at the top and 3 / 4 behind. |
eyebrow | ReactNode | A short line over the title, such as where it's from or what kind it is, in caption. | |
badges | ReactNode | Small marks at the end of the eyebrow's line, such as a StatusBadge or TagChips. | |
meta | ReactNode | One line under the title, such as what it tastes of or who made it, in body-sm. | |
price | ReactNode | What it costs, at the start of its foot, in tabular figures. | |
actions | ReactNode | What can be done with it, at the end of its foot, such as an Add button. | |
size | "sm" | "md" | "lg" | "md" | "sm": 12 of padding, a 40px start tile and a label title. "md" (the default): 16, 48px and label.
"lg": 20, 64px and title-md. |
It also takes Omit<MotionElementProps<"article">, "title">.
CatalogPage.Section
| Prop | Type | Default | Description |
|---|---|---|---|
titlerequired | string | The block's heading, an h2 in title-md, which names it. | |
children | ReactNode | Its CatalogPage.Items, two columns from 560px of room. |
It also takes Omit<ComponentPropsWithRef<"section">, "title">.
CatalogPage.Featured
| Prop | Type | Default | Description |
|---|---|---|---|
titlerequired | string | The block's heading, an h2 in title-md, which names it. | |
children | ReactNode | Its CatalogPage.Items, two columns from 560px of room. |
It also takes Omit<ComponentPropsWithRef<"section">, "title">.
CatalogCategory
One category in `CatalogPage.Categories`.
| Field | Type | Default | Description |
|---|---|---|---|
labelrequired | string | Its name, such as "Shipping". | |
hrefrequired | string | Where its link goes. |
Accessibility
The page's main landmark, its title the h1. The filter column is a complementary landmark named by filtersLabel; the categories are a navigation named by their h2, the shown one marked aria-current="page". The featured block and each section are regions named by their h2s; each item is an article whose title is a link at least 24px tall.
| Keys | What they do |
|---|---|
| Enter | Follows the focused category or item's title |
Motion
It doesn't move.
With reduced motion: Nothing changes.
Layout
It's an AppPage, at most 1280px wide (--bt-w-app-page). Its 220px filter column sits beside the catalog, 32 apart, from 900px of column in a shell at least 1100 wide, and above it otherwise; the items go two to a row from 560px of room, their text wraps, and every category and item title is a link at least 24px tall.
Related
Related
- FilterBar
A row of filter pills over a list that wrap as they're applied, with Clear filters and actions, folding into one button on a phone.
- Detail page
A page about one thing, with its main column and an aside holding its one primary action.