Legend indicator

A component to indicate properties of elements.

Examples

  • Default
  • Primary
  • Info
  • Danger
  • Success
  • Warning
  • Navy
  • 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-navy"></span>Navy
                        </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>