List Groups

Standard, default list group

  • List Group Item #1
  • List Group Item #2
  • List Group Item #3
  • List Group Item #4
= ui.nfg :list_group do
  = ui.nfg :list_group_item, body: 'List Group Item #1'
  = ui.nfg :list_group_item, body: 'List Group Item #2'
  = ui.nfg :list_group_item, body: 'List Group Item #3'
  = ui.nfg :list_group_item, body: 'List Group Item #4'
<ul class="list-group">
  <li class="list-group-item">List Group Item #1</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">List Group Item #4</li>
</ul>

List groups made of custom wrapper elements

Div and link version of list group example

Non-action version

List Group Item #1 List Group Item #2 List Group Item #3 List Group Item #4 
= ui.nfg :list_group, as: :div, class: 'mb-4' do
  = ui.nfg :list_group_item, as: :a, body: 'List Group Item #1', href: '#'
  = ui.nfg :list_group_item, as: :a, body: 'List Group Item #2', href: '#'
  = ui.nfg :list_group_item, as: :a, body: 'List Group Item #3', href: '#'
  = ui.nfg :list_group_item, as: :a, body: 'List Group Item #4', href: '#'
<div class="list-group mb-4"><a class="list-group-item" href="#">List Group Item #1</a><a class="list-group-item" href="#">List Group Item #2</a><a class="list-group-item" href="#">List Group Item #3</a><a class="list-group-item" href="#">List Group Item #4</a></div>

Action version

List Group Item #1 List Group Item #2 List Group Item #3 List Group Item #4 
= ui.nfg :list_group, as: :div, class: 'mb-4' do
  = ui.nfg :list_group_item, as: :a, action: true, body: 'List Group Item #1', href: '#'
  = ui.nfg :list_group_item, as: :a, action: true, body: 'List Group Item #2', href: '#'
  = ui.nfg :list_group_item, as: :a, action: true, body: 'List Group Item #3', href: '#'
  = ui.nfg :list_group_item, as: :a, action: true, body: 'List Group Item #4', href: '#'
<div class="list-group mb-4"><a class="list-group-item list-group-item-action" href="#">List Group Item #1</a><a class="list-group-item list-group-item-action" href="#">List Group Item #2</a><a class="list-group-item list-group-item-action" href="#">List Group Item #3</a><a class="list-group-item list-group-item-action" href="#">List Group Item #4</a></div>

Flush list group with / without trait

  • Optioned Flush List Group Item #1
  • List Group Item #2
  • List Group Item #3
  • List Group Item #4
= ui.nfg :list_group, flush: true, class: 'mb-4' do
  = ui.nfg :list_group_item, body: 'Optioned Flush List Group Item #1'
  = ui.nfg :list_group_item, body: 'List Group Item #2'
  = ui.nfg :list_group_item, body: 'List Group Item #3'
  = ui.nfg :list_group_item, body: 'List Group Item #4'
<ul class="list-group mb-4 list-group-flush">
  <li class="list-group-item">Optioned Flush List Group Item #1</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">List Group Item #4</li>
</ul>
  • Flush Traited List Group Item #1
  • List Group Item #2
  • List Group Item #3
  • List Group Item #4
= ui.nfg :list_group, :flush do
  = ui.nfg :list_group_item, body: 'Flush Traited List Group Item #1'
  = ui.nfg :list_group_item, body: 'List Group Item #2'
  = ui.nfg :list_group_item, body: 'List Group Item #3'
  = ui.nfg :list_group_item, body: 'List Group Item #4'
<ul class="list-group list-group-flush">
  <li class="list-group-item">Flush Traited List Group Item #1</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">List Group Item #4</li>
</ul>

List groups with themeable list group items

Thematic list group items

  • No theme
  • List Group Item - Primary
  • List Group Item - Secondary
  • List Group Item - Success
  • List Group Item - Info
  • List Group Item - Warning
  • List Group Item - Danger
  • List Group Item - Light
  • List Group Item - Dark
= ui.nfg :list_group do
  = ui.nfg :list_group_item, body: 'No theme'
  = ui.nfg :list_group_item, theme: :primary, body: 'List Group Item - Primary'
  = ui.nfg :list_group_item, theme: :secondary, body: 'List Group Item - Secondary'
  = ui.nfg :list_group_item, theme: :success, body: 'List Group Item - Success'
  = ui.nfg :list_group_item, theme: :info, body: 'List Group Item - Info'
  = ui.nfg :list_group_item, theme: :warning, body: 'List Group Item - Warning'
  = ui.nfg :list_group_item, theme: :danger, body: 'List Group Item - Danger'
  = ui.nfg :list_group_item, theme: :light, body: 'List Group Item - Light'
  = ui.nfg :list_group_item, theme: :dark, body: 'List Group Item - Dark'
<ul class="list-group">
  <li class="list-group-item">No theme</li>
  <li class="list-group-item list-group-item-primary">List Group Item - Primary</li>
  <li class="list-group-item list-group-item-secondary">List Group Item - Secondary</li>
  <li class="list-group-item list-group-item-success">List Group Item - Success</li>
  <li class="list-group-item list-group-item-info">List Group Item - Info</li>
  <li class="list-group-item list-group-item-warning">List Group Item - Warning</li>
  <li class="list-group-item list-group-item-danger">List Group Item - Danger</li>
  <li class="list-group-item list-group-item-light">List Group Item - Light</li>
  <li class="list-group-item list-group-item-dark">List Group Item - Dark</li>
</ul>

Thematic list group items with action / interaction

= ui.nfg :list_group do
  = ui.nfg :list_group_item, action: true, as: :a, href: '#', body: 'No theme'
  = ui.nfg :list_group_item, theme: :primary, action: true, as: :a, href: '#', body: 'List Group Item - Primary'
  = ui.nfg :list_group_item, theme: :secondary, action: true, as: :a, href: '#', body: 'List Group Item - Secondary'
  = ui.nfg :list_group_item, theme: :success, action: true, as: :a, href: '#', body: 'List Group Item - Success'
  = ui.nfg :list_group_item, theme: :info, action: true, as: :a, href: '#', body: 'List Group Item - Info'
  = ui.nfg :list_group_item, theme: :warning, action: true, as: :a, href: '#', body: 'List Group Item - Warning'
  = ui.nfg :list_group_item, theme: :danger, action: true, as: :a, href: '#', body: 'List Group Item - Danger'
  = ui.nfg :list_group_item, theme: :light, action: true, as: :a, href: '#', body: 'List Group Item - Light'
  = ui.nfg :list_group_item, theme: :dark, action: true, as: :a, href: '#', body: 'List Group Item - Dark'
<ul class="list-group"><a class="list-group-item list-group-item-action" href="#">No theme</a><a class="list-group-item list-group-item-primary list-group-item-action" href="#">List Group Item - Primary</a><a class="list-group-item list-group-item-secondary list-group-item-action" href="#">List Group Item - Secondary</a><a class="list-group-item list-group-item-success list-group-item-action" href="#">List Group Item - Success</a><a class="list-group-item list-group-item-info list-group-item-action" href="#">List Group Item - Info</a><a class="list-group-item list-group-item-warning list-group-item-action" href="#">List Group Item - Warning</a><a class="list-group-item list-group-item-danger list-group-item-action" href="#">List Group Item - Danger</a><a class="list-group-item list-group-item-light list-group-item-action" href="#">List Group Item - Light</a><a class="list-group-item list-group-item-dark list-group-item-action" href="#">List Group Item - Dark</a></ul>

Active list group item

  • List Group Item #1 - Active
  • List Group Item #2
  • List Group Item #3
  • List Group Item #4
= ui.nfg :list_group do
  = ui.nfg :list_group_item, active: true, body: 'List Group Item #1 - Active'
  = ui.nfg :list_group_item, body: 'List Group Item #2'
  = ui.nfg :list_group_item, body: 'List Group Item #3'
  = ui.nfg :list_group_item, body: 'List Group Item #4'
<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">List Group Item #4</li>
</ul>

Disabled list group item

  • List Group Item #1 - Disabled
  • List Group Item #2
  • List Group Item #3
  • List Group Item #4
= ui.nfg :list_group do
  = ui.nfg :list_group_item, disabled: true, body: 'List Group Item #1 - Disabled'
  = ui.nfg :list_group_item, body: 'List Group Item #2'
  = ui.nfg :list_group_item, body: 'List Group Item #3'
  = ui.nfg :list_group_item, body: 'List Group Item #4'
<ul class="list-group">
  <li class="list-group-item disabled" tabindex="-1">List Group Item #1 - Disabled</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">List Group Item #4</li>
</ul>

List group item with a badge

  • List Group Item #1 - No Theme100
  • List Group Item #2 with Theme - auto applied to badge32
  • List Group Item #3
  • List Group Item #4
= ui.nfg :list_group do
  = ui.nfg :list_group_item, body: 'List Group Item #1 - No Theme', badge: '100'
  = ui.nfg :list_group_item, theme: :success, body: 'List Group Item #2 with Theme - auto applied to badge', badge: '32'
  = ui.nfg :list_group_item, body: 'List Group Item #3'
  = ui.nfg :list_group_item, body: 'List Group Item #4'
<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">List Group Item #1 - No Theme<span class="badge badge-primary badge-pill">100</span></li>
  <li class="list-group-item list-group-item-success d-flex justify-content-between align-items-center">List Group Item #2 with Theme - auto applied to badge<span class="badge badge-success badge-pill">32</span></li>
  <li class="list-group-item">List Group Item #3</li>
  <li class="list-group-item">List Group Item #4</li>
</ul>