Resa Design System

Appearance

Pop-ups ​

v-0.0.0

How to use ​

The pop-up are settup with a checkbox input to be able to work with no JS. that means that to toggle it we only have to use a label to check/uncheck the input.

With that in mind, by default, a pop-up is integrated with an overlay and a close button that dismiss the pop-up. If we want to keep the overlay but make it so it doesn't dismiss the pop-up, you just need to add the class popup__bgClose to a empty div instead of a label, (see example)[#forced].

Default ​

html
<div class="popup" role="alert">
    <label class="popup__bgClose" title="Close popup info" for="popupCheckboxId">
        <span class="srOnly">Close Pop-up</span>
    </label>
    <div class="popup__container">
        <input id="popupCheckboxId" checked class="popup__checkbox" type="checkbox" name="toggle popup" />
        <label class="popup__btnClose" title="Close popup info" for="popupCheckboxId">
            <span class="srOnly">Close Pop-up</span>
        </label>
        <div class="popup__content">
            <p class="popup__header h4">
                Title of pop-up
            </p>
            <div>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Nam tempor posuere laoreet. Nam scelerisque ipsum
                venenatis suscipit lobortis. Mauris lobortis vulputate
                nibh, sit amet facilisis sem eleifend eu. Morbi
                scelerisque dui leo, vitae volutpat turpis mattis eu.
            </div>
        </div>
    </div>
</div>

Not dismissable overlay ​

html
<div class="popup" role="alert">
    <div class="popup__bgClose"></div>
    <div class="popup__container">
        <input id="popupCheckboxForcedId" class="popup__checkbox" type="checkbox" name="toggle popup" />
        <label class="popup__btnClose" title="Close popup info" for="popupCheckboxForcedId">
            <span class="srOnly">Close Pop-up</span>
        </label>
        <div class="popup__content">
            <p class="popup__header h4">
                Title of pop-up
            </p>
            <div>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Nam tempor posuere laoreet. Nam scelerisque ipsum
                venenatis suscipit lobortis. Mauris lobortis vulputate
                nibh, sit amet facilisis sem eleifend eu. Morbi
                scelerisque dui leo, vitae volutpat turpis mattis eu.
            </div>
        </div>
    </div>
</div>

Use case ​

Do

  • Use pop-up only for confirmation of a user's action

Don't

  • Use pop-up for secondary informations
  • Use multiple pop-up at once