# Alerts

TIP

Provide contextual feedback messages for typical user actions.

(!) The whole content inside the .c-alert has to be surrounded by a DIV or p-Tag for the Icon to be positioned correctly.

Related: Notification Layer.

# All Colors / Types

.c-alert .c-alert.-notice .c-alert.-highlight .c-alert.-success .c-alert.-warning .c-alert.-error

c-alert: Lorem ipsum dolor sit amet, consectetur adipisicing elit.

c-alert -notice: Lorem ipsum dolor sit amet, consectetur adipisicing elit.

c-alert -highlight: Lorem ipsum dolor sit amet, consectetur adipisicing elit.

c-alert -success: Lorem ipsum dolor sit amet, consectetur adipisicing elit.

c-alert -warning: Lorem ipsum dolor sit amet, consectetur adipisicing elit.

c-alert -error: Lorem ipsum dolor sit amet, consectetur adipisicing elit.

c-alert -student: Lorem ipsum dolor sit amet, consectetur adipisicing elit.

hide code

<div class="c-alert">
    <p><strong>c-alert</strong>: Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="c-alert -notice">
    <p><strong>c-alert -notice</strong>: Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="c-alert -highlight">
    <p><strong>c-alert -highlight</strong>: Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="c-alert -success">
    <p><strong>c-alert -success</strong>: Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="c-alert -warning">
    <p><strong>c-alert -warning</strong>: Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="c-alert -error">
    <p><strong>c-alert -error</strong>: Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="c-alert -student">
    <p><strong>c-alert -student</strong>: Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>

# Modifiers

.-small

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

hide code

<div class="c-alert -warning -small">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>

.-has-border

c-alert -has-border: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

hide code

<div class="c-alert -has-border">
    <p><strong>c-alert -has-border</strong>:  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>

.-has-border.-large-border

hide code

<div class="c-alert -highlight -has-border -large-border">
    <p><strong>c-alert -has-border</strong>:  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>

# Arrows

TIP

Adds an arrow as pseudo-element in the specified direction: .-arrow-[up/down]-[left/right/center]

c-alert -arrow-up-left

c-alert -arrow-up-center

c-alert -arrow-down-right

hide code

<div class="c-alert -arrow-up-left m-b-m">
    <p><strong>c-alert -arrow-up-left</strong></p>
</div>
<div class="c-alert -arrow-up-center -success m-y-m">
    <p><strong>c-alert -arrow-up-center</strong></p>
</div>
<div class="c-alert -arrow-down-right -highlight -has-border m-y-m">
    <p><strong>c-alert -arrow-down-right</strong></p>
</div>

WARNING

Doesn't work in combination with the icon (is also an pseudo-element). Workaround:

Profitieren Sie von 95,- Euro Rabatt!

Werden Sie Mitglied im Avoxa-Studentenclub und erhalten Sie als Student oder PhiP den Premium-Learning-Account bei pharma4u für ein Jahr kostenfrei.

Mehr erfahren

hide code

<div class="c-alert -student m-y-reset -arrow-up-center">
    <div class="h-flex m-l-reset">
        <i class="fa fa-3x fa-user-graduate p-r-l m-auto"></i>
        <div>
            <h4>Profitieren Sie von 95,- Euro Rabatt!</h4>
            <p>
                Werden Sie Mitglied im <strong>Avoxa-Studentenclub</strong> und erhalten Sie als
               Student oder PhiP den Premium-Learning-Account bei pharma4u
               für ein Jahr kostenfrei.
            </p>
            <a class="c-link -secondary -icon-arrow -icon-right" href="http://studenten-club.me" target="_blank">Mehr erfahren</a>
        </div>
    </div>
</div>

# Special Icons (and Border Examples)

.-user, .-medical, .-child, .-patients, .-pills, .-animal

c-alert -user: Lorem ipsum dolor sit amet, consectetur adipisicing elit.

c-alert -medical: Lorem ipsum dolor sit amet, consectetur adipisicing elit.

c-alert -child: Lorem ipsum dolor sit amet, consectetur adipisicing elit.

c-alert -pills: Lorem ipsum dolor sit amet, consectetur adipisicing elit.

c-alert -animal: Lorem ipsum dolor sit amet, consectetur adipisicing elit.

c-alert -star: Lorem ipsum dolor sit amet, consectetur adipisicing elit.

hide code

<div class="c-alert -highlight -has-border -user">
    <p><strong>c-alert -user</strong>: Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="c-alert -notice -medical -has-border">
    <p><strong>c-alert -medical</strong>: Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="c-alert -success -has-border -child">
    <p><strong>c-alert -child</strong>: Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="c-alert -error -pills -has-border">
    <p><strong>c-alert -pills</strong>: Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="c-alert -notice -fingerprint">
    <p><strong>c-alert -animal</strong>: Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="c-alert -warning -animal -has-border">
    <p><strong>c-alert -animal</strong>: Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="c-alert -star -has-border">
    <p><strong>c-alert -star</strong>: Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>

# Example with Links

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Testlink.

Another Testlink.

hide code

<div class="c-alert -error">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
    <a class="c-link" href="#">Testlink</a>.</p>
    <a class="c-link -icon-arrow -icon-right" href="#">Another Testlink</a>.
</div>

# Example with Button

Sie haben diesen Ausgangsstoff bereits in der Vergangenheit geprüft. Zuletzt mit dem Prüfdatum 22.07.2020.
Daten übernehmen

hide code

<div class="c-alert -notice"> 
    <p>Sie haben diesen Ausgangsstoff bereits in der Vergangenheit geprüft. Zuletzt mit dem Prüfdatum <strong>22.07.2020</strong>.<br>
    <a class="c-btn -small -secondary -icon-left m-t-s" href="">
        <span class="fa fa-check"></span>
        Daten übernehmen
    </a>
    </p>
</div>

# Parsley Error

.parsley-errors-list is hidden per default. Visible with additional class .filled.

Bitte wählen Sie einen Abo-Typ aus.

hide code

<div id="erroraccounttyp">
    <ul class="parsley-errors-list filled">
        <li class="parsley-custom-error-message">Bitte wählen Sie einen Abo-Typ aus.</li>
    </ul>
</div>

# Plausi Notifications

The following classes are styled like .c-alerts but are hidden per default. Example: .plausi-error is made visible with the additional class .plausi-error-open.

.plausi-success,
.plausi-notice,
.plausi-warning,
.plausi-error {
    display: none !important;

    & {
        &-open {
            display: block !important;
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12

.plausi-success

.plausi-succes.plausi-success-open

hide code

<div class="plausi-success">
    <p>
    .plausi-success
    </p>
</div>
<div class="plausi-success plausi-success-open">
    <p>
    .plausi-succes.plausi-success-open
    </p>
</div>

hide code

<div class="p4u-login-info p4u-error">
    <p>
    Dieser Premium-Account hat derzeit kein gültiges Abo. Bitte wenden Sie sich an unseren 
    <a class="c-link" href="https://www.pharma4u.de/allgemein/rechtliches/kontakt/">Kunden-Support</a>.
    </p>
</div>

← Spacings Blockquote →