---
name: Collection Screen
description: Design recommendations for collection screens displaying lists, tables, and grid layouts of items
---

# Collection Screen Design Guidance

When designing collection screens, consider the data density, content type, and user interaction needs. Choose the appropriate variation based on the amount of information per item, the total number of items, and the primary use case.

## Collection Variations

### Default List Collection (Balanced Data Density)

The default list collection prioritizes easy scanning and quick recognition with just the right information per item.

1. **Balanced Data Density**: Display only essential information (2-3 key fields per item, e.g., name, status, date). Use concise text that can be scanned quickly. Appropriate for small to medium datasets (dozens to hundreds of items).

2. **Visual Separation**: Make items easy to distinguish with clear dividers or spacing, alternating row colors (zebra striping) for better readability, and adequate padding within each item.

3. **Quick Recognition Elements**: Help users identify items at a glance with icons or avatars for visual identification, color coding for status or categories, small thumbnails when relevant, and badges or tags for quick categorization.

4. **Layout Structure**: Use a single-column list layout. Align content consistently (left-align text, right-align dates/numbers). Make entire rows clickable/tappable for navigation.

5. **Content Truncation**: Limit each list item to exactly two lines of text content total. The first line should contain the primary identifier (title/name) and any critical status indicators. The second line should contain secondary information (description, metadata, or additional context). Combine related metadata on the same line (e.g., "Department · Location" or "Job Title · Location"). Use text truncation with ellipsis to maintain consistent row heights and visual rhythm. Do not exceed two lines of text content per item.

6. **Navigation Indicator**: Include a chevron right icon to the right of each list item to indicate that items are clickable and navigate to detail views. Position the chevron consistently and use subtle styling that doesn't compete with the content.

7. **Item Actions**: Provide quick actions without cluttering. Show primary action on hover or as a button, use icon buttons for secondary actions, and include context menus for additional options.

### Dense DataTable Collection (High Data Density)

The dense DataTable collection maximizes information display for comparison and analysis of large datasets.

1. **High Data Density**: Display multiple columns of information (5-10+ columns per row). Use compact typography while maintaining readability. Appropriate for large datasets (hundreds to thousands of items).

2. **Sortable Columns**: Enable easy data organization with clickable column headers, sort indicators (arrows), and support for multi-column sorting when appropriate.

3. **Pagination or Virtual Scrolling**: Handle large datasets efficiently with pagination (page size options: 10, 25, 50, 100) or virtual scrolling. Show total count and current range (e.g., "Showing 1-25 of 1,234").

4. **Column Customization**: Allow users to control what they see with column visibility toggles, column reordering, and show/hide columns based on screen size.

5. **Responsive Considerations**: Hide less critical columns on mobile, use horizontal scrolling for tables on mobile (with sticky first column), or transform to card-based layout on mobile.

6. **Comparison Features**: Support data comparison with row selection for side-by-side comparison, summary rows or totals when relevant, and export functionality for analysis.

### Grid/Gallery Collection (Image-Focused)

The grid/gallery collection emphasizes visual content with card-based layouts, ideal for images, products, or media.

**For card usage patterns:** Call `read_skill` with `card-design` for comprehensive guidance on product cards, clickable cards, and grid layouts.

1. **Card-Based Layout**: Use cards to display items. Emphasize images as the primary visual element, use consistent card sizing within the grid, and make cards clickable/tappable for navigation (use `href` prop on Card for clickable cards - see card-design skill).

2. **Card Density Variations**: Choose appropriate information density:
   - **Minimal**: Show only image and title. Appropriate for browsing large collections, focus on visual scanning.
   - **Detailed**: Include image, title, description, and key metadata. Show multiple fields (price, status, date, etc.). Appropriate when users need more context.

3. **Responsive Grid Columns**: Adapt to screen size (Mobile: 1-2 columns, Tablet: 2-3 columns, Desktop: 3-4 columns or more for minimal density). Maintain consistent spacing between cards (`gap-4`).

4. **Image Display**: Use consistent aspect ratios (square, 16:9, 4:3), ensure images load efficiently with lazy loading and placeholders, and handle missing images gracefully.

5. **Information Placement**: Choose where to display metadata:
   - **Overlay**: Place text over images (with semi-transparent backgrounds). Use for minimal card density. Ensure text remains readable.
   - **Below Image**: Place all text below the image. Use for detailed card density. Easier to read and scan.

6. **Grid Interactions**: Include hover effects (lift, zoom, overlay), show quick actions on hover, and enable lightbox or modal view for images.

## Common Guidelines

1. **Item Counts**: Do not add counts above or below lists unless explicitly specified by the user. Only display item counts when they are requested or when they provide meaningful context (e.g., "Showing 1-25 of 1,234" in pagination).

2. **Search and Filtering**: Include a prominent search bar at the top. Provide filter controls (dropdowns, checkboxes, toggles) that show active filters with ability to remove them. Support multiple filter combinations and persist filter state when appropriate.

3. **Empty States**: Handle empty collection states with helpful messages explaining why there are no items, actions to add items or adjust filters, and appropriate illustrations or icons.

4. **Loading States**: Show skeleton screens that match the final layout. Display items as they load (progressive enhancement) and handle slow network conditions gracefully.

5. **Selection Modes**: Support single and multi-selection. For multi-selection, show "Select all" option, display count of selected items, and provide bulk actions (delete, archive, move, tag) in an action bar.

6. **State Persistence**: Remember user preferences by saving sort order, filter selections, and column visibility. Restore state when returning to collection.

7. **Visual Consistency**: Maintain consistent spacing, styling, and information placement across all items to create a cohesive collection experience.