List Group

Examples for the ss-c-list-group module.

Default

  • An item
  • An active item
  • A third item
  • A disabled item
HTML 
<ul class="ss-c-list-group">
            <li class="ss-c-list-group__item">An item</li>
            <li class="ss-c-list-group__item ss-c-list-group__item--active">An active item</li>
            <li class="ss-c-list-group__item">A third item</li>
            <li class="ss-c-list-group__item ss-c-list-group__item--disabled">A disabled item</li>
        </ul>

Variants

  • Primary
  • Success
  • Warning
  • Danger
  • Info
HTML 
<ul class="ss-c-list-group">
            <li class="ss-c-list-group__item ss-c-list-group__item--primary">Primary</li>
            <li class="ss-c-list-group__item ss-c-list-group__item--success">Success</li>
            <li class="ss-c-list-group__item ss-c-list-group__item--warning">Warning</li>
            <li class="ss-c-list-group__item ss-c-list-group__item--danger">Danger</li>
            <li class="ss-c-list-group__item ss-c-list-group__item--info">Info</li>
        </ul>

Flush

  • No outer borders
  • Just inner separators
HTML 
<ul class="ss-c-list-group ss-c-list-group--flush">
            <li class="ss-c-list-group__item">No outer borders</li>
            <li class="ss-c-list-group__item">Just inner separators</li>
        </ul>

Numbered

  1. First
  2. Second
  3. Third
HTML 
<ol class="ss-c-list-group ss-c-list-group--numbered">
            <li class="ss-c-list-group__item">First</li>
            <li class="ss-c-list-group__item">Second</li>
            <li class="ss-c-list-group__item">Third</li>
        </ol>