Example
Notifications
Cookie-Banner
Actions
Markup
<div class="kss-style"><h6>Notifications</h6></div>
<div class="message message--success">
<p class="message__primary">
I am the first part of the <strong>success</strong> <a href="javascript://">message</a>
</p>
<p class="message__secondary">
I am the second part of the message
</p>
</div>
<br>
<div class="message message--success message--close woocommerce-message" role="alert">
<div class="message__wrapper">
<a href="javascript://" class="message__action restore-item btn">Rückgängig?</a>
<div class="message__primary">I am the first part of the <strong>success</strong></div>
</div>
</div>
<br>
<div class="message message--info">
<p class="message__primary">
I am the first part of the <strong>info</strong> <a>message</a>
</p>
<p class="message__secondary">
I am the second part of the message
</p>
</div>
<br>
<div class="message message--warning">
<p class="message__primary">
I am the first part of the <strong>warning</strong> message
</p>
<p class="message__secondary">
I am the second part of the message
</p>
</div>
<br>
<div class="message message--danger">
<p class="message__primary">
I am the first part of the <strong>danger</strong> message
</p>
<p class="message__secondary">
I am the second part of the message
</p>
</div>
<br>
<div class="message message--danger">
<div class="message__wrapper">
<ul class="message__actions message-actions">
<li>Möchten Sie wirklich den Warenkorb leeren?</li>
<li class="message-actions__right">
<a href="javascript://" class="confirm-button confirm-yes btn">Ja</a><a href="javascript://" class="confirm-button confirm-no btn">Nein</a>
</li>
</ul>
</div>
</div>
<div class="kss-style"><h6>Cookie-Banner</h6></div>
<div class="message">
<a href="javascript://" class="message__action btn">Default</a>
<p class="message__primary">
Diese Website verwendet Cookies. Indem du diese Website nutzt, erklärst du dich mit dieser Verwendung einverstanden.
</p>
<p class="message__secondary">
<a href="javascript://">Weitere Informationen</a>
</p>
</div>
<div class="kss-style"><h6>Actions</h6></div>
<div class="message">
<ul class="message__actions message-actions">
<li>
<a href="javascript://" class="btn btn--shout">Shout Default</a>
</li>
</ul>
</div>
<br>
<div class="message">
<ul class="message__actions message-actions">
<li>
<a href="javascript://" class="btn">Default</a>
</li>
<li>
<a href="javascript://" class="btn btn--shout">Shout Default</a>
</li>
</ul>
</div>
<br>
<div class="message">
<ul class="message__actions message-actions">
<li class="message-actions__double-text">
Label <strong>Value</strong>
</li>
<li>
<a href="javascript://" class="btn btn--shout">Shout Default</a>
</li>
</ul>
</div>
Source:
assets/styles/03-molecules/02-status-messages/_message.scss, line 1