Message
Messages are used to inform or alert users.
Usage
Message heading
This is message. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="c-message">
<h3 class="c-message__heading">Message heading</h3>
<p>This is message. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>Implementation
| Type | Name | |
|---|---|---|
| Elements | ||
| Message | .c-message | |
| Heading | .c-message__heading | Optional |
| Modifiers | ||
| Color | .c-message--white --blue --red --yellow --green --gray | |
| States | None |
Modifers
Color
Use different message color depending on the context as well as content of the message.
Blue
Message heading
This is message. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="c-message c-message--blue">
<h3 class="c-message__heading">Message heading</h3>
<p>This is message. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>Red
Message heading
This is message. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="c-message c-message--red">
<h3 class="c-message__heading">Message heading</h3>
<p>This is message. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>Yellow
Message heading
This is message. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="c-message c-message--yellow">
<h3 class="c-message__heading">Message heading</h3>
<p>This is message. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>Green
Message heading
This is message. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="c-message c-message--green">
<h3 class="c-message__heading">Message heading</h3>
<p>This is message. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>Gray
Message heading
This is message. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="c-message c-message--gray">
<h3 class="c-message__heading">Message heading</h3>
<p>This is message. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>