---
title: Facepile 64px
order: 14
---

# Facepile (64px)

The largest standard variant of the [Facepile](./facepile) component using 64px avatars, designed for hero sections, featured team displays, and contexts where maximum visual impact and user recognition are essential.

## Overview

The 64px facepile provides the highest level of visual prominence and user recognition, making it ideal for hero sections, main landing pages, and showcase displays where the user collection serves as a primary visual element. This size is particularly effective for marketing contexts and executive presentations.

## Size Specifications

- **Avatar Size**: 64px circular avatars
- **Presence Size**: 18px presence indicators
- **Container Height**: ~72px (including presence overlap)
- **Spacing**: 1.118rem margins between avatars
- **Total Footprint**: Large, commanding visual presence

## Use Cases

### Hero and Landing Pages
- Main page hero sections with team showcases
- Landing page introductions
- Company overview displays
- Primary brand presentations

### Executive and Leadership
- C-suite executive presentations
- Board member displays
- Leadership team showcases
- Founder and key personnel highlights

### Marketing and Branding
- About page team sections
- Company culture displays
- Brand ambassador showcases
- Client and partner highlights

### Special Presentations
- Conference speaker lineups
- Award recipient displays
- Featured expert showcases
- Special recognition sections

## Data Structure

```json
{
    "items": [
        {
            "avatar": {
                "mugshot": "../../images/mug-shots/sam-rivera.jpg",
                "status": "online",
                "size": 64,
                "initials": "SR",
                "displayName": "Sam Rivera",
                "title": "Founder & CEO",
                "bio": "Visionary leader with 15+ years in tech innovation"
            },
            "size": 64
        },
        {
            "avatar": {
                "mugshot": "../../images/mug-shots/casey-wong.jpg",
                "status": "online",
                "size": 64,
                "initials": "CW",
                "displayName": "Casey Wong",
                "title": "Lead Architect",
                "bio": "Technical expert driving our platform architecture"
            },
            "size": 64
        }
    ]
}
```

## Visual Design

- **Maximum Impact**: Commanding visual presence and immediate recognition
- **Premium Quality**: High-resolution display suitable for professional contexts
- **Strong Branding**: Effective for brand building and team showcasing
- **Memorable Presentation**: Size ensures users are memorable and recognizable

## Device and Context Considerations

### Desktop and Large Screens
- **Ideal Context**: Perfect for desktop hero sections and large displays
- **Professional Presentations**: Excellent for boardroom and presentation contexts
- **Marketing Materials**: Suitable for high-impact marketing displays

### Responsive Considerations
- **Tablet**: Good for tablet interfaces in landscape, consider 48px for portrait
- **Mobile**: Recommend scaling down to 40px or 32px for mobile displays
- **Performance**: Monitor loading performance and consider progressive loading

## Performance Optimization

### Image Management
- **High Resolution**: 64×64px base images (recommend 128×128px for retina)
- **File Optimization**: Critical to optimize image files for web delivery
- **Loading Strategy**: Implement lazy loading and progressive enhancement
- **Caching**: Use effective caching strategies for frequently displayed users

### Memory and Performance
- **Resource Usage**: Monitor memory usage with large collections
- **DOM Complexity**: Consider virtualization for very large user sets
- **Animation Performance**: Ensure smooth transitions with larger elements

## Accessibility

### Exceptional Usability
- **Superior Touch Targets**: 64px avatars provide excellent touch accessibility
- **High Visibility**: Maximum visibility for users with visual impairments
- **Clear Recognition**: Size enables clear facial recognition and identification
- **Strong Presence Indicators**: Large presence indicators are highly visible

### React Executive Display
For React applications, use the `@n8d/htwoo-react` package which provides facepile and avatar components with the same design system styling. Facepile components are available in Storybook for interactive examples and documentation.

### Marketing Landing Page

## Best Practices

### When to Use 64px
- **Hero Sections**: Main landing page introductions and showcases
- **Executive Displays**: Leadership teams and key personnel
- **Brand Building**: When team representation is central to brand identity
- **Special Recognition**: Awards, achievements, and featured expert displays

### Design Guidelines
- **Limit Quantity**: Use sparingly - typically 3-8 avatars maximum
- **Quality Images**: Ensure high-quality, professional avatar images
- **Strategic Placement**: Reserve for primary focal points and important contexts
- **Performance Planning**: Implement optimization strategies for loading and performance

### Content Strategy
- **Curated Selection**: Choose the most important and recognizable team members
- **Professional Context**: Ensure appropriate for formal and professional settings
- **Brand Alignment**: Align with overall brand strategy and messaging
- **Update Strategy**: Plan for regular updates to maintain current representation

## Related

- **[Facepile - Main Documentation](./facepile)**: Complete implementation guide
- **[All Facepile Variants](./)**: Size comparison and selection guide
- **[Avatar with Presence](../molecules/avatar-with-presence/)**: Core component details
- **[Facepile 48px](./facepile~48)**: Smaller prominent alternative
- **[Facepile 40px](./facepile~40)**: Standard alternative