@n8d/htwoo-patterns/_patterns/molecules/persona/_persona.md

hTWOo Patterns to setup custom style guide

---
title: Persona Components
order: 1
---

# Persona Components

The persona component collection in HTWOO provides flexible user representation elements for displaying user information with avatars, presence indicators, and associated metadata. These components are essential for creating user-centric interfaces in Microsoft 365 and SharePoint applications.

## Component Overview

- **Persona**: Primary user representation component with avatar, presence, and user details
- **Persona Overflow**: Counter component showing additional user count when space is limited

## Key Features

- **Multiple Sizes**: Support for 24px, 32px, 40px, 48px, 72px, and 96px variants
- **Avatar Integration**: Incorporates avatar and presence indicators from atomic components
- **Flexible Content**: Displays name, job function, status text, and availability information
- **Responsive Design**: Adapts content display based on size constraints
- **Overflow Support**: Provides overflow indicators for user lists

## Size Variants

- **24px**: Minimal size, shows only name
- **32px**: Small size with name and basic info
- **40px**: Compact size with name and function
- **48px**: Standard size with name, function, and status
- **72px**: Large size with extended information
- **96px**: Maximum size with full user details

## Usage Guidelines

- Use appropriate sizes based on available space and information hierarchy
- Ensure consistent sizing within user lists or grids
- Consider accessibility requirements for text readability
- Implement overflow indicators for large user collections

## Accessibility

- Presence indicators use appropriate ARIA labels
- Text content maintains sufficient contrast ratios
- Avatar images include meaningful alt text
- Focus management for interactive elements