• CSS
• Layout
• Typography
• Buttons
• Form elements
• Images
• Pagination
• Badges

Badges

As with other elements, badges can be in different shapes when modified with classes like zo-radius or zo-round.

ZoaUI v0.1.6 Primary Success Error Info

Notifications 233

<p>
    ZoaUI
    <span class="zo-badge">v0.1.6</span>
    <span class="zo-badge zo-badge--primary zo--radius">Primary</span>
    <span class="zo-badge zo-badge--success zo--round">Success</span>
    <span class="zo-badge zo-badge--error zo--radius">Error</span>
    <span class="zo-badge zo-badge--info">Info</span>
</p>
<p>
    <a href="#" role="button" class="zo-btn zo-btn--default zo--radius">
        Notifications
        <span class="zo-badge zo-badge--error zo--round">233</span>
    </a>
</p>

Badges inside headings

In ZoaUI, badges are supported inside headings since v0.1.7.

Heading 1 Badge

Heading 2 Badge

<h1>
    Heading 1
    <span class="zo-badge zo-h1__badge">Badge</span>
</h1>
<h2>
    Heading 2
    <span class="zo-badge zo-badge--primary zo--round zo-h2__badge">Badge</span>
</h2>