Resa Design System

Appearance

Alerts ​

v-0.0.0

Info ​

html
<div class="alert--info" role="alert">
    <div class="alert__content">
        LOREM IPSUM | dolor sit amet, consectetur adipiscing elit.
        Nam ut erat nec lacus iaculis ornare.
        Cras orci ante, interdum id risus eget,
        <a class="link" href="#">congue lectus</a>. In hac habitasse platea dictumst.
    </div>
    <button class="cta__btn--icon icon--close">
        <span class="srOnly">Close alert</span>
    </button>
</div>

Warning ​

html
<div class="alert--warning" role="alert">
    <div class="alert__content">
        LOREM IPSUM | dolor sit amet, consectetur adipiscing elit.
        Nam ut erat nec lacus iaculis ornare.
        Cras orci ante, interdum id risus eget,
        <a class="link" href="#">congue lectus</a>. In hac habitasse platea dictumst.
    </div>
    <button class="cta__btn--icon icon--close">
        <span class="srOnly">Close alert</span>
    </button>
</div>

Use case ​

Do

  • Use this component to diplay temporary content.

Don't

  • Use this component for permanent content