Component Listing

MODALS

Modals focus the user’s attention exclusively on one task or piece of information via a window that sits on top of the page content.
To use this modal component in your project import the below stylesheet.


@import url("https://oxygen-ui-component-library.netlify.app/components/modal/modal.css")

Simple Modal

This component consists of a heading, some description and a couple of buttons along with a close icon.


<div class="modal-container flex-column">
    <button><i class="modal-close close-icon fas fa-times"></i></button>
    <div class="modal-heading mb-2">Modal</div>
    <div class="modal-desc mb-2">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perferendis in aperiam quas
        recusandae id?</div>
    <div class="modal-buttons flex-row justify-content-around">
        <button class="primary-button button">Save Changes</button>
        <button class="primary-outlined-button button">Cancel</button>
    </div>
</div>