Let us know what you think about the new Building Blocks

List Group

By Harry Manchanda

F6
#
How do I use This?

List Group Component that helps you display a set of content with specific list items. Great for sidebars, off-canvas, or mobile menus.

HTML
<ul class="list-group">
  <li class="list-group-item active">List Group Item 1 (Active)</li>
  <li class="list-group-item">List Group Item 2</li>
  <li class="list-group-item">List Group Item 3</li>
  <li class="list-group-item disabled">List Group Item 4 (Disabled)</li>
</ul>

$list-group-background: $white;
$list-group-active-background: $primary-color;
$list-group-hover-background: $light-gray;
$list-group-disabled-background: $white;
$list-group-font-color: $body-font-color;
$list-group-font-disabled-color: $dark-gray;
$list-group-font-active-color: $white;
$list-group-border: 1px solid $light-gray;
$list-group-active-border: 1px solid $primary-color;
$list-group-shadow: none;
$list-group-border-radius: $global-radius;
$list-group-padding: $global-padding;
$list-group-margin: $global-margin;

.list-group {
  margin-bottom: $list-group-margin;
  border: $list-group-border;
  border-radius: $list-group-border-radius;
  background: $list-group-background;
  box-shadow: $list-group-shadow;
  overflow: hidden;
  color: $list-group-font-color;

  & > :last-child {
    margin-bottom: 0;
  }
}

.list-group-item {
  padding: $list-group-padding;
  border-bottom: $list-group-border;

  & > :last-child {
    margin-bottom: 0;
    border-bottom: none;
  }

  &.active {
    color: $list-group-font-active-color;
    background-color: $list-group-active-background;
    border-color: $list-group-active-border;
  }

  &:hover, &:focus {
    background-color: $list-group-hover-background;
    &.active {
      background-color: $list-group-active-background;
    }
  }

  &.disabled,
  &[disabled] {
    &,
    &:hover, &:focus {
      color: $list-group-font-disabled-color;
      cursor: not-allowed;
      background-color: $list-group-disabled-background;
    }
  }
}


.list-group {
  margin-bottom: 1rem;
  border: 1px solid #e6e6e6;
  border-radius: 0;
  background: #fefefe;
  box-shadow: none;
  overflow: hidden;
  color: #0a0a0a;
}

.list-group > :last-child {
  margin-bottom: 0;
}

.list-group-item {
  padding: 1rem;
  border-bottom: 1px solid #e6e6e6;
}

.list-group-item > :last-child {
  margin-bottom: 0;
  border-bottom: none;
}

.list-group-item.active {
  color: #fefefe;
  background-color: #1779ba;
  border-color: 1px solid #1779ba;
}

.list-group-item:hover, .list-group-item:focus {
  background-color: #e6e6e6;
}

.list-group-item:hover.active, .list-group-item:focus.active {
  background-color: #1779ba;
}

.list-group-item.disabled, .list-group-item.disabled:hover, .list-group-item.disabled:focus, .list-group-item[disabled], .list-group-item[disabled]:hover, .list-group-item[disabled]:focus {
  color: #8a8a8a;
  cursor: not-allowed;
  background-color: #fefefe;
}

JS