G-Loot DS — carousel step

by Augustin Hiebel

HTML

<div className="surface rounded-xl overflow-hidden carousel carousel-step">
    <div className="carousel-slides">
         <div className="carousel-slide">
            ...
        </div>
        <div className="carousel-slide">
            ...
        </div>
        <div className="carousel-slide is-active">
            <div className="carousel-image"><span style="background-image: url(https://res.cloudinary.com/gloot/image/upload/v1654611769/Marketing/2022_prototype/DummyContent/carouselonboarding-item-step3.jpg);"></span></div>
            <div className="carousel-body">
                <div>
                    <h2 className="h3">Complete your first mission</h2>
                    <div className="mt-3 text-sm uppercase text-ui-300">Not completed</div>
                    <p className="mb-5 mt-2">Morbi egestas vitae tellus eget egestas. Donec scelerisque gravida metus, non pulvinar augue finibus eu.</p>
                    <button className="button button-primary"><span>Browse Missions</span></button>
                </div>
            </div>
            <div className="carousel-backdrop"><span style="background-image: url(https://res.cloudinary.com/gloot/image/upload/v1654611769/Marketing/2022_prototype/DummyContent/carouselonboarding-item-step3.jpg);"></span></div>
        </div>
         <div className="carousel-slide">
            ...
        </div>
    </div>
    <div className="carousel-nav">
        <ul className="carousel-list">
            <li>
                <a className="item">
                    <div className="item-body">
                        <span className="text-xs text-ui-300">
                            Step 1
                        </span>
                        <div className="item-title">Create a G-Loot account</div>
                    </div>
                    <div className="item-actions">
                        <div className="checkmark checkmark-invisible checkmark-sm is-active"><i></i></div>
                    </div>
      ...