Layr
⌘K
Ctrl K
Design Systems
AI Designer
Account
Roadmap
Sign in
Twilio Paste - avatar
Getting started
Twilio Paste
Paste UI
Pro
Components
Account Switcher
Ai Chat Log
Alert
Alert Dialog
Anchor
Aspect Ratio
Avatar
Badge
Blockquote
Breadcrumb
Button
Button Group
Callout
Card
Chart Provider
Chat Composer
Chat Log
Checkbox
Code Block
Combobox
Corner Ornament
Data Grid
Date Picker
Description List
Detail Text
Disclosure
Display Heading
Display Pill Group
Editable Code Block
Example Text
File Picker
File Uploader
Flex
Form Layout
Form Pill Group
Grid
Heading
Help Text
Icon
In Page Navigation
Inline Code
Input
Keyboard Key
Label
List
Media Object
Menu
Meter
Minimizable Dialog
Modal
Multiselect Combobox
Page Header
Pagination
Paragraph
Popover
Product Switcher
Progress Bar
Progress Steps
Radio Button Group
Radio Group
Screen Reader Only
Select
Separator
Side Modal
Side Panel
Sidebar
Sidebar Navigation
Skeleton Loader
Slider
Spinner
Stack
Status Badge
Status Menu
Summary Detail
Switch
Table
Tabs
Textarea
Time Picker
Timeline
Toast
Tooltip
Topbar
Truncate
User Dialog
Visual Picker
{ const avatar = document.createElement('div'); avatar.style.cssText = ` width: ${size.replace('sizeIcon', '') + 'px'}; height: ${size.replace('sizeIcon', '') + 'px'}; border-radius: 50%; background: linear-gradient(135deg, #0263E0, #1976D2); display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: ${Math.max(10, parseInt(size.replace('sizeIcon', '')) / 4)}px; `; const initials = names[index].split(' ').map(n => n[0]).join(''); avatar.textContent = initials; avatar.title = names[index]; if (index >= 4) { avatar.style.background = `url(${avatarImages[index % 3]}) center/cover`; avatar.textContent = ''; } basicContainer.appendChild(avatar); }); } // Variant Avatars if (document.getElementById('variant-avatars')) { const variantContainer = document.getElementById('variant-avatars'); // User variant const userAvatar = document.createElement('div'); userAvatar.style.cssText = ` width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, #0263E0, #1976D2); display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; margin-right: 16px; `; userAvatar.innerHTML = '👤'; userAvatar.title = 'User example'; // Entity variant const entityAvatar = document.createElement('div'); entityAvatar.style.cssText = ` width: 60px; height: 60px; border-radius: 12px; background: linear-gradient(135deg, #14B5D0, #0891B2); display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; `; entityAvatar.innerHTML = '🏢'; entityAvatar.title = 'Entity example'; variantContainer.appendChild(userAvatar); variantContainer.appendChild(entityAvatar); } // Initials Avatars if (document.getElementById('initials-avatars')) { const initialsContainer = document.getElementById('initials-avatars'); const sizes = [30, 40, 50, 60, 70, 80, 90, 100, 110]; const names = ['Trayvon Martin', 'Breonna Taylor', 'Shantel Davis', 'Walter Scott', 'Ma </div> </div> </div> </div> </div> <div class="hidden rotate-45 text-red-500 bg-red-100 dark:text-red-400 dark:bg-red-900/50 text-green-500 bg-green-100 dark:text-green-400 dark:bg-green-900/50 scheme-light scheme-dark scheme-light-dark"></div> </main> </body> </html> Khia Bryant', 'George Floyd', 'Tamir Rice', 'Philando Castile', 'Mario Gonzalez']; sizes.forEach((size, index) => { const avatar = document.createElement('div'); avatar.style.cssText = ` width: ${size}px; height: ${size}px; border-radius: 50%; background: linear-gradient(135deg, #0263E0, #1976D2); display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: ${Math.max(10, size / 4)}px; margin-right: 8px; `; const initials = names[index].split(' ').map(n => n[0]).join(''); avatar.textContent = initials; avatar.title = names[index]; initialsContainer.appendChild(avatar); }); } // Image Avatars if (document.getElementById('image-avatars')) { const imageContainer = document.getElementById('image-avatars'); const sizes = [30, 40, 50, 60, 70, 80, 90, 100, 110]; const names = ['Maria Ardovini', 'Tri O </div> </div> </div> </div> </div> <div class="hidden rotate-45 text-red-500 bg-red-100 dark:text-red-400 dark:bg-red-900/50 text-green-500 bg-green-100 dark:text-green-400 dark:bg-green-900/50 scheme-light scheme-dark scheme-light-dark"></div> </main> </body> </html> Hara', 'Imani Nakai', 'Merlyn Lund', 'Dakota Powers', 'Twilio', 'Twilio Segment', 'Twilio Sendgrid', 'Twilio Paste']; sizes.forEach((size, index) => { const avatar = document.createElement('div'); avatar.style.cssText = ` width: ${size}px; height: ${size}px; border-radius: ${index >= 5 ? '12px' : '50%'}; background: url(${avatarImages[index % 3]}) center/cover; margin-right: 8px; `; avatar.title = names[index]; imageContainer.appendChild(avatar); }); } // Icon Avatars if (document.getElementById('icon-avatars')) { const iconContainer = document.getElementById('icon-avatars'); const sizes = [30, 40, 50, 60, 70, 80, 90, 100, 110]; const names = ['Dakota Powers', 'Maria Ardovini', 'Imani Nakai', 'Merlyn Lund', 'Twilio Engage', 'Twilio Flex', 'Twilio Voice', 'Twilio Studio', 'Twilio Interconnect']; const icons = ['👤', '👤', '👤', '👤', '📧', '💬', '📞', '🎬', '🔗']; sizes.forEach((size, index) => { const avatar = document.createElement('div'); avatar.style.cssText = ` width: ${size}px; height: ${size}px; border-radius: ${index >= 4 ? '12px' : '50%'}; background: ${index >= 4 ? 'linear-gradient(135deg, #14B5D0, #0891B2)' : 'linear-gradient(135deg, #0263E0, #1976D2)'}; display: flex; align-items: center; justify-content: center; color: white; font-size: ${Math.max(12, size / 3)}px; margin-right: 8px; `; avatar.innerHTML = icons[index]; avatar.title = names[index]; iconContainer.appendChild(avatar); }); } // Color Avatars if (document.getElementById('color-avatars')) { const colorContainer = document.getElementById('color-avatars'); const colors = ['#0263E0', '#8B5CF6', '#F59E0B', '#EF4444', '#10B981']; const names = ['Merlyn Lund', 'Maria Ardovini', 'Imani Nakai', 'Dakota Powers', 'Tri O </div> </div> </div> </div> </div> <div class="hidden rotate-45 text-red-500 bg-red-100 dark:text-red-400 dark:bg-red-900/50 text-green-500 bg-green-100 dark:text-green-400 dark:bg-green-900/50 scheme-light scheme-dark scheme-light-dark"></div> </main> </body> </html> Hara']; colors.forEach((color, index) => { const avatar = document.createElement('div'); avatar.style.cssText = ` width: 60px; height: 60px; border-radius: 50%; background: ${color}; display: flex; align-items: center; justify-content: center; color: white; font-size: 20px; margin-right: 8px; `; avatar.innerHTML = '👤'; avatar.title = names[index]; colorContainer.appendChild(avatar); }); } // Avatar Group if (document.getElementById('avatar-group')) { const groupContainer = document.getElementById('avatar-group'); const names = ['Maria Ardovini', 'Tri O </div> </div> </div> </div> </div> <div class="hidden rotate-45 text-red-500 bg-red-100 dark:text-red-400 dark:bg-red-900/50 text-green-500 bg-green-100 dark:text-green-400 dark:bg-green-900/50 scheme-light scheme-dark scheme-light-dark"></div> </main> </body> </html> Hara', 'Imani Nakai']; const group = document.createElement('div'); group.style.cssText = 'display: flex; margin-left: 0;'; names.forEach((name, index) => { const avatar = document.createElement('div'); avatar.style.cssText = ` width: 70px; height: 70px; border-radius: 50%; background: url(${avatarImages[index]}) center/cover; border: 3px solid white; margin-left: ${index > 0 ? '-20px' : '0'}; position: relative; z-index: ${names.length - index}; `; avatar.title = name; group.appendChild(avatar); }); groupContainer.appendChild(group); } // Avatar Group with Overflow if (document.getElementById('avatar-group-overflow')) { const overflowContainer = document.getElementById('avatar-group-overflow'); // User group with overflow const userGroup = document.createElement('div'); userGroup.style.cssText = 'display: flex; align-items: center; margin-bottom: 16px;'; const userAvatarGroup = document.createElement('div'); userAvatarGroup.style.cssText = 'display: flex; margin-right: 12px;'; for (let i = 0; i < 3; i++) { const avatar = document.createElement('div'); avatar.style.cssText = ` width: 70px; height: 70px; border-radius: 50%; background: url(${avatarImages[i]}) center/cover; border: 3px solid white; margin-left: ${i > 0 ? '-20px' : '0'}; position: relative; z-index: ${3 - i}; `; userAvatarGroup.appendChild(avatar); } const overflowButton = document.createElement('button'); overflowButton.style.cssText = ` background: none; border: none; color: #0263E0; font-weight: 600; cursor: pointer; text-decoration: underline; `; overflowButton.textContent = '+5'; userGroup.appendChild(userAvatarGroup); userGroup.appendChild(overflowButton); // Entity group with overflow const entityGroup = document.createElement('div'); entityGroup.style.cssText = 'display: flex; align-items: center;'; const entityAvatarGroup = document.createElement('div'); entityAvatarGroup.style.cssText = 'display: flex; margin-right: 12px;'; for (let i = 0; i < 3; i++) { const avatar = document.createElement('div'); avatar.style.cssText = ` width: 70px; height: 70px; border-radius: 12px; background: linear-gradient(135deg, #14B5D0, #0891B2); border: 3px solid white; margin-left: ${i > 0 ? '-20px' : '0'}; position: relative; z-index: ${3 - i}; display: flex; align-items: center; justify-content: center; color: white; font-size: 20px; `; avatar.innerHTML = ['🏢', '📊', '📧'][i]; entityAvatarGroup.appendChild(avatar); } const overflowText = document.createElement('span'); overflowText.style.cssText = 'font-weight: 600; color: #121C2D;'; overflowText.textContent = '+5'; entityGroup.appendChild(entityAvatarGroup); entityGroup.appendChild(overflowText); overflowContainer.appendChild(userGroup); overflowContainer.appendChild(entityGroup); } }, 100); </script></body></html>' width="100%" height="1200" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">