G-Loot DS — brackets structure

by Augustin Hiebel

HTML

<div classname="brackets-container scrollbar-desktop">
  <div classname="brackets">
    <div classname="bracket-round">
      <div classname="bracket-title"><span>Super Weekend</span></div>
      <ul>
        <li classname="bracket-item">
          <div>
            <div classname="bracket-meta">
              <div><span classname="icon icon-calendar-2"></span><span>May 5 • 15:30 PM</span></div>
              <div><a href="#">Match details</a></div>
            </div>
            <ul classname="bracket-teams">
              <li classname="is-active">
                <figure classname="avatar avatar-tiny">
                  <div><img src="https://res.cloudinary.com/gloot/image/upload/v1654063976/Marketing/2022_prototype/DummyContent/teams/teamlogo_AngryBeavers.png" alt="Angry Beavers" /></div>
                </figure>
                <b>Angry Beavers</b><i>2</i>
              </li>
              <li classname="">
                <figure classname="avatar avatar-tiny">
                  <div><img src="https://res.cloudinary.com/gloot/image/upload/v1654063976/Marketing/2022_prototype/DummyContent/teams/teamlogo_l10n.png" alt="Kingzz" /></div>
                </figure>
                <b>Kingzz</b><i>1</i>
              </li>
            </ul>
            <div classname="bracket-info">Upper bracket 1.1</div>
          </div>
        </li>
        <li classname="bracket-item">
          <div>
            <div classname="bracket-meta">
              <div><span classname="icon icon-calendar-2"></span><span>May 6 • 15:30 PM</span></div>
              <div><a href="#">Match details</a></div>
            </div>
            <ul classname="bracket-teams">
              <li classname="is-active">
                <figure classname="avatar avatar-tiny">
                  <div><img src="https://res.cloudinary.com/gloot/image/upload/v1654063976/Marketing/2022_prototype/DummyContent/teams/teamlogo_Bunny_Hunger.png" alt="Bunny Hunger" /></div>
                </figure>
           ...