Summary
Alerts should be used to provide feedback to the user. They are intended to serve informational message, errors and
warnings.
It is possible to set a title for an alert. Simply add an element that has the class zui-alert-title
on it and it will act as the title.
In order to make alerts closable, simply add the close icon. JavaScript will automatically recognize it and close
the alert when you click on it.
| Name |
Description |
Default Value |
data-zui-alert-timeout |
When this attribute is set, it will close the alert after the given timeout. The value is in milliseconds.
No values have been documented for this attribute.
|
|
data-zui-alert-fade-speed |
When the data-zui-alert-fade-speed attribute is set, it will be used as the fadeout speed. The value is in milliseconds.
No values have been documented for this attribute.
|
|
role |
Depending on the type of alert the role attribute must be set. If the alert is an information message, the role attribute must be set to status. If the alert is a dangerous message or a warning message, the role attribute must be set to alert.
No values have been documented for this attribute.
|
|
| Name |
Description |
zui-alert |
The zui-alert class identifies an HTML element as an alert.
|
zui-alert-danger |
The zui-alert-danger class should be set on the same element that has the zui-alert class set. By setting the zui-alert-danger class you identity the alert as a dangerous message.
|
zui-alert-subtle |
The zui-alert-subtle class should be set on the same element that has the zui-alert class set. By setting the zui-alert-subtle class you identity the alert as a subtle message.
|
zui-alert-success |
The zui-alert-success class should be set on the same element that has the zui-alert class set. By setting the zui-alert-success class you identity the alert as a successful message.
|
zui-alert-title |
The zui-alert-title class should be set on the element that acts as the title of an alert.
|
zui-alert-warning |
The zui-alert-warning class should be set on the same element that has the zui-alert class set. By setting the zui-alert-warning class you identity the alert as a warning.
|
| Name |
Description |
zui-alert-closed |
The event that is triggered once an alert is closed.
|
There are no methods defined for this pattern.
There are no functions defined for this pattern.
There are no mixins defined for this pattern.
| Name |
Description |
zui-alert-danger-background |
The background color of a dangerous alert.
|
zui-alert-danger-border-color |
The border color of a dangerous alert.
|
zui-alert-danger-border |
The border of a dangerous alert.
|
zui-alert-info-background |
The background color of an information alert.
|
zui-alert-info-border-color |
The border color of an information alert.
|
zui-alert-info-border |
The border of an information alert.
|
zui-alert-success-background |
The background color of a success alert.
|
zui-alert-success-border-color |
The border color of a success alert.
|
zui-alert-success-border |
The border of a success alert.
|
zui-alert-warning-background |
The background color of a warning alert.
|
zui-alert-warning-border-color |
The border color of a warning alert.
|
zui-alert-warning-border |
The border of a warning alert.
|
zui-alert-subtle-background |
The background color of a subtle alert.
|
zui-alert-subtle-border-color |
The border color of a subtle alert.
|
zui-alert-subtle-border |
The border of a subtle alert.
|
zui-alert-font-icon-danger |
The icon character that is used for dangerous alerts.
|
zui-alert-font-icon-info |
The icon character that is used for information alerts.
|
zui-alert-font-icon-success |
The icon character that is used for success alerts.
|
zui-alert-font-icon-warning |
The icon character that is used for warning alerts.
|
zui-alert-font-icon-subtle |
The icon character that is used for warning alerts.
|
Example
Dangerous message
This is a message.
Success message
This is a message.
Warning message
This is a message.
Subtle message
This is a message.
Markup
<div class="zui-alert zui-alert-danger">
<p class="zui-alert-title">
<strong>Dangerous message</strong>
</p>
<p>
This is a message.
</p>
<span class="zui-icon zui-icon-x" role="button" tabindex="0"></span>
</div>
<div class="zui-alert zui-alert-success">
<p class="zui-alert-title">
<strong>Success message</strong>
</p>
<p>
This is a message.
</p>
<span class="zui-icon zui-icon-x" role="button" tabindex="0"></span>
</div>
<div class="zui-alert zui-alert-warning">
<p class="zui-alert-title">
<strong>Warning message</strong>
</p>
<p>
This is a message.
</p>
<span class="zui-icon zui-icon-x" role="button" tabindex="0"></span>
</div>
<div class="zui-alert zui-alert-subtle">
<p class="zui-alert-title">
<strong>Subtle message</strong>
</p>
<p>
This is a message.
</p>
<span class="zui-icon zui-icon-x" role="button" tabindex="0"></span>
</div>
