Listing Page
Page template for displaying lists of items. Listing pages provide a consistent way to view and interact with collections of data.
Purpose
Listing pages display collections of items in a structured format, allowing users to browse and interact with the data. They typically include:
- A page header with title and primary actions
- A data table displaying the items
- Row selection for bulk actions
- Item actions for individual items
When to use
- When displaying collections of similar items (e.g., membership types, discounts, benefits)
- When users need to perform actions on individual or multiple items
- When providing an overview of a data set with links to detailed views
Best Practices
Layout
- Keep the page header consistent across all listing pages
- Place primary actions in a consistent location (typically top-right)
- Use consistent spacing and alignment for all elements
- Ensure the data display is the focal point of the page
Content
- Use clear, descriptive page titles
- Include a brief description of the page purpose when helpful
- Display the most important data columns by default
- Make item names clickable to navigate to detail pages
- Use icons for common actions like edit and delete
Interaction
- Provide clear feedback for user actions
- Make row selection obvious and consistent
- Show contextual bulk actions only when items are selected
- Position delete actions before edit actions for consistency
- Group related bulk actions together (e.g., Archive and Clone)
Accessibility
Listing pages should follow these accessibility guidelines:
- Use proper heading hierarchy (h1 for page title, h2 for sections)
- Ensure all interactive elements are keyboard accessible
- Provide sufficient color contrast for all text and UI elements
- Include appropriate ARIA attributes for interactive elements
- Add descriptive screen reader text for icon-only buttons
- Provide clear focus indicators for keyboard navigation