Skip to content

Badges

We use badges to signify important information for users in the UI.

Badge with icon

Badge with icon

Development
1
2
3
4
5
6
<span class="badge badge-warning ez-badge">
    <svg class="ez-icon ez-icon--small">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../ez-icons.svg#warning"></use>
    </svg>
    Development
</span>

Contextual variations

GPL Development Trial
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<span class="badge badge-info ez-badge">GPL</span>
<span class="badge badge-warning ez-badge">
    <svg class="ez-icon ez-icon--small">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../ez-icons.svg#warning"></use>
    </svg>
    Development
</span>
<span class="badge badge-danger ez-badge">
    <svg class="ez-icon ez-icon--small">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../ez-icons.svg#warning"></use>
    </svg>
    Trial
</span>

Small badges

Small badges

Draft
1
<span class="badge badge-secondary ez-badge ez-badge--small">Draft</span>

Contextual variations

Draft Quick review Publish VIEWING
1
2
3
4
<span class="badge badge-secondary ez-badge ez-badge--small">Draft</span>
<span class="badge badge-secondary ez-badge ez-badge--small">Quick review</span>
<span class="badge badge-secondary ez-badge ez-badge--small">Publish</span>
<span class="badge badge-warning ez-badge ez-badge--small">VIEWING</span>

Contextual variations - Editing view specific case

Editing: Article in English (United Kingdom) under Home
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<div class="ez-details-items">
<span class="ez-details-items__connector">Editing:</span>
<span class="ez-badge ez-badge--small ez-details-items__pill ez-details-items__pill--content-type">
    <svg class="ez-icon ez-icon--small">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../ez-icons.svg#article"></use>
    </svg>
    Article
</span>
<span class="ez-details-items__connector ez-details-items__connector--small">in</span>
<span class="ez-badge ez-badge--small ez-details-items__pill ez-details-items__pill--language">English (United Kingdom)</span>
<span class="ez-details-items__connector ez-details-items__connector--small">under</span>
<span class="ez-badge ez-badge--small ez-details-items__pill ez-details-items__pill--location">Home</span>
</div>

Read the Docs