G-Loot DS — modal with inner image

by Augustin Hiebel

HTML

<div className="modal">
  <button type="button" className="button button-secondary button-close">
    <span className="icon icon-e-remove" />
  </button>
  <div className="modal-image">
    <img src="https://res.cloudinary.com/gloot/image/upload/v1653326622/Marketing/2022_prototype/DummyContent/trophy.png" width="200" height="auto" alt="Trophy" />
  </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 className="button button-primary">
        <span>Stay in party</span>
      </button>
      <button className="button button-secondary">
        <span>Leave party</span>
      </button>
    </div>
  </div>
</div>