Row Status Indicators

Guidelines:

• Each row in a list can include a colored bar which may indicate a specific status or state
• The bar should always be 8px wide and match the height of the row it resides in
• Indicator bars should always be left aligned to the row
• Indicator bars should use the same color styles as the Progress bars in N2 Styles

Indicators using danger/warning/success colors

.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.

.list-status-border Unknown