Summary
Badges are meant to provide a visual identification of numeric values. They are not used for
anything other than integers. For textual representations, use the
status pattern.
There are no attributes defined for this pattern.
| Name |
Description |
zui-badge |
The zui-badge class identifies an HTML element as a badge. It is recommended that you use this class on a span element.
|
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-badge-selector |
The selector used to match badges.
|
zui-badge-background |
The background color of a badge.
|
zui-badge-color |
The text color of a badge.
|
Example
Hello Item 1
Hello Item 2
Hello Item 3
Markup
<span class="zui-badge">1</span>
<nav class="zui-navgroup zui-navgroup-horizontal">
<div class="zui-navgroup-inner">
<div class="zui-navgroup-primary">
<ul class="zui-nav">
<li><a href="http://example.com">Item <span class="zui-badge">123</span></a></li>
</ul>
</div>
</div>
</nav>
<div class="zui-tabs zui-horizontal-tabs" style="margin-top: 20px;">
<ul class="zui-tabs-menu" role="tablist">
<li role="presentation" class="zui-menu-item">
<a href="#tab1" role="tab" aria-selected="false"><strong>Item 1</strong></a>
</li>
<li role="presentation" class="zui-menu-item zui-active-tab">
<a href="#tab2" role="tab" aria-selected="true">
<strong>Item 2</strong>
<span class="zui-badge">12</span>
</a>
</li>
<li role="presentation" class="zui-menu-item">
<a href="#tab3" role="tab" aria-selected="false"><strong>Item 3</strong></a>
</li>
</ul>
<div class="zui-tabs-content">
<div role="tabpanel" aria-hidden="true" id="tab1" class="zui-tabs-pane">
Hello Item 1
</div>
<div role="tabpanel" aria-hidden="false" id="tab2" class="zui-tabs-pane zui-active-pane">
Hello Item 2
</div>
<div role="tabpanel" aria-hidden="true" id="tab3" class="zui-tabs-pane">
Hello Item 3
</div>
</div>
</div>
