Raptus Design Theme

Example
Notifications

I am the first part of the success message

I am the second part of the message



I am the first part of the info message

I am the second part of the message


I am the first part of the warning message

I am the second part of the message


I am the first part of the danger message

I am the second part of the message


  • Möchten Sie wirklich den Warenkorb leeren?
  • JaNein
Cookie-Banner
Default

Diese Website verwendet Cookies. Indem du diese Website nutzt, erklärst du dich mit dieser Verwendung einverstanden.

Weitere Informationen

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