List and card components provide alternative ways to display data that are more visual and flexible than tables. While tables excel at displaying structured, text-heavy data, list and card components shine when you need custom layouts, images, or mobile-friendly displays. Understanding when and how to use these components expands your design toolkit significantly.

In this lesson, you'll learn when to use list vs card vs table components, how to configure both list and card components, customize layouts, display images and files, implement filtering and searching, combine components effectively, apply best practices for visual displays, and optimize for mobile devices.

Use tables when:

• Structured Data - Column-based information
• Text-Heavy - Lots of text fields
• Scanning - Users need to scan many records quickly
• Comparing - Side-by-side comparison important
• Sorting/Filtering - Heavy sorting and filtering needs
• Desktop First - Primarily desktop users
• Examples: Customer lists, order management, inventory, data tables

Use lists when:

• Mobile-Friendly - Better than tables on small screens
• Custom Layout - Need more than simple columns
• Vertical Scanning - One item at a time focus
• Rich Content - Include icons, badges, multiple text lines
• Activity Feeds - Chronological or activity-based data
• Flexible Design - Want control over item appearance
• Examples: News feeds, notifications, messages, activity logs, mobile apps

Use cards when:

• Visual Content - Images are primary focus
• Product Catalogs - E-commerce or portfolio displays
• Grid Layout - Multiple items per row desired
• Rich Media - Combination of images, text, badges
• Visual Browsing - Users scan by appearance, not details
• Equal Importance - All items equally prominent
• Examples: Product catalogs, property listings, team directories, portfolios, galleries

Quick decision tree:

• Is image the focus? → Card Component
• Mobile-first design? → List Component
• Text-heavy structured data? → Table Component
• Need custom layout with text? → List Component
• E-commerce or portfolio? → Card Component
• Need sorting by many columns? → Table Component

To create a list component:

1. Open Page Builder
2. Click "+ Add Component"
3. Select "List" from Data Components
4. Choose data source (table)
5. Configure list settings
6. Design list item template
7. Save component

Initial list configuration:

• Data Source - Which table to display
• Component Name - Internal identifier
• Display Name - Title above list
• Records Per Page - How many items to show
• Default Sort - Initial sort field and direction
• Enable Search - Show search box
• Enable Filters - Show filter options

Design how each item appears:

Layout Components

• Primary Text - Main heading/title
• Secondary Text - Subtitle or description
• Tertiary Text - Additional details
• Image/Icon - Visual element
• Badge - Status indicator
• Action Buttons - Per-item actions

Layout Styles

• Default - Image left, text right
• Image Top - Image above text
• Icon Left - Small icon, multiple text lines
• Custom - Build your own layout

Choose which fields to display:

Primary Field

• Main text displayed prominently
• Typically name, title, or subject
• Larger font, bold
• Most important information

Secondary Field

• Supporting information
• Subtitle or description
• Smaller font
• Provides context

Detail Fields

• Additional information below main text
• Can show multiple fields
• Badges, dates, status
• Compact presentation

Image Field

• Select image or file field
• Configure image size
• Thumbnail vs full size
• Fallback if no image

Add actions to list items:

• Click Item - Navigate to details page
• Action Buttons - Edit, delete, view icons
• Swipe Actions - Swipe to reveal actions (mobile)
• Long Press - Hold for action menu
• Dropdown Menu - Three-dot menu with options

Organize items into groups:

• Group by Field - Status, category, date
• Group Headers - Show group name
• Collapsible Groups - Expand/collapse
• Group Counts - Number of items per group

Example: Group tasks by status (To Do, In Progress, Done) or group messages by date (Today, Yesterday, This Week).

Customize list appearance:

• Item Spacing - Padding between items
• Borders - Lines between items
• Background - Alternating colors
• Hover Effects - Highlight on hover
• Click Effects - Visual feedback
• Font Styles - Size, weight, color

Add search to lists:

• Search Box - Above or within list
• Search Fields - Which fields to search
• Real-Time Search - Updates as typing
• Search Placeholder - "Search items..."
• Clear Search - X button to clear

Filter list items:

• Filter Buttons - Quick filters above list
• Dropdown Filters - Select from options
• Advanced Filters - Multi-field filtering
• Saved Filters - Pre-configured filters
• Active Filter Display - Show which filter active

Sort list items:

• Sort Dropdown - Select sort field
• Sort Direction - Ascending/descending toggle
• Default Sort - Initial sort order
• Multiple Sort - Sort by multiple fields

Control how items are loaded:

Standard Pagination

• Load X items per page
• Show page numbers
• Previous/Next buttons
• Good for desktop

Infinite Scroll

• Load more as user scrolls
• No pagination buttons
• Seamless experience
• Great for mobile

Load More Button

• Show initial items
• "Load More" button at bottom
• User controls loading
• Good compromise

To create a card component:

1. Open Page Builder
2. Click "+ Add Component"
3. Select "Card" from Data Components
4. Choose data source (table)
5. Configure card settings
6. Design card template
7. Save component

Initial card configuration:

• Data Source - Which table to display
• Component Name - Internal identifier
• Display Name - Title above cards
• Cards Per Row - 2, 3, 4, or custom
• Records Per Page - How many cards to show
• Default Sort - Initial sort field

Design card appearance:

Card Structure

• Image Area - Top of card, prominent image
• Content Area - Below image, text content
• Footer Area - Bottom of card, actions/meta

Image Settings

• Image Field - Which field to display
• Image Size - Height and width
• Image Fit - Cover, contain, fill
• Aspect Ratio - Square, 16:9, 4:3, custom
• Fallback Image - Default if no image

Content Fields

• Title - Main heading (large, bold)
• Subtitle - Secondary text
• Description - Body text (can truncate)
• Badges - Status, category indicators
• Price - Prominent price display
• Rating - Star ratings

Control card grid layout:

Responsive Grid

• Desktop - 4 cards per row
• Tablet - 2-3 cards per row
• Mobile - 1-2 cards per row
• Automatic - Adjusts to screen size

Card Spacing

• Gap - Space between cards
• Padding - Space inside cards
• Margins - Space around grid

Card Dimensions

• Fixed Height - All cards same height
• Auto Height - Cards grow with content
• Min/Max Height - Constrain card size

Add actions to cards:

• Click Card - Navigate to details
• Action Buttons - View, Edit, Delete icons
• Hover Overlay - Actions appear on hover
• Button Bar - Buttons in card footer
• Icon Actions - Heart, share, bookmark

Customize card appearance:

• Border - Style, color, width
• Shadow - Box shadow for depth
• Border Radius - Rounded corners
• Background - Card background color
• Hover Effects - Shadow increase, scale up
• Typography - Font styles for title, text

Using images effectively:

• File Field - Upload images via file field
• Image URL - Link to external images
• Connected Images - Images from connected records
• Fallback - Default image if none provided

Optimize for performance:

• Thumbnail Size - Use thumbnails in lists/cards
• Lazy Loading - Load images as needed
• Compression - Optimize file size
• Responsive Images - Different sizes for different screens
• CDN - Serve from content delivery network

Control how images display:

• Object Fit - Cover (fill space), Contain (fit within)
• Aspect Ratio - Maintain proportions
• Crop - Center, top, bottom
• Placeholder - Show while loading
• Click to Enlarge - Open lightbox/modal

Add search to cards:

• Search Box - Above card grid
• Search Fields - Title, description, tags
• Visual Feedback - Matching cards highlighted
• No Results - Show helpful message

Filter displayed cards:

• Category Filter - Filter by category/type
• Price Range - Min/max price sliders
• Rating Filter - Show only 4+ stars
• Multi-Select Filters - Choose multiple criteria
• Active Filters Display - Show applied filters

Sort cards:

• Sort Dropdown - Newest, Price Low-High, Popularity
• Default Sort - How cards appear initially
• Multi-Criteria Sort - Secondary sort fields

Let users choose view:

• Toggle Button - Switch between list and card view
• Same Data - Both views show same records
• Remember Preference - Save user's choice
• Different Use Cases - List for details, cards for browsing

Combine different components:

• Cards for Featured - Top items in cards
• List for Rest - Remaining items in list
• Different Sections - Products in cards, orders in table
• Context-Specific - Different views for different purposes

Working with images:

• Consistent Sizes - All images same dimensions
• High Quality - Sharp, clear images
• Appropriate File Size - Balance quality and performance
• Alt Text - Descriptions for accessibility
• Fallback Images - Always provide defaults
• Lazy Load - Don't load all images at once

Organizing content:

• Consistent Spacing - Uniform gaps and padding
• Visual Hierarchy - Important info prominent
• Readable Text - Adequate font size and contrast
• White Space - Don't cram too much in
• Alignment - Keep elements aligned
• Responsive - Looks good on all screens

Displaying information:

• Concise Text - Keep descriptions short
• Truncate Long Text - "..." for overflow
• Important Info First - Title and key details
• Visual Indicators - Badges for status
• Clear Actions - Obvious what user can do

Keeping it fast:

• Limit Initial Load - Start with 12-20 items
• Lazy Load Images - Load as user scrolls
• Optimize Images - Compress and resize
• Pagination - Don't load thousands at once
• Cache - Cache images and data

Adapt to mobile screens:

• Single Column - Lists stack vertically
• 1-2 Cards - Per row on mobile
• Larger Touch Targets - Buttons easy to tap
• Swipe Gestures - Swipe actions on list items
• Simplified Layout - Less info, more focus

Enhance mobile experience:

• Pull to Refresh - Refresh data by pulling down
• Infinite Scroll - Better than pagination on mobile
• Sticky Headers - Group headers stay visible
• Bottom Navigation - Actions at bottom
• Quick Actions - Swipe left/right for actions

Always test on mobile:

• Test on real devices, not just browser
• Check different screen sizes
• Test touch interactions
• Verify image loading
• Check performance on slower connections

E-commerce display:

• Product Image - Large, prominent
• Product Name - Clear title
• Price - Prominent, formatted
• Rating - Star rating
• Stock Status - In stock badge
• Add to Cart - Button or icon
• Quick View - Preview on hover

Real estate display:

• Property Photo - Main image
• Price - Large, bold
• Address - Location
• Specs - Beds, baths, sqft
• Badges - New listing, open house
• View Details - Link to full listing

Activity stream:

• User Avatar - Small circular image
• Action Text - "John commented on..."
• Timestamp - "5 minutes ago"
• Content Preview - First line of content
• Click to Expand - See full details

Employee listing:

• Profile Photo - Headshot
• Name - Full name
• Job Title - Role
• Department - Team
• Contact - Email, phone icons
• Social Links - LinkedIn, Twitter

Article listing:

• Thumbnail Image - Article image
• Headline - Article title
• Summary - First paragraph
• Date - Publication date
• Category Badge - News, Sports, Tech
• Read More - Link to article

Solutions:

• Verify image field selected correctly
• Check image file uploaded
• Verify file permissions
• Check image URL if using external images
• Set fallback image
• Check browser console for errors

Solutions:

• Check card per row settings
• Verify responsive settings
• Adjust card spacing and padding
• Test on different screen sizes
• Check for CSS conflicts

Solutions:

• Enable lazy loading for images
• Reduce initial records loaded
• Optimize image sizes
• Use pagination or infinite scroll
• Enable caching

Solutions:

• Check field mapping in component settings
• Verify field has data
• Check field permissions
• Ensure field visible in template

In this lesson, you've learned:

• Component Selection - When to use table vs list vs card
• List Configuration - Layout, fields, actions, grouping
• Card Configuration - Grid layout, images, styling
• Image Display - Optimization and best practices
• Filtering & Searching - Finding specific items
• Mobile Optimization - Responsive design
• Best Practices - Visual displays that work
• Common Patterns - Real-world examples

Before moving on, ensure you can:

• Choose appropriate component for your use case
• Configure list component with custom layout
• Configure card component with images
• Implement filtering and searching
• Display images effectively
• Optimize for mobile devices
• Apply visual design best practices
• Create common display patterns

You've completed all component deep dives! Now you'll wrap up Phase 2 with a comprehensive summary and final project.

Hands-On Exercise (To Be Added)

Create a product catalog with both list and card views:

• Create Products table with image, name, price, description, category
• Build card component with 3 cards per row
• Display product images prominently
• Show product name, price, rating
• Add "View Details" button
• Build alternative list component
• Add view switcher (toggle list/card)
• Implement category filter
• Add search functionality
• Test on mobile devices
• Optimize image loading

Knowledge Check (To Be Added)

Quiz will test:

• Choosing between table, list, and card components
• Configuring list item layouts
• Setting up card grids
• Image display best practices
• Mobile optimization strategies
• Filtering and searching implementation
• Visual design principles