Summary
Banners should be used to show application information. They act the same as
Alert pattern but the difference that there should only be one banner visible
on a page.
| Name |
Description |
Default Value |
role |
The role attribute is required and should be set to banner.
No values have been documented for this attribute.
|
|
aria-hidden |
The aria-hidden attribute is optional. It tells if the banner is visible or not. The value should be set to either false or true.
No values have been documented for this attribute.
|
|
| Name |
Description |
zui-banner |
The zui-banner class identifies an HTML element as a banner.
|
zui-banner-danger |
The zui-banner-danger class should be set on the same element that has the zui-banner class set. By setting the zui-banner-danger class you identity the banner as a dangerous message.
|
zui-banner-success |
The zui-banner-success class should be set on the same element that has the zui-banner class set. By setting the zui-banner-success class you identity the banner as a successful message.
|
zui-banner-warning |
The zui-banner-warning class should be set on the same element that has the zui-banner class set. By setting the zui-banner-warning class you identity the banner as a warning.
|
There are no events defined for this pattern.
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-banner-selector |
The selector that matches banners.
|
zui-banner-danger-selector |
The selector that matches dangerous banners.
|
zui-banner-success-selector |
The selector that matches success banners.
|
zui-banner-warning-selector |
The selector that matches warning banners.
|
zui-banner-info-background |
The background color of an information banner.
|
zui-banner-info-color |
The text color of an information banner.
|
zui-banner-info-link-color |
The anchor color of an information banner.
|
zui-banner-danger-background |
The background color of a dangerous banner.
|
zui-banner-danger-color |
The text color of a dangerous banner.
|
zui-banner-danger-link-color |
The anchor color of a dangerous banner.
|
zui-banner-success-background |
The background color of a success banner.
|
zui-banner-success-color |
The text color of a success banner.
|
zui-banner-success-link-color |
The anchor color of a success banner.
|
zui-banner-warning-background |
The background color of a warning banner.
|
zui-banner-warning-color |
The text color of a warning banner.
|
zui-banner-warning-link-color |
The anchor color of a warning banner.
|
Example
Your license is valid for 20 more days!
Your license is renewed!
Markup
<div class="zui-banner" role="banner" aria-hidden="false">
<strong>Did you know?</strong> ZUI is awesome!
</div>
