Messages

Es gibt für verschiedene Arten von Informationen, bzw. Nachrichten, die Messages. Diese müssen entsprechend dem angegebenen Zweck genutzt werden.

Messages can be used for various types of information or messages. They must be used for the given purposes.

Standard

.message

Paragraph as message

HTML
<p class="message">Paragraph as message</p>

Headline

Container as message

HTML
<div class="message">
        <h3 class="title">Headline</h3>
        <p>Container as message</p>    
</div>

Info

.message.message--info

Headline

Text lorem ipsum dolor sit amet, consectetuer elit. Aenean commodo ligula eget dolor.

HTML
<div class="message--info">
        <h3 class="title">Headline</h3>
        <p>Text lorem ipsum dolor sit amet, consectetuer elit. Aenean commodo ligula eget dolor.</p>    
</div>

Error

.message.message--error

Headline

Text lorem ipsum dolor sit amet, consectetuer elit. Aenean commodo ligula eget dolor.

HTML
<div class="message--error">
        <h3 class="title">Headline</h3>
        <p>Text lorem ipsum dolor sit amet, consectetuer elit. Aenean commodo ligula eget dolor.</p>    
</div>

Success

.message.message--success

Headline

Text lorem ipsum dolor sit amet, consectetuer elit. Aenean commodo ligula eget dolor.

HTML
<div class="message--success">
        <h3 class="title">Headline</h3>
        <p>Text lorem ipsum dolor sit amet, consectetuer elit. Aenean commodo ligula eget dolor.</p>    
</div>

Option: Fade out

Fade out any message background by adding .message.message--fade-out class

Headline

Text lorem ipsum dolor sit amet, consectetuer elit. Aenean commodo ligula eget dolor.

HTML
<div class="message message--fade-out">
        <h3 class="title">Headline</h3>
        <p>Text lorem ipsum dolor sit amet, consectetuer elit. Aenean commodo ligula eget dolor.</p>    
</div>

Barrierefreiheit

role="alert"