G-Loot DS — carousel structure

by Augustin Hiebel

HTML

<div className="surface rounded-xl overflow-hidden carousel">
  <div className="carousel-slides">
    <div className="carousel-slide is-active">
      <div className="carousel-image">
        <span style="background-image: url(https://res.cloudinary.com/gloot/image/upload/v1644831593/Marketing/202109_gloot2/tournament-pubg_1.jpg);"></span>
      </div>
      <div className="carousel-body">
        <div>
          <h2 className="h3">Lorem ipsum dolor</h2>
          <p className="mb-5 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam commodo diam quis ante mollis, ac elementum dolor elementum. In vel consectetur tortor, nec porta lectus.</p>
          <button className="button button-primary"><span>Label</span></button>
        </div>
      </div>
      <div className="carousel-backdrop"><span style="background-image: url(https://res.cloudinary.com/gloot/image/upload/v1644831593/Marketing/202109_gloot2/tournament-pubg_1.jpg);"></span></div>
    </div>
    <div className="carousel-slide">
      ...
    </div>
    <div className="carousel-slide">
      ...
    </div>
  </div>
  <div className="carousel-nav">
    <ul className="carousel-list">
      <li className="is-active">
        <a className="item">
          <div className="item-content">
            <span className="text-xs text-ui-300">
              Step 1
            </span>
            <div className="item-title">Lorem ipsum dolor</div>
          </div>
          <i></i>
        </a>
      </li>
      <li>
        ...
      </li>
      <li>
        ...
      </li>
    </ul>
    <div className="carousel-control">
      <button type="button" className="button button-secondary">
        <span className="icon icon-ctrl-left"></span>
      </button>
      <button type="button" className="button button-secondary">
        <span className="icon icon-ctrl-right"></span>
      </button>
    </div>
  </div>
</div>