menu
White logo

Row Status Indicators

Guidelines:

Indicators using danger/warning/success colors
  • Failed
    Sep 2018
    453652
    Index Promotional Products/ Printed Apparel
  • Succeeded
    Sep 2018
    453652
    Index Promotional Products/ Printed Apparel
  • Succeeded
    Sep 2018
    453652
    Index Promotional Products/ Printed Apparel
  • Pending
    Sep 2018
    453652
    Index Promotional Products/ Printed Apparel
.list-status-border.bg-danger Failed
.list-status-border.bg-warning Pending
.list-status-border.bg-success Succeeded

Rails Helper

= list_row_status_indicator(color: "danger", label: "Failed")
= list_row_status_indicator(color: "warning", label: "Pending")
= list_row_status_indicator(color: "success", label: "Succeeded")

Usage Details

To add an indicator bar to a row, add it as a child of the List Group Item. It doesn't matter if the status bar is the first child. Don't forget to add content to the div (the 'label') for accessibility.

%ul.list-group
  %li.list-group-item.px-3.align-items-normal.py-2
    .list-status-border.bg-danger Failed
    .d-flex.flex-column.col-2.pl-0 Sep 2018
    .d-flex.flex-column.col-2 453652
    .d-flex.flex-column.col-8.text-center Index Promotional Products/ Printed Apparel
If a status color is not supplied, the indicator bar defaults to grey.
  • Unknown
    Sep 2018
    453652
    Index Promotional Products/ Printed Apparel
.list-status-border Unknown