G-Loot DS — list item as notification

by Augustin Hiebel

HTML

<div className="flex-1 surface rounded-lg overflow-hidden">
  <div className="item">
    <div className="item-image">
      <div className="avatar avatar-simple rounded-sm overflow-hidden">
        <div>
          <img src="https://res.cloudinary.com/gloot/image/upload/v1655292255/Marketing/2022_prototype/DummyContent/avatars/avatar_user_1.jpg" />
        </div>
      </div>
    </div>
    <div className="item-body">
      <div className="text-xs text-ui-300">Game or Area</div>
      <div className="item-title font-headings font-bold italic text-xl">
        Notification title
      </div>
      <p className="text-sm text-ui-200">
        Lorem ipsum dolor sit amet, consectetur adipisc ing elit
      </p>
    </div>
    <div className="item-actions absolute top-2 right-2">
      <div data-badge="." className="after:bg-error-300"></div>
    </div>
  </div>
</div>