PatternLab (1.0.18)

Appearance

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.

Alert Types ​

.c-alert[-success, -notice, -warning, -error, -highlight, -defektur] 
+ [-has-border] 
+ [-dark]`

c-alert

c-alert -has-border

c-alert -dark

c-alert -notice

c-alert -notice -has-border

c-alert -notice -dark

c-alert -highlight

c-alert -highlight -has-border

c-alert -highlight -dark

c-alert -success

c-alert -success -has-border

c-alert -success -dark

c-alert -warning

c-alert -warning -has-border

c-alert -warning -dark

c-alert -error

c-alert -error -has-border

c-alert -error -dark

c-alert -defektur

c-alert -defektur -has-border

c-alert -defektur -dark

Show Code
html

<div class="h-flex h-flex-row gap-s h-equal-sizing m-0">
    <div class="c-alert">
        <p><strong>c-alert</strong></p>
    </div>
    <div class="c-alert -has-border">
        <p><strong>c-alert -has-border</strong></p>
    </div>
    <div class="c-alert -dark">
      <p><strong>c-alert -dark</strong></p>
    </div>
</div>

<div class="h-flex h-flex-row gap-s h-equal-sizing m-0">
    <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 -has-border</strong></p>
    </div>
    <div class="c-alert -notice -dark">
      <p><strong>c-alert -notice -dark</strong></p>
    </div>
</div>

<div class="h-flex h-flex-row gap-s h-equal-sizing m-0">
    <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 -has-border</strong></p>
    </div>
  <div class="c-alert -highlight -dark">
    <p><strong>c-alert -highlight -dark</strong></p>
  </div>
</div>

<div class="h-flex h-flex-row gap-s h-equal-sizing m-0">
    <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 -has-border</strong></p>
    </div>
    <div class="c-alert -success -dark">
      <p><strong>c-alert -success -dark</strong></p>
    </div>
</div>

<div class="h-flex h-flex-row gap-s h-equal-sizing m-0">
    <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 -has-border</strong></p>
    </div>
    <div class="c-alert -warning -dark">
      <p><strong>c-alert -warning -dark</strong></p>
    </div>
</div>

<div class="h-flex h-flex-row gap-s h-equal-sizing m-0">
    <div class="c-alert -error">
        <p><strong>c-alert -error</strong></p>
    </div>
    <div class="c-alert -error -has-border">
        <p><strong>c-alert -error -has-border</strong></p>
    </div>
    <div class="c-alert -error -dark">
        <p><strong>c-alert -error -dark</strong></p>
    </div>
</div>

<div class="h-flex h-flex-row gap-s h-equal-sizing m-0">
    <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 -has-border</strong></p>
    </div>
  <div class="c-alert -defektur -dark">
        <p><strong>c-alert -defektur -dark</strong></p>
    </div>
</div>

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.

Modifier Classes ​

Small Alert ​

.c-alert.-small

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Add Border ​

.c-alert.-has-border

c-alert -has-border

Add 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

Show Code
html
<div class="h-flex h-flex-row gap-m">
  <div class="c-alert -arrow-up-left -dark">
    <p><strong>c-alert -arrow-up-left</strong></p>
  </div>
  <div class="c-alert -arrow-up-center -warning -dark -has-border">
    <p><strong>c-alert -arrow-up-center</strong></p>
  </div>
  <div class="c-alert -arrow-down-right -highlight -has-border">
    <p><strong>c-alert -arrow-down-right</strong></p>
  </div>
</div>

WARNING

The arrow-modifier class doesn't work in combination with the icon (also a pseudo-element). To use both, the icon has to be placed inside the content.

c-alert -student -arrow-up-center

The -student style is used only on the pharma4u website (registration page).

Show Code
html
<div class="c-alert -student -arrow-up-center">
    <div class="h-flex h-flex-row h-vertical-center gap-m">
        <i class="fa fa-2x fa-user-graduate" aria-hidden="true"></i>
        <div>
            <strong>c-alert -student -arrow-up-center</strong>
            <p>
                The <code>-student</code> style is used only on the pharma4u website (registration page).
            </p>
        </div>
    </div>
</div>

Add Spinner ​

Show Code
html
<div class="c-alert -dark -spinner -highlight">
  <p><strong>c-alert -spinner</strong></p>
</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 -party

c-alert -pills

c-alert -animal

c-alert -animal

c-alert -star

Show Code
html
<div class="c-alert m-y-xxs -small -dark -user">
    <p><strong>c-alert -user</strong></p>
</div>
<div class="c-alert m-y-xxs -small -dark -download">
    <p><strong>c-alert -download</strong></p>
</div>
<div class="c-alert m-y-xxs -small -dark -medical">
    <p><strong>c-alert -medical</strong></p>
</div>
<div class="c-alert m-y-xxs -small -dark -child">
    <p><strong>c-alert -child</strong></p>
</div>
<div class="c-alert m-y-xxs -small -dark -party">
    <p><strong>c-alert -party</strong></p>
</div>
<div class="c-alert m-y-xxs -small -dark -pills">
    <p><strong>c-alert -pills</strong></p>
</div>
<div class="c-alert m-y-xxs -small -dark -fingerprint">
    <p><strong>c-alert -animal</strong></p>
</div>
<div class="c-alert m-y-xxs -small -dark -animal">
    <p><strong>c-alert -animal</strong></p>
</div>
<div class="c-alert m-y-xxs -small -dark -star">
    <p><strong>c-alert -star</strong></p>
</div>

Example with Button ​

Sie haben diesen Ausgangsstoff bereits in der Vergangenheit geprüft.

Show Code
html
<div class="c-alert -notice">
  <div class="h-flex h-flex-row h-vertical-center gap-s">
    <p>
      Sie haben diesen Ausgangsstoff bereits in der Vergangenheit geprüft.
    </p>
    <div class="h-flex-item h-flex-grow">
      <button type="button" class="c-btn -small -primary-outline -icon-left">
        <span class="fa fa-check" aria-hidden="true"></span>
        Daten übernehmen
      </button>
    </div>
  </div>
</div>

Plausi Notifications ​

The following classes are styled like .c-alerts but are hidden per default.

  • .plausi-success is made visible with the additional class .plausi-success-open.

.plausi-success

.plausi-succes.plausi-success-open

  • .parsley-errors-list and .p4u-error are also styled like .c-alert.-error.
  • .parsley-errors-list is hidden per default and made visible with the class .filled.
  • Bitte wählen Sie einen Abo-Typ aus.
  • Bitte wählen Sie einen Abo-Typ aus.

2026 - Pharma4u