Reactive Graph - Design System

Avatar: Mexican Pink 

<div style="padding: var(--size-4);">
    <h1 class="mexican-pink">
        Avatar
        <span class="token string" style="font-size: var(--font-size-2)">mexican-pink</span>
    </h1>
    <hr>
    <h3 class="celestial-blue">Avatar with Image</h3>
    <div style="padding: var(--size-4); display: grid; gap: var(--size-4); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));">
        <div>
            <img src="/components/raw/avatar/avatar-m.png" alt="avatar" class="mexican-pink avatar" />
        </div>
        <div>
            <img src="/components/raw/avatar/avatar-f.png" alt="avatar" class="mexican-pink avatar" />
        </div>
        <div>
            <img src="/logo/mono/reactive-graph-white.svg" alt="avatar" class="mexican-pink avatar" />
        </div>
        <div>
            <img src="/components/raw/avatar/avatar-m-2.png" alt="avatar" class="mexican-pink avatar square" />
        </div>
        <div>
            <img src="/components/raw/avatar/avatar-f-2.png" alt="avatar" class="mexican-pink avatar square" />
        </div>
        <div>
            <img src="/logo/configurable/reactive-graph.outbreak.svg" alt="avatar" class="mexican-pink avatar square" />
        </div>
    </div>
    <hr>
    <h3 class="celestial-blue">Avatar with Icon</h3>
    <div style="padding: var(--size-4); display: grid; gap: var(--size-4); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));">
        <div>
            <i class="ti ti-user mexican-pink avatar"></i>
        </div>
        <div>
            <i class="ti ti-user-filled mexican-pink avatar"></i>
        </div>
        <div>
            <i class="ti ti-chess-queen mexican-pink avatar"></i>
        </div>
        <div>
            <i class="ti ti-user mexican-pink avatar square"></i>
        </div>
        <div>
            <i class="ti ti-user-filled mexican-pink avatar square"></i>
        </div>
        <div>
            <i class="ti ti-chess-king mexican-pink avatar square"></i>
        </div>
    </div>
    <hr>
    <h3 class="celestial-blue">Avatar with Text</h3>
    <div style="padding: var(--size-4); display: grid; gap: var(--size-4); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));">
        <div>
            <span class="mexican-pink avatar">
                AB
            </span>
        </div>
        <div>
            <span class="mexican-pink avatar square">
                CD
            </span>
        </div>
    </div>
</div>
 
<div style="padding: var(--size-4);">
  <h1 class="mexican-pink">
    Avatar
    {{#if modifier}}<span class="token string" style="font-size: var(--font-size-2)">{{modifier}}</span>{{/if}}
  </h1>
  <hr>
  <h3 class="celestial-blue">Avatar with Image</h3>
  <div style="padding: var(--size-4); display: grid; gap: var(--size-4); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));">
    <div>
      <img src="/components/raw/avatar/avatar-m.png" alt="avatar" class="{{#if modifier}}{{modifier}}{{/if}} avatar"/>
    </div>
    <div>
      <img src="/components/raw/avatar/avatar-f.png" alt="avatar" class="{{#if modifier}}{{modifier}}{{/if}} avatar"/>
    </div>
    <div>
      <img src="/logo/mono/reactive-graph-white.svg" alt="avatar" class="{{#if modifier}}{{modifier}}{{/if}} avatar"/>
    </div>
    <div>
      <img src="/components/raw/avatar/avatar-m-2.png" alt="avatar" class="{{#if modifier}}{{modifier}}{{/if}} avatar square"/>
    </div>
    <div>
      <img src="/components/raw/avatar/avatar-f-2.png" alt="avatar" class="{{#if modifier}}{{modifier}}{{/if}} avatar square"/>
    </div>
    <div>
      <img src="/logo/configurable/reactive-graph.outbreak.svg" alt="avatar" class="{{#if modifier}}{{modifier}}{{/if}} avatar square"/>
    </div>
  </div>
  <hr>
  <h3 class="celestial-blue">Avatar with Icon</h3>
  <div style="padding: var(--size-4); display: grid; gap: var(--size-4); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));">
    <div>
      <i class="ti ti-user {{#if modifier}}{{modifier}}{{/if}} avatar"></i>
    </div>
    <div>
      <i class="ti ti-user-filled {{#if modifier}}{{modifier}}{{/if}} avatar"></i>
    </div>
    <div>
      <i class="ti ti-chess-queen {{#if modifier}}{{modifier}}{{/if}} avatar"></i>
    </div>
    <div>
      <i class="ti ti-user {{#if modifier}}{{modifier}}{{/if}} avatar square"></i>
    </div>
    <div>
      <i class="ti ti-user-filled {{#if modifier}}{{modifier}}{{/if}} avatar square"></i>
    </div>
    <div>
      <i class="ti ti-chess-king {{#if modifier}}{{modifier}}{{/if}} avatar square"></i>
    </div>
  </div>
  <hr>
  <h3 class="celestial-blue">Avatar with Text</h3>
  <div style="padding: var(--size-4); display: grid; gap: var(--size-4); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));">
    <div>
      <span class="{{#if modifier}}{{modifier}}{{/if}} avatar">
        AB
      </span>
    </div>
    <div>
      <span class="{{#if modifier}}{{modifier}}{{/if}} avatar square">
        CD
      </span>
    </div>
  </div>
</div>
 
{
  "modifier": "mexican-pink"
}

No notes defined.