Badges

Create badges to add an item count or create a visual numbered list.

 

Anatomy of the Code Snippet

  _div style=_background-color_ #ebedee; padding_ 20px 20px 20px 20px; overflow_ hidden;__Your Text Here__div_ (8).png

  

Steps to Adding a Badge

1. Copy the code snippet:

<span class="ic-badge">9</span>

 

2. Open a content page in Canvas and click "Edit." Open the HTML editor.

3. Paste the code in the box. Replace "9" with the text you want on the badge.

4. Click "Save" to preview.

 

Customization Options 

To change the badge style, add a modifier (highlighted in yellow) to the code. See the table below for options:

<span class="ic-badge ic-badge--success">9</span>

Modifier Badge Preview
[no modifier] 1
ic-badge--success 2
ic-badge--alert 3
ic-badge--danger 4