Filters and a table

Most product screens are a list of something with a way to narrow it: publishers, offers, rules, reports. The page is one card that carries the list’s name and its actions, tabs when the list has views, a row of labelled filters ending in the black Search button, the table, and under it the page size, the range and the pager. MAFO’s Click Cap page is built this way.

Beta · Pattern · card.css · tabs.css · field.css · select.css and 6 more · in use on MAFO’s Click Cap page

Card · Tabs · Field · Select · Button · Table · Badge / Chip · Pagination · Empty · Alert / Banner

A list page — the card, the tabs, the filter row, the table and the footer

Composed from the markup blocks at the top of card.css, tabs.css, field.css, select.css, button.css, table.css and pagination.css, at a 1200 px page — scroll the frame sideways. The filter row's own layout — fields at space/8, the button level with the controls — is the page's; no component owns it yet. Every number is a placeholder.

Click cap rules

Per offer — every publisher’s clicks to it are capped.

Download CSVCreate click cap rule

By offerBy advertiserBy publisherBy offer by publisher

Block periodAny block period

Added byAny user

TUNE accountAny account

Search

Offer	Publisher	Block period	Click cap	Actions
Summer sale Mobile	Publisher 1	Daily	5 000	EditDelete
Cashback app Web	Publisher 2	Hourly	800	EditDelete
Q3 brand push Mobile	Publisher 3	Daily	12 000	EditDelete

Show101–10 of 640 rules

Previous123…64Next

What it is for

Use when more rows than fit — a report, a search result, an admin list — and the person needs to filter, page, sort, pick columns or select. Do not use when the rows fit on one screen with nothing to do to them (Table); the data is a chart’s (Chart recipes); each row is a card of its own (Card grid). The filter row is for a list that the person narrows before reading; a list that is read whole and acted on row by row is the Table alone, in a card, with no pager.

The components it is made of

One row per part: its job here, and when the part itself is the one to use. Its own page holds the rest — the markup, the modifiers, the measured rows.

Component	Its job in the arrangement	Use it when
Card	the page’s frame: its title, one line that follows the open tab, the page actions at the right	content needs its own edges — a feature on a slide, a dashboard panel, a stat, a form, a post preview
Tabs	the views of one list — line tabs, sentence case	one of several views must be open — sections of a page (line), or a two-to-four-way mode (segment)
Field	each filter is a labelled field, never a bare control with a placeholder for a label	any control that needs a visible label — one Field per control, stacked in a form with the form’s own gap
Select	a filter over a static list is a Select; a typed search is a Combobox	one option from a list too long to show as radios — about seven or more — or when space is tight
Button	the filter row ends in the black button; the page’s primary sits in the card header	the one action a view exists for — submit, save, create
Table	the product-size table: the accent-neutral bar, one divider per row and none under the last, actions in the last column	rows of records with the same fields — publishers, campaigns, offers, users; a SWOT or a quarter plan on a slide
Badge / Chip	a status or a category word in a cell — never a coloured cell	a status word on a KPI tile or a table row, a category tag on a card, a small count
Pagination	under the table, beside the page size and the range text	a table or a list is longer than one page and the person needs to know where they are
Empty	the one muted line a tab shows when its filters match nothing	a container that will hold things holds none yet, or a query returns nothing — say what belongs here and offer the way to put it there
Alert / Banner	a banner above the list that explains the rules of the thing listed	a message that must stay until the user acts or the state changes — a failed sync, a plan limit, a saved confirmation that should remain, a data warning above a table

The rules that hold between them

• The button at the end of a filter row is the black one. Beside inputs or selects (the end of a filter row, a form’s inline action) the button is the black one, never the outlined secondary — an outline next to outlined controls reads as one more control.
• The primary belongs to the page, not to the toolbar. Never: a page size without the range text · a toolbar with a primary button (the primary belongs to the page) · sort arrows on every header · a selected row with no count in the footer · numbered pills.
• A static list is a Select; a typed search is a Combobox. Select — one option from a list too long to show as radios — about seven or more — or when space is tight. Combobox — one choice from a list long enough to search — accounts, offers, people, countries — roughly twenty or more, or any list the user knows by name. When several may be chosen from a static list it is a multiple Select: several may be chosen (a multi-select Combobox is a later row).
• Each filter is a field with a label. Never: a placeholder standing in for the label · an asterisk for required · error text that repeats the label · a Field wider than its form column · two controls in one Field.
• The table: numbers right, words left, status in a Badge. Table — one anatomy in two sizes: a card on surface/card at radius/16 with elevation/card, an accent-dark header bar, row-header pills, 2 px dividers and no vertical lines; the Accent mode drives it (a neutral-800 bar and neutral-200 pills in multicolor — the grey SWOT). Status lives in a Badge, never in a cell’s colour.
• The bar on a dashboard’s table is the neutral one, and every divider is straight. A dashboard’s table bar is the neutral one, a table divider is straight from end to end, and a KPI tile is two blocks pushed apart.
• No divider under the last row. The last row of a Table has no divider.
• The actions come last, because the row is read before it is acted on. The row is read before it is acted on.
• The pager, its page size and its range text are one footer. One outlined page, never two; a disabled Previous stays visible.
• A page size without the range text is an anti-pattern. Never: numbered pills instead of buttons · a Previous that vanishes when disabled · a page-size Select without the range text · more than seven page buttons.
• What an empty tab says. One muted line — No click cap rules match these filters. (Loading rules… while the GET runs) — a table that vanishes reads as broken; Empty is a later component.
• Tabs are the views of one list. One of several views must be open — sections of a page (line), or a two-to-four-way mode (segment). two lists on one card · a list with nothing active · a segment with five options · tabs that scroll · a white box painted by hand on a product screen instead of the frame’s Ground mode.