<!-- @dsCard group="Components / Data display" viewport="700x380" name="Avatar" subtitle="A person or team image. Falls back to initials on the muted surface, never to a generic silhouette." -->
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Avatar</title>
<link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../_card/card.css">
<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
<script src="https://unpkg.com/lucide@0.544.0/dist/umd/lucide.min.js"></script>
<script src="../../_ds_bundle.js"></script>
<script src="../_card/card.js"></script>
</head><body>
<header class="ch"><h1>Avatar</h1><p>A person or team image. Falls back to initials on the muted surface, never to a generic silhouette.</p></header>
<div id="root"></div>
<ul class="notes">
<li>Sizes are the token steps 20/24/32/40; the initials scale with the box.</li>
<li>Give <code>alt</code> the person&rsquo;s name when the avatar is the only identifier, and <code>alt=""</code> when the name is already beside it.</li>
<li>Two initials maximum. Never substitute an icon for a missing photo.</li>
<li>In a group, overlap by a third of the box and ring each avatar in the page background; the overflow count is a fallback avatar, not a badge.</li>
</ul>
<script type="text/babel">
const {Avatar, AvatarGroup} = window.OriginDesignSystem_7c998b;
const {Ic, mount} = window.OriginCard;
function Demo(){return (<>
  <div className="spec"><span className="spec-label">Sizes</span>
    <Avatar size={20} src="../../assets/img/avatar-40-01.jpg" alt="Rick Astley" /><Avatar size={24} src="../../assets/img/avatar-40-02.jpg" alt="Dana Vu" /><Avatar size={32} src="../../assets/img/avatar-40-03.jpg" alt="Omar Idris" /><Avatar size={40} src="../../assets/img/avatar-40-05.jpg" alt="Mia Chen" />
  </div>
  <div className="spec"><span className="spec-label">Fallback</span>
    <Avatar size={24} fallback="RA" /><Avatar size={32} fallback="DV" /><Avatar size={40} fallback="OI" />
  </div>
  <div className="spec"><span className="spec-label">Group</span>
    <AvatarGroup>
      <Avatar size={32} src="../../assets/img/avatar-40-01.jpg" alt="Rick Astley" style={{boxShadow:"0 0 0 2px var(--background)"}} />
      <Avatar size={32} src="../../assets/img/avatar-40-02.jpg" alt="Dana Vu" style={{marginInlineStart:-8,boxShadow:"0 0 0 2px var(--background)"}} />
      <Avatar size={32} src="../../assets/img/avatar-40-03.jpg" alt="Omar Idris" style={{marginInlineStart:-8,boxShadow:"0 0 0 2px var(--background)"}} />
      <Avatar size={32} fallback="+4" style={{marginInlineStart:-8,boxShadow:"0 0 0 2px var(--background)"}} />
    </AvatarGroup>
  </div>
</>)}
mount(<Demo />);
</script>
</body></html>