G-Loot DS — brawl info #2 structure

by Augustin Hiebel

HTML

<ul class="flex-1 surface overflow-hidden rounded-lg flex flex-col lg:flex-row flex-wrap items-stretch gap-2 p-2">
  <li class="flex-1 p-3 rounded bg-gradient-to-b from-ui-900 to-ui-800 animate-slide-in-bottom animate-delay" style="--delay: calc(1 * 0.05s);">
    <h4 class="font-headings text-base uppercase text-ui-400 mb-1">Objective</h4>
    <p class="text-sm text-ui-200 leading-tight">Most kills wins</p>
  </li>
  <li class="flex-1 p-3 rounded bg-gradient-to-b from-ui-900 to-ui-800 animate-slide-in-bottom animate-delay" style="--delay: calc(2 * 0.05s);">
    <h4 class="font-headings text-base uppercase text-ui-400 mb-1">Tiebreaker</h4>
    <p class="text-sm text-ui-200 leading-tight">Headshots from your 3 best rounds decides a tie</p>
  </li>
  <li class="flex-1 p-3 rounded bg-gradient-to-b from-ui-900 to-ui-800 animate-slide-in-bottom animate-delay" style="--delay: calc(3 * 0.05s);">
    <h4 class="font-headings text-base uppercase text-ui-400 mb-1">Game modes</h4>
    <p class="text-sm text-ui-200 leading-tight">Competitive</p>
  </li>
  <li class="flex-1 p-3 rounded bg-gradient-to-b from-ui-900 to-ui-800 animate-slide-in-bottom animate-delay" style="--delay: calc(4 * 0.05s);">
    <h4 class="font-headings text-base uppercase text-ui-400 mb-1">Brawl points</h4>
    <p class="text-sm text-ui-200 leading-tight">Best 3 matches</p>
  </li>
  <li class="flex-1 p-3 rounded bg-gradient-to-b from-ui-900 to-ui-800 animate-slide-in-bottom animate-delay" style="--delay: calc(5 * 0.05s);">
    <h4 class="font-headings text-base uppercase text-ui-400 mb-1">Brawl ID</h4>
    <button type="button" class="button button-sm button-secondary"><span>Copy</span><span class="icon icon-document-copy"></span></button>
  </li>
</ul>