Filterable list pages
Filterable list page types are used to house searchable lists of articles, documents, or other resources and publications.
Most filterable list pages use the browse page template layout, though in rare cases they can be housed on a sublanding page template layout. The filterable list itself is composed of post preview components that link to individual document detail pages.
This page is under active development. Information is being moved into it from this page:
- http://cfpb.github.io/design-manual/global-elements/filterable-list-pages.html
Use cases
WHEN TO USE
- When asking users to look through more than 20 articles, documents, or resources.
- Additional content may be included before or after the filterable list, but it is not encouraged. The filterable list should be the focus of the page.
Content guidelines
- Text introduction and/or full width text should be used to introduce the documents that are being filtered.
- If any of the filtering labels are technical or require further explanation (such as categories), a full width text element can be placed above the filter control panel to provide further explanation.
- Required elements: filter control panel, list of items (displayed as post preview items) and pagination.
Behavior
Responsive behavior follows the pattern of the base page types (sublanding page or browse page).
Sublanding page with filterable list
Breakpoints 901 pixels or more
Breakpoints 900 pixels or less
Browse page with Filterable List
Breakpoints 901 pixels or more
Breakpoints 900 pixels or less
Related Items
- Hero
- Text introduction
- Featured content module
- Full-width text
- Filter control panel
- Post preview of document detail
- Pagination
- Sidebar breakout
- Sidebar
- Email sign-up