Messages

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

Standard

.message

Paragraph as message

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

Headline

Container as message

<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.

<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.

<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.

<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>

Barrierefreiheit

role="alert"