Alerts
TIP
Alerts are used to provide feedback messages for typical user actions. They are used to inform the user about the status of an action or to provide feedback on the result of an action.
- Related: Notification Layer.
Open TODOs:
- remove the default margin-top and -bottom from
.c-alertbecause this is bad practice. The margin should be set in the component that uses the alert.
All Colors / Types
.c-alert.c-alert.-notice.c-alert.-simple.c-alert.-highlight.c-alert.-success.c-alert.-warning.c-alert.-error.c-alert.-defektur
c-alert
c-alert
c-alert -notice
c-alert -notice
c-alert -simple
c-alert -simple
c-alert -highlight
c-alert -highlight
c-alert -success
c-alert -success
c-alert -warning
c-alert -warning
c-alert -defektur
c-alert -error
c-alert -defektur
c-alert -defektur
WARNING
The whole content inside the .c-alert-Div has to be surrounded by a Div or p-Tag for the icon to be positioned correctly.
Show Code
<div class="h-flex h-flex-row gap-s h-equal-sizing -m-t-m">
<div class="c-alert">
<p><strong>c-alert</strong></p>
</div>
<div class="c-alert -has-border">
<p><strong>c-alert</strong></p>
</div>
</div>
<div class="h-flex h-flex-row gap-s h-equal-sizing -m-t-m">
<div class="c-alert -notice">
<p><strong>c-alert -notice</strong></p>
</div>
<div class="c-alert -notice -has-border">
<p><strong>c-alert -notice</strong></p>
</div>
</div>
<div class="h-flex h-flex-row gap-s h-equal-sizing -m-t-m">
<div class="c-alert -simple">
<p><strong>c-alert -simple</strong></p>
</div>
<div class="c-alert -simple -has-border">
<p><strong>c-alert -simple</strong></p>
</div>
</div>
<div class="h-flex h-flex-row gap-s h-equal-sizing -m-t-m">
<div class="c-alert -highlight">
<p><strong>c-alert -highlight</strong></p>
</div>
<div class="c-alert -highlight -has-border">
<p><strong>c-alert -highlight</strong></p>
</div>
</div>
<div class="h-flex h-flex-row gap-s h-equal-sizing -m-t-m">
<div class="c-alert -success">
<p><strong>c-alert -success</strong></p>
</div>
<div class="c-alert -success -has-border">
<p><strong>c-alert -success</strong></p>
</div>
</div>
<div class="h-flex h-flex-row gap-s h-equal-sizing -m-t-m">
<div class="c-alert -warning">
<p><strong>c-alert -warning</strong></p>
</div>
<div class="c-alert -warning -has-border">
<p><strong>c-alert -warning</strong></p>
</div>
</div>
<div class="h-flex h-flex-row gap-s h-equal-sizing -m-t-m">
<div class="c-alert -error">
<p><strong>c-alert -defektur</strong></p>
</div>
<div class="c-alert -error -has-border">
<p><strong>c-alert -error</strong></p>
</div>
</div>
<div class="h-flex h-flex-row gap-s h-equal-sizing -m-t-m">
<div class="c-alert -defektur">
<p><strong>c-alert -defektur</strong></p>
</div>
<div class="c-alert -defektur -has-border">
<p><strong>c-alert -defektur</strong></p>
</div>
</div>Size Modifier
.c-alert.-small
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Borders
.c-alert.-has-border
c-alert -has-border
.c-alert.-has-border.-large-border
c-alert -has-border -large-border
Arrows
Adds an arrow as pseudo-element in the specified direction:.c-alert.-arrow-[up/down]-[left/right/center]
c-alert -arrow-up-left
c-alert -arrow-up-center
c-alert -arrow-down-right
Using Icons and Arrows
WARNING
The arrow-modifier class doesn't work in combination with the icon (also an pseudo-element). To use both, the icon has to be placed inside the content.
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 erfahrenShow 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
Any icon available in $fa-icon-map can be used here as modifier class like this: .-user, .download, .-medical, .-child, .-patients, .-pills, .-animal
Full list, see: FA Icon/#icon-map
c-alert -user
c-alert -download
c-alert -medical
c-alert -child
c-alert -pills
c-alert -animal
c-alert -animal
c-alert -star
Show Code
<div class="c-alert m-y-xxs -small -user">
<p><strong>c-alert -user</strong></p>
</div>
<div class="c-alert m-y-xxs -small -download">
<p><strong>c-alert -download</strong></p>
</div>
<div class="c-alert m-y-xxs -small -medical">
<p><strong>c-alert -medical</strong></p>
</div>
<div class="c-alert m-y-xxs -small -child">
<p><strong>c-alert -child</strong></p>
</div>
<div class="c-alert m-y-xxs -small -pills">
<p><strong>c-alert -pills</strong></p>
</div>
<div class="c-alert m-y-xxs -small -fingerprint">
<p><strong>c-alert -animal</strong></p>
</div>
<div class="c-alert m-y-xxs -small -animal">
<p><strong>c-alert -animal</strong></p>
</div>
<div class="c-alert m-y-xxs -small -star">
<p><strong>c-alert -star</strong></p>
</div>Example with Links
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Testlink.
Another Testlink.Example with Button
Sie haben diesen Ausgangsstoff bereits in der Vergangenheit geprüft. Zuletzt mit dem Prüfdatum 22.07.2020.
Daten übernehmen
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.
Show Code
.plausi-success,
.plausi-notice,
.plausi-warning,
.plausi-error {
display: none !important;
& {
&-open {
display: block !important;
}
}
}.plausi-success
.plausi-succes.plausi-success-open
Pp4u-Error / Parsley Error
.parsley-errors-list and .p4u-error are also styled like .c-alert.-error.
Dieser Premium-Account hat derzeit kein gültiges Abo.
.parsley-errors-list is hidden per default and made visible with the class .filled.