Modal

The modal is composed of three distinct zones: A header, the body, and a footer. The modal component provides a solid foundation for creating dialogs, popovers, lightboxes, or whatever else

Basic Modal

Below is an example of basic modal. It can be created by adding the particular classes.

                               
                            <div class="modal">
                                <div class="modal-head">
                                    <h3>Modal Header</h3>
                                </div>
                                <div class="modal-body">
                                    <p>Modal text here</p>
                                </div>
                                <div class="modal-bottom">
                                    <button class="modal-btn">ACTION 1</button>
                                    <button class="modal-btn">ACTION 2</button>
                                </div>
                            </div>
                               
                           

Modal With stacked Button

Below is an example of modal with a stacked button.

                                
                                <div class="modal">
                                    <div class="modal-head">
                                        <h3>Modal Header</h3>
                                    </div>
                                    <div class="modal-body">
                                        <p>modal text here...</p>
                                    </div>
                                    <div class="modal-stacked-bottom">
                                        <button class="modal-btn">ACTION 1</button>
                                        <button class="modal-btn">ACTION 2</button>
                                    </div>
                                </div>