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
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.
Order Placed!
Congratulations! Your order has been confirmed.
Please check your email for details.
Page content comes here
Order Placed!
Congratulations! Your order has been confirmed.
Please check your email for details.
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.
Order Placed!
Congratulations! Your order has been confirmed.
Please check your email for details.
Page content comes here
Order Placed!
Congratulations! Your order has been confirmed.
Please check your email for details.