G-Loot DS — modal structure

by Augustin Hiebel

HTML

<div className="modal">
  <button className="button button-secondary button-close">
    <span className="icon icon-e-remove" />
  </button>
  <div className="modal-image">
    <span style={{
                      backgroundImage: `url(https://res.cloudinary.com/gloot/image/upload/v1644831593/Marketing/202109_gloot2/tournament-pubg_1.jpg)`,
                    }} />
  </div>
  <div className="modal-content">
    <div className="modal-body">
      <h2 className="modal-title">Leave party?</h2>
      <p>
        We are looking to find you the best match. Leaving the
        party means you lose your spot in the queue for the
        tournament.
      </p>
    </div>
    <div className="modal-action">
      <button type="button" className="button button-primary">
        <span>Stay in party</span>
      </button>
      <button type="button" className="button button-secondary">
        <span>Leave party</span>
      </button>
    </div>
  </div>
</div>