extends ../../_layout/default.pug

block canonical
  link(rel='canonical' href='https://coreui.io/docs/components/list-group/')

block breadcrumb
  +breadcrumb(
    [
      { href: '#', label: 'Home'},
      { label: 'Components'},
      { label: 'Base'},
      'List group'
    ],
  )

block view
  +docs-components('https://coreui.io/docs/components/list-group/')
  .row
    .col-12
      .card.mb-4
        .card-header
          strong List group
          span.small.ms-1 Basic example
        .card-body
          p.text-body-secondary.small The default list group is an unordered list with items and the proper CSS classes. Build upon it with the options that follow, or with your CSS as required.
          +example('https://coreui.io/docs/components/list-group/#basic-example')
            ul.list-group
              li.list-group-item Cras justo odio
              li.list-group-item Dapibus ac facilisis in
              li.list-group-item Morbi leo risus
              li.list-group-item Porta ac consectetur ac
              li.list-group-item Vestibulum at eros
    .col-12
      .card.mb-4
        .card-header
          strong List group
          span.small.ms-1 active items
        .card-body
          p.text-body-secondary.small
            | Attach 
            code .active
            |  to a 
            code .list-group-item
            |  to show the current active selection.
          +example('https://coreui.io/docs/components/list-group/#active-items')
            ul.list-group
              li.list-group-item.active Cras justo odio
              li.list-group-item Dapibus ac facilisis in
              li.list-group-item Morbi leo risus
              li.list-group-item Porta ac consectetur ac
              li.list-group-item Vestibulum at eros
    .col-12
      .card.mb-4
        .card-header
          strong List group
          span.small.ms-1 disabled items
        .card-body
          p.text-body-secondary.small
            | Attach 
            code .disabled
            |  to a 
            code .list-group-item
            |  to make it appear disabled. Remark that some of the elements with 
            code .disabled
            |  will also require custom JavaScript to disable their click events (e.g., links).
          +example('https://coreui.io/docs/components/list-group/#disabled-items')
            ul.list-group
              li.list-group-item.disabled(aria-disabled='true') A disabled item
              li.list-group-item A second item
              li.list-group-item A third item
              li.list-group-item A fourth item
              li.list-group-item And a fifth one
    .col-12
      .card.mb-4
        .card-header
          strong List group
          span.small.ms-1 disabled links
        .card-body
          .list-group
            p.text-body-secondary.small
              | Use 
              code
                = '<a>'
              | s or 
              code
                = '<button>'
              | s to create
              em actionable
              |  list group items with hover, disabled, and active states by adding 
              code .list-group-item-action
              | . We separate these pseudo-classes to ensure list groups made of non-interactive elements (like 
              code
                = '<li>'
              | s or 
              code
                = '<div>'
              | s) don’t provide a click or tap affordance.
            p.text-body-secondary.small
              | Be sure to
              strong
                |  not use the standard 
                code .btn
                |  classes here
              | .
            +example('https://coreui.io/docs/components/list-group/#links-and-buttons')
              .list-group
                a.list-group-item.list-group-item-action.active(href='#' aria-current='true') The current link item
                a.list-group-item.list-group-item-action(href='#') A second link item
                a.list-group-item.list-group-item-action(href='#') A third link item
                a.list-group-item.list-group-item-action(href='#') A fourth link item
                a.list-group-item.list-group-item-action.disabled(href='#' tabindex='-1' aria-disabled='true') A disabled link item
    .col-12
      .card.mb-4
        .card-header
          strong List group
          span.small.ms-1 disabled buttons
        .card-body
          .list-group
            p.text-body-secondary.small
              | With 
              code
                = '<button>'
              | s, you can also make use of the 
              code disabled
              |  attribute instead of the 
              code .disabled
              |  class. Sadly, 
              code
                = '<a>'
              | s don’t support the disabled attribute.
            +example('https://coreui.io/docs/components/list-group/#links-and-buttons')
              .list-group
                button.list-group-item.list-group-item-action.active(type='button' aria-current='true').
                  The current button
                button.list-group-item.list-group-item-action(type='button') A second item
                button.list-group-item.list-group-item-action(type='button') A third button item
                button.list-group-item.list-group-item-action(type='button') A fourth button item
                button.list-group-item.list-group-item-action(type='button' disabled) A disabled button item
    .col-12
      .card.mb-4
        .card-header
          strong List group
          span.small.ms-1 flush
        .card-body
          p.text-body-secondary.small
            | Add 
            code .list-group-flush
            |  to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).
          +example('https://coreui.io/docs/components/list-group/#flush')
            ul.list-group.list-group-flush
              li.list-group-item An item
              li.list-group-item A second item
              li.list-group-item A third item
              li.list-group-item A fourth item
              li.list-group-item And a fifth one
    .col-12
      .card.mb-4
        .card-header
          strong List group
          span.small.ms-1 horizontal
        .card-body
          p.text-body-secondary.small
            | Add 
            code .list-group-horizontal
            |  to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant 
            code .list-group-horizontal-{sm|md|lg|xl|xxl}
            |  to make a list group horizontal starting at that breakpoint’s 
            code min-width
            | . Currently
            strong  horizontal list groups cannot be combined with flush list groups.
          p.text-body-secondary.small
            strong ProTip:
            |  Want equal-width list group items when horizontal? Add 
            code .flex-fill
            |  to each list group item.
          .list-group
            +example('https://coreui.io/docs/components/list-group/#horizontal')
              ul.list-group.list-group-horizontal.mb-1
                li.list-group-item An item
                li.list-group-item A second item
                li.list-group-item A third item
              ul.list-group.list-group-horizontal-sm.mb-1
                li.list-group-item An item
                li.list-group-item A second item
                li.list-group-item A third item
              ul.list-group.list-group-horizontal-md.mb-1
                li.list-group-item An item
                li.list-group-item A second item
                li.list-group-item A third item
              ul.list-group.list-group-horizontal-lg.mb-1
                li.list-group-item An item
                li.list-group-item A second item
                li.list-group-item A third item
              ul.list-group.list-group-horizontal-xl.mb-1
                li.list-group-item An item
                li.list-group-item A second item
                li.list-group-item A third item
              ul.list-group.list-group-horizontal-xxl.mb-1
                li.list-group-item An item
                li.list-group-item A second item
                li.list-group-item A third item
    .col-12
      .card.mb-4
        .card-header
          strong List group
          span.small.ms-1 contextual classes
        .card-body
          p.text-body-secondary.small Use contextual classes to style list items with a stateful background and color.
          +example('https://coreui.io/docs/components/list-group/#contextual-classes')
            ul.list-group
              li.list-group-item Dapibus ac facilisis in
              li.list-group-item.list-group-item-primary This is a primary list group item
              li.list-group-item.list-group-item-secondary This is a secondary list group item
              li.list-group-item.list-group-item-success This is a success list group item
              li.list-group-item.list-group-item-danger This is a danger list group item
              li.list-group-item.list-group-item-warning This is a warning list group item
              li.list-group-item.list-group-item-info This is a info list group item
              li.list-group-item.list-group-item-light This is a light list group item
              li.list-group-item.list-group-item-dark This is a dark list group item
    .col-12
      .card.mb-4
        .card-header
          strong List group
          span.small.ms-1
            | contextual with 
            code .action
        .card-body
          p.text-body-secondary.small
            | Contextual classes also work with 
            code .list-group-item-action
            | . Note the addition of the hover styles here not present in the previous example. Also supported is the 
            code .active
            |  state; apply it to indicate an active selection on a contextual list group item.
          +example('https://coreui.io/docs/components/list-group/#contextual-classes')
            .list-group
              a.list-group-item.list-group-item-action(href='#') Dapibus ac facilisis in
              a.list-group-item.list-group-item-action.list-group-item-primary(href='#')
                | This is a primary list
                | group item
              a.list-group-item.list-group-item-action.list-group-item-secondary(href='#')
                | This is a secondary
                | list group item
              a.list-group-item.list-group-item-action.list-group-item-success(href='#')
                | This is a success list
                | group item
              a.list-group-item.list-group-item-action.list-group-item-danger(href='#')
                | This is a danger list
                | group item
              a.list-group-item.list-group-item-action.list-group-item-warning(href='#')
                | This is a warning list
                | group item
              a.list-group-item.list-group-item-action.list-group-item-info(href='#')
                | This is a info list group
                | item
              a.list-group-item.list-group-item-action.list-group-item-light(href='#')
                | This is a light list group
                | item
              a.list-group-item.list-group-item-action.list-group-item-dark(href='#')
                | This is a dark list group
                | item
    .col-12
      .card.mb-4
        .card-header
          strong List group
          span.small.ms-1 with badges
        .card-body
          p.text-body-secondary.small
            | Add badges to any list group item to show unread counts, activity, and more with the help of some
            a(href='https://coreui.io/docs/utilities/flex/') utilities
            | .
          +example('https://coreui.io/docs/components/list-group/#with-badges')
            ul.list-group
              li.list-group-item.d-flex.justify-content-between.align-items-center
                | A list item
                span.badge.bg-primary.rounded-pill 14
              li.list-group-item.d-flex.justify-content-between.align-items-center
                | A second list item
                span.badge.bg-primary.rounded-pill 2
              li.list-group-item.d-flex.justify-content-between.align-items-center
                | A third list item
                span.badge.bg-primary.rounded-pill 1
    .col-12
      .card.mb-4
        .card-header
          stron List group
          span.small.ms-1 custom content
        .card-body
          p.text-body-secondary.small
            | Add nearly any HTML within, even for linked list groups like the one below, with the help of
            a(href='https://coreui.io/docs/utilities/flex/') flexbox utilities
            | .
          +example('https://coreui.io/docs/components/list-group/#custom-content')
            .list-group
              a.list-group-item.list-group-item-action.flex-column.align-items-start.active(href='#')
                .d-flex.w-100.justify-content-between
                  h5.mb-1 List group item heading
                  small 3 days ago
                p.mb-1
                  | Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
                small Donec id elit non mi porta.
              a.list-group-item.list-group-item-action.flex-column.align-items-start(href='#')
                .d-flex.w-100.justify-content-between
                  h5.mb-1 List group item heading
                  small.text-body-secondary 3 days ago
                p.mb-1
                  | Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
                small.text-body-secondary Donec id elit non mi porta.
              a.list-group-item.list-group-item-action.flex-column.align-items-start(href='#')
                .d-flex.w-100.justify-content-between
                  h5.mb-1 List group item heading
                  small.text-body-secondary 3 days ago
                p.mb-1
                  | Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
                small.text-body-secondary Donec id elit non mi porta.
  .row
    .col
      .card.mb-4
        .card-header
          strong  List group
          span.small.ms-1 tab Javascript plugin
        .card-body
          p.text-body-secondary.small
            | Use the tab JavaScript plugin—include it individually or through the compiled 
            code coreui.js
            |  file—to extend our list group to create tabbable panes of local content.
          +example('https://coreui.io/docs/components/list-group/#javascript-behavior')
            .row
              .col-4
                #list-tab.list-group(role='tablist')
                  a#list-home-list.list-group-item.list-group-item-action(data-coreui-toggle='tab', href='#list-home', role='tab', aria-controls='list-home', aria-selected='false') Home
                  a#list-profile-list.list-group-item.list-group-item-action.active(data-coreui-toggle='tab', href='#list-profile', role='tab', aria-controls='list-profile', aria-selected='true') Profile
                  a#list-messages-list.list-group-item.list-group-item-action(data-coreui-toggle='tab', href='#list-messages', role='tab', aria-controls='list-messages') Messages
                  a#list-settings-list.list-group-item.list-group-item-action(data-coreui-toggle='tab', href='#list-settings', role='tab', aria-controls='list-settings') Settings
              .col-8
                #nav-tabContent.tab-content
                  #list-home.tab-pane.fade(role='tabpanel', aria-labelledby='list-home-list')
                    p
                      | Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor. Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim tempor sunt voluptate consectetur exercitation id ut nulla. Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor. Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam minim.
                  #list-profile.tab-pane.fade.active.show(role='tabpanel', aria-labelledby='list-profile-list')
                    p
                      | Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum reprehenderit irure non commodo enim culpa commodo veniam incididunt veniam ad.
                  #list-messages.tab-pane.fade(role='tabpanel', aria-labelledby='list-messages-list')
                    p
                      | Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum voluptate. Irure Lorem et laboris nostrud amet cupidatat cupidatat anim do ut velit mollit consequat enim tempor. Consectetur est minim nostrud nostrud consectetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla laborum elit adipisicing pariatur cillum.
                  #list-settings.tab-pane.fade(role='tabpanel', aria-labelledby='list-settings-list')
                    p
                      | Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet culpa. Quis ullamco nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor eiusmod eu pariatur culpa mollit in irure.