# Components

## Carousel

---

## Overlay 

<div class="offer-ui">
    <div class="jackpotjoy">
    <div class="overlay-frame flex-centered">
        <div class="overlay-content background-overlay">
            <div class="overlay-icon">
                <div class="logo"></div>
            </div>
            <div class="overlay-content-wrapper">
                <div class="overlay-title">
                <h2 class="text-centered">Spin it up</h2>
                </div>
                <div class="overlay-subtitle">
                <div>
                    <p>Simply play £10 on any games<br> and get 30 Free Spins on MONOPOLY Paradise Mansion.</p>
                    <p>You could win up to £100 cash on any one of your Free Spins.</p>
                    <p>But don’t delay, as this offer will end on Wednesday, 21st February.</p>
                </div>
                </div>
                <div class="overlay-action"><button class="btn btn-primary">View games</button></div>
            </div>
            <div class="overlay-footer">
                <span>Terms and Conditions</span>
            </div>
        </div>
    </div>
    </div>
</div>

```html
<div class="offer-ui">
    <div class="overlay">
    <div class="overlay-frame flex-centered">
        <div class="overlay-content background-overlay">
            <div class="overlay-icon">
                <div class="logo"></div>
            </div>
            <div class="overlay-content-wrapper">
                <div class="overlay-title">
                <h2 class="text-centered">Spin it up</h2>
                </div>
                <div class="overlay-subtitle">
                <div>
                    <p>Simply play £10 on any games<br> and get 30 Free Spins on MONOPOLY Paradise Mansion.</p>
                    <p>You could win up to £100 cash on any one of your Free Spins.</p>
                    <p>But don’t delay, as this offer will end on Wednesday, 21st February.</p>
                </div>
                </div>
                <div class="overlay-action"><button class="btn btn-primary">View games</button></div>
            </div>
            <div class="overlay-footer">
                <span>Terms and Conditions</span>
            </div>
        </div>
    </div>
    </div>
</div>
```

---

## Tile

<div class="offer-ui">
    <div class="tile jackpotjoy">
    <div class="tile-frame flex-centered background-tile">
        <div class="container tile-content">
            <div class="tile-icon">
                <div class="logo"></div>
            </div>
            <div class="tile-subtitle">
                <div></div>
            </div>
            <div class="tile-title">
                <h2 class="text-centered">Get 30 Free Spins</h2>
            </div>
            <div class="tile-subtitle">
                <div>
                <p>on MONOPOLY Paradise Mansion <br> when you play £10 on any games!</p>
                </div>
            </div>
            <div class="tile-footer">Terms and Conditions Apply</div>
        </div>
    </div>
    </div>
</div>
```html
<div class="offer-ui">
    <div class="tile">
    <div class="tile-frame flex-centered background-tile">
        <div class="container tile-content">
            <div class="tile-icon">
                <div class="logo"></div>
            </div>
            <div class="tile-subtitle">
                <div></div>
            </div>
            <div class="tile-title">
                <h2 class="text-centered">Get 30 Free Spins</h2>
            </div>
            <div class="tile-subtitle">
                <div>
                <p>on MONOPOLY Paradise Mansion <br> when you play £10 on any games!</p>
                </div>
            </div>
            <div class="tile-footer">Terms and Conditions Apply</div>
        </div>
    </div>
    </div>
</div>
```