Modal popups

When there is an important piece of information that demands the user's attention and confirmation before they continue with their task, a modal popup should be used.

Popup trigger

Popup Title

The purpose of a Design System like this, is to aid in shaping a solid brand identity and ensure its visual consistency, while significantly simplifying the development process.

Decline Accept 
<div>
    <a href="#popup1">Popup trigger</a>
</div>
<div id="popup1" class="overlay">
    <div class="popup">
        <h3>Popup Title</h3>
        <p class="txt-m">Popup Content</p>
        <div class="btn-container">
            <a href="#" class="btn btn-bg-shade3" type="button">
                <span>Decline</span>
            </a>
            <a href="#"class="btn btn-brand" type="button">
                <span>Accept</span>
            </a>
        </div>
    </div>
</div>