Messages (System)

Es gibt für verschiedene Arten von Informationen, bzw. Systemmeldungen, die Messages. Diese müssen entsprechend dem angegebenen Zweck genutzt werden. Bitte in Systemmeldungen oberhalb der H1 keine Überschriften verwenden.

Messages can be used for various types of information or system messages. They must be used for the given purposes. Please dont use headlines inside systemmessages that comes before the H1.

Standard

.message

Paragraph as message

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

Headline

Container as message

HTML
<div role="status" 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 role="status" 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

HTML
<div role="alert" 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 role="status" 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 role="status" 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"