Pages
Introduction Colors & Tokens Typography Icons
UI
Button Link Badge Notification Badge Alert Card Spinner Avatar Divider Empty State
Interactive
Modal Side Modal Dropdown Tooltip Accordion Tabs Flash Toast Support Button
Forms
Form Select Toggle Checkbox & Radio Text Fields Date & Time Fields
Layout
Navbar Sidebar Table Pagination Breadcrumbs Selector List
Utilities
Local Time
Templates
Playground
app_theme v1.45.0

Avatar

A user image with automatic initials fallback.

Initials

EO
AL
.demo-row
  = app_theme_avatar(initials: "EO")
  = app_theme_avatar(initials: "AL")

Sizes

XS
SM
MD
LG
XL
.demo-row
  - AppTheme::AvatarComponent::SIZES.each do |size|
    = app_theme_avatar(initials: size.to_s.upcase[0, 2], size: size)

Variants

pr
se
da
su
wa
in
pr
se
da
su
wa
in
.demo-row
  - AppTheme::INTENTS.each do |intent|
    = app_theme_avatar(initials: intent.to_s[0, 2], variant: intent)
.demo-row
  - AppTheme::INTENTS.each do |intent|
    = app_theme_avatar(initials: intent.to_s[0, 2], variant: :"#{intent}_solid")