1. Components

Points Badge Legacy

The progress indicates how many points a student currently has on one particular question, exercise or chapter.

Examples of common uses.

Open example in new tab 


<span class="badge">
  10 points
</span>

<span class="badge" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="">
  0 / 40
</span>

<span class="badge badge-warning" data-toggle="tooltip" data-placement="bottom" title="">
    37 / 40
</span>

<span class="badge badge-success" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="">
  40 / 40
</span>

Known Issues

  • Many badges currently have empty strings added as tooltips.
  • The text is very small.
  • Without any context, assistive technology doesn’t make the meaning of the numbers very clear.

Legacy Component

This component has known issues and is in need of work.

Use it with caution.

If you need to use it, consider addressing some of the known issues at the same time as you're creating something new with it.

Discuss this

If you have questions, ideas for improvements or feedback on using these guidelines, you can join the disucssion in this GitHub issue.