Legend indicator

A component to indicate properties of elements.

Examples

  • Default
  • Primary
  • Info
  • Danger
  • Success
  • Warning
  • Dark
  • Light 
<ul class="list-inline">
  <li class="list-inline-item d-inline-flex align-items-center">
    <span class="legend-indicator"></span>Default
  </li>
  <li class="list-inline-item d-inline-flex align-items-center">
    <span class="legend-indicator bg-primary"></span>Primary
  </li>
  <li class="list-inline-item d-inline-flex align-items-center">
    <span class="legend-indicator bg-info"></span>Info
  </li>
  <li class="list-inline-item d-inline-flex align-items-center">
    <span class="legend-indicator bg-danger"></span>Danger
  </li>
  <li class="list-inline-item d-inline-flex align-items-center">
    <span class="legend-indicator bg-success"></span>Success
  </li>
  <li class="list-inline-item d-inline-flex align-items-center">
    <span class="legend-indicator bg-warning"></span>Warning
  </li>
  <li class="list-inline-item d-inline-flex align-items-center">
    <span class="legend-indicator bg-dark"></span>Dark
  </li>
  <li class="list-inline-item d-inline-flex align-items-center">
    <span class="legend-indicator bg-light"></span>Light
  </li>
</ul>
Copy