Version 0.40.0

UI Molecules

Messages

Default message

Lorem ipsum dolor sit amet, consectetur adipisicing elit! This is a link
<div class="sui-m-message">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit! <a href="#">This is a link</a>
</div>

Messages colors

Lorem ipsum dolor sit amet, consectetur adipisicing elit! This is a link
Lorem ipsum dolor sit amet, consectetur adipisicing elit! This is a link
Lorem ipsum dolor sit amet, consectetur adipisicing elit! This is a link
Lorem ipsum dolor sit amet, consectetur adipisicing elit! This is a link
<div class="sui-m-message as--primary">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit! <a href="#">This is a link</a>
</div>

<div class="sui-m-message as--success">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit! <a href="#">This is a link</a>
</div>

<div class="sui-m-message as--warning">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit! <a href="#">This is a link</a>
</div>

<div class="sui-m-message as--danger">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit! <a href="#">This is a link</a>
</div>

Messages light colors

Lorem ipsum dolor sit amet, consectetur adipisicing elit! This is a link
Lorem ipsum dolor sit amet, consectetur adipisicing elit! This is a link
Lorem ipsum dolor sit amet, consectetur adipisicing elit! This is a link
Lorem ipsum dolor sit amet, consectetur adipisicing elit! This is a link
Lorem ipsum dolor sit amet, consectetur adipisicing elit! This is a link
<div class="sui-m-message as--light">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit! <a href="#">This is a link</a>
</div>

<div class="sui-m-message as--light as--primary">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit! <a href="#">This is a link</a>
</div>

<div class="sui-m-message as--light as--success">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit! <a href="#">This is a link</a>
</div>

<div class="sui-m-message as--light as--warning">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit! <a href="#">This is a link</a>
</div>

<div class="sui-m-message as--light as--danger">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit! <a href="#">This is a link</a>
</div>