Modals

Modals (also known as modal windows, overlays, and dialogs) are large UI elements that sit on top of an application's main window—often with a layer of transparency behind them to give users a peek into the main app. To return to the application's main interface, users must interact with the modal layer.

Use the class clay-modals in the parent container and clay-modal-bg-content in the tag that contains the page's content. Finally, use the class clay-modal in the modal section.

Modals - CTA on the right end

Below is a modal with the CTAs on the right end of the modal. Use the class clay-modal-cta-right in the parent container of the CTA buttons and clay-modal-cta in the CTA buttons.


<div class="clay-modals">
    <div class="clay-modal-bg-content">
        Page content comes here
    </div>
    <div class="clay-modal">
        <h1>Order Placed!</h1>
        <hr>
        <p>Congratulations! Your order has been confirmed.</p>
        <p>Please check your email for details.</p>
        <div class="clay-modal-cta-right">
            <button class="clay-modal-cta">OK</button>
            <button class="clay-modal-cta">Order Summary</button>
        </div>
    </div>
</div>

Modals - CTA at the centre

Below is a modal with the CTAs at the centre of the modal. Use the class clay-modal-cta in the CTA buttons and you are good to go.


<div class="clay-modals">
    <div class="clay-modal-bg-content">
        Page content comes here
    </div>
    <div class="clay-modal">
        <h1>Order Placed!</h1>
        <hr>
        <p class="p-lg">Congratulations! Your order has been confirmed.</p>
        <p class="p-lg">Please check your email for details.</p>
        <div>
            <button class="clay-modal-cta icon-light">OK</button>
            <button class="clay-modal-cta icon-dark"> Order Summary</button>
        </div>
    </div>
</div>

< Lists Navigation >