List Group Notification
<ul class="list-group list-group-notification show-quick-actions-on-hover">
<li class="list-group-item list-group-item-flex list-group-item-primary">
<div class="autofit-col">
<div class="custom-control custom-checkbox">
<label>
<input class="custom-control-input" type="checkbox"/>
<span class="custom-control-label"></span>
</label>
</div>
</div>
<div class="autofit-col">
<div class="sticker sticker-secondary">
<span class="inline-item">
<svg class="lexicon-icon lexicon-icon-folder" focusable="false" role="presentation">
<use href="/images/icons/icons.svg#folder" />
</svg>
</span>
</div>
</div>
<div class="autofit-col autofit-col-expand">
<section class="autofit-section">
<h4 class="list-group-title">
<a href="#1">Account Example One</a>
</h4>
<p class="list-group-subtext">List Group Subtext</p>
</section>
</div>
<div class="autofit-col">
<div class="quick-action-menu">
<a class="component-action quick-action-item" href="#1" role="button">
<svg class="lexicon-icon lexicon-icon-trash" focusable="false" role="presentation">
<use href="/images/icons/icons.svg#trash" />
</svg>
</a>
<a class="component-action quick-action-item" href="#1" role="button">
<svg class="lexicon-icon lexicon-icon-download" focusable="false" role="presentation">
<use href="/images/icons/icons.svg#download" />
</svg>
</a>
<a class="component-action quick-action-item" href="#1" role="button">
<svg class="lexicon-icon lexicon-icon-expand" focusable="false" role="presentation">
<use href="/images/icons/icons.svg#expand" />
</svg>
</a>
</div>
<div class="dropdown dropdown-action">
<a aria-expanded="false" aria-haspopup="true" class="component-action dropdown-toggle" data-toggle="dropdown" href="#1" id="dropdownAction1" role="button">
<svg class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false" role="presentation">
<use href="/images/icons/icons.svg#ellipsis-v" />
</svg>
</a>
<ul aria-labelledby="" class="dropdown-menu dropdown-menu-right">
<li><a class="dropdown-item" href="#1" role="button">Remove</a></li>
<li><a class="dropdown-item" href="#1" role="button">Download</a></li>
<li><a class="dropdown-item" href="#1" role="button">Checkout</a></li>
</ul>
</div>
</div>
</li>
<li class="list-group-item list-group-item-flex">
<div class="autofit-col">
<div class="custom-control custom-checkbox">
<label>
<input class="custom-control-input" type="checkbox"/>
<span class="custom-control-label"></span>
</label>
</div>
</div>
<div class="autofit-col">
<div class="sticker sticker-secondary">
<span class="inline-item">
<svg class="lexicon-icon lexicon-icon-folder" focusable="false" role="presentation">
<use href="/images/icons/icons.svg#folder" />
</svg>
</span>
</div>
</div>
<div class="autofit-col autofit-col-expand">
<section class="autofit-section">
<h4 class="list-group-title">
<a href="#1">Account Example Two</a>
</h4>
<p class="list-group-subtext">List Group Subtext</p>
</section>
</div>
<div class="autofit-col">
<div class="quick-action-menu">
<a class="component-action quick-action-item" href="#1" role="button">
<svg class="lexicon-icon lexicon-icon-trash" focusable="false" role="presentation">
<use href="/images/icons/icons.svg#trash" />
</svg>
</a>
<a class="component-action quick-action-item" href="#1" role="button">
<svg class="lexicon-icon lexicon-icon-download" focusable="false" role="presentation">
<use href="/images/icons/icons.svg#download" />
</svg>
</a>
<a class="component-action quick-action-item" href="#1" role="button">
<svg class="lexicon-icon lexicon-icon-expand" focusable="false" role="presentation">
<use href="/images/icons/icons.svg#expand" />
</svg>
</a>
</div>
<div class="dropdown dropdown-action">
<a aria-expanded="false" aria-haspopup="true" class="component-action dropdown-toggle" data-toggle="dropdown" href="#1" id="dropdownAction1" role="button">
<svg class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false" role="presentation">
<use href="/images/icons/icons.svg#ellipsis-v" />
</svg>
</a>
<ul aria-labelledby="" class="dropdown-menu dropdown-menu-right">
<li><a class="dropdown-item" href="#1" role="button">Remove</a></li>
<li><a class="dropdown-item" href="#1" role="button">Download</a></li>
<li><a class="dropdown-item" href="#1" role="button">Checkout</a></li>
</ul>
</div>
</div>
</li>
</ul>List Group Bordered
Add the .list-group-bordered class to a .list-group element to style .list-group-item-flex like a table.
<ul class="list-group list-group-bordered show-quick-actions-on-hover">
<li class="list-group-item list-group-item-flex">
<div class="autofit-col">
<div class="custom-control custom-checkbox">
<label>
<input class="custom-control-input" type="checkbox"/>
<span class="custom-control-label"></span>
</label>
</div>
</div>
<div class="autofit-col">
<div class="sticker sticker-secondary">
<span class="inline-item">
<svg class="lexicon-icon lexicon-icon-folder" focusable="false" role="presentation">
<use href="/images/icons/icons.svg#folder" />
</svg>
</span>
</div>
</div>
<div class="autofit-col autofit-col-expand">
<section class="autofit-section">
<h4 class="list-group-title">
<span class="text-truncate-inline">
<a class="text-truncate" href="#1">Text Truncate Example</a>
</span>
</h4>
<p class="list-group-subtitle">.list-group-subtitle</p>
<p class="list-group-subtitle"><a href="#1">.list-group-subtitle a</a></p>
<p class="list-group-text">This is an example of .list-group-text and a <a href="#1">link</a>.</p>
<p class="list-group-text">
<a class="list-group-text-link" href="#1">a.list-group-text-link</a>
</p>
<p class="list-group-text">
<span class="text-truncate-inline">
<a class="list-group-text-link text-truncate" href="#1">Truncated a.list-group-text-link</a> and another <a href="#1">link</a>
</span>
</p>
<p class="list-group-subtext">This is .list-group-subtext and a <a href="#1">link</a>.</p>
<p class="list-group-subtext">
<a class="list-group-subtext-link" href="#1">Regular a.list-group-subtext-link</a>
</p>
<p class="list-group-subtext">
<span class="text-truncate-inline">
<a class="list-group-subtext-link text-truncate" href="#1">Truncated a.list-group-subtext-link</a> and another <a href="#1">link</a>
</span>
</p>
<div class="list-group-detail">
<span class="label label-warning">
<span class="label-item label-item-expand">Pending</span>
</span>
</div>
</section>
</div>
<div class="autofit-col">
<div class="quick-action-menu">
<a class="component-action quick-action-item" href="#1" role="button">
<svg class="lexicon-icon lexicon-icon-trash" focusable="false" role="presentation">
<use href="/images/icons/icons.svg#trash" />
</svg>
</a>
<a class="component-action quick-action-item" href="#1" role="button">
<svg class="lexicon-icon lexicon-icon-download" focusable="false" role="presentation">
<use href="/images/icons/icons.svg#download" />
</svg>
</a>
<a class="component-action quick-action-item" href="#1" role="button">
<svg class="lexicon-icon lexicon-icon-expand" focusable="false" role="presentation">
<use href="/images/icons/icons.svg#expand" />
</svg>
</a>
</div>
<div class="dropdown dropdown-action">
<a aria-expanded="false" aria-haspopup="true" class="component-action dropdown-toggle" data-toggle="dropdown" href="#1" id="dropdownAction1" role="button">
<svg class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false" role="presentation">
<use href="/images/icons/icons.svg#ellipsis-v" />
</svg>
</a>
<ul aria-labelledby="" class="dropdown-menu dropdown-menu-right">
<li><a class="dropdown-item" href="#1" role="button">Remove</a></li>
<li><a class="dropdown-item" href="#1" role="button">Download</a></li>
<li><a class="dropdown-item" href="#1" role="button">Checkout</a></li>
</ul>
</div>
</div>
</li>
<li class="list-group-item list-group-item-flex">
<div class="autofit-col">
<div class="custom-control custom-checkbox">
<label>
<input class="custom-control-input" type="checkbox"/>
<span class="custom-control-label"></span>
</label>
</div>
</div>
<div class="autofit-col">
<div class="sticker sticker-secondary">
<span class="inline-item">
<svg class="lexicon-icon lexicon-icon-folder" focusable="false" role="presentation">
<use href="/images/icons/icons.svg#folder" />
</svg>
</span>
</div>
</div>
<div class="autofit-col autofit-col-expand">
<section class="autofit-section">
<h4 class="list-group-title">
<a href="#1">Account Example Two</a>
</h4>
<p class="list-group-subtext">List Group Subtext</p>
<div class="list-group-detail">
<span class="label label-info">
<span class="label-item label-item-expand">Info</span>
</span>
</div>
</section>
</div>
<div class="autofit-col">
<div class="quick-action-menu">
<a class="component-action quick-action-item" href="#1" role="button">
<svg class="lexicon-icon lexicon-icon-trash" focusable="false" role="presentation">
<use href="/images/icons/icons.svg#trash" />
</svg>
</a>
<a class="component-action quick-action-item" href="#1" role="button">
<svg class="lexicon-icon lexicon-icon-download" focusable="false" role="presentation">
<use href="/images/icons/icons.svg#download" />
</svg>
</a>
<a class="component-action quick-action-item" href="#1" role="button">
<svg class="lexicon-icon lexicon-icon-expand" focusable="false" role="presentation">
<use href="/images/icons/icons.svg#expand" />
</svg>
</a>
</div>
<div class="dropdown dropdown-action">
<a aria-expanded="false" aria-haspopup="true" class="component-action dropdown-toggle" data-toggle="dropdown" href="#1" id="dropdownAction1" role="button">
<svg class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false" role="presentation">
<use href="/images/icons/icons.svg#ellipsis-v" />
</svg>
</a>
<ul aria-labelledby="" class="dropdown-menu dropdown-menu-right">
<li><a class="dropdown-item" href="#1" role="button">Remove</a></li>
<li><a class="dropdown-item" href="#1" role="button">Download</a></li>
<li><a class="dropdown-item" href="#1" role="button">Checkout</a></li>
</ul>
</div>
</div>
</li>
</ul>With Buttons
<ul class="list-group show-quick-actions-on-hover">
<li class="list-group-item list-group-item-flex">
<div class="autofit-col">
<div class="custom-control custom-checkbox">
<label>
<input class="custom-control-input" type="checkbox"/>
<span class="custom-control-label"></span>
</label>
</div>
</div>
<div class="autofit-col">
<div class="sticker sticker-secondary">
<span class="inline-item">
<svg class="lexicon-icon lexicon-icon-folder" focusable="false" role="presentation">
<use href="/images/icons/icons.svg#folder" />
</svg>
</span>
</div>
</div>
<div class="autofit-col autofit-col-expand">
<section class="autofit-section">
<h4 class="list-group-title">
<span class="text-truncate-inline">
<a class="text-truncate" href="#1">Account Example One</a>
</span>
</h4>
<p class="list-group-subtext">
<span class="text-truncate-inline">
<span class="text-truncate">List Group Subtext</span>
</span>
</p>
</section>
</div>
<div class="autofit-col">
<div class="quick-action-menu">
<button class="component-action quick-action-item" type="button">
<svg class="lexicon-icon lexicon-icon-trash" focusable="false" role="presentation">
<use href="/images/icons/icons.svg#trash" />
</svg>
</button>
<button class="component-action quick-action-item" type="button">
<svg class="lexicon-icon lexicon-icon-download" focusable="false" role="presentation">
<use href="/images/icons/icons.svg#download" />
</svg>
</button>
<button class="component-action quick-action-item" type="button">
<svg class="lexicon-icon lexicon-icon-expand" focusable="false" role="presentation">
<use href="/images/icons/icons.svg#expand" />
</svg>
</button>
</div>
<div class="dropdown dropdown-action">
<button aria-expanded="false" aria-haspopup="true" class="component-action dropdown-toggle" data-toggle="dropdown" id="dropdownAction1" type="button">
<svg class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false" role="presentation">
<use href="/images/icons/icons.svg#ellipsis-v" />
</svg>
</button>
<ul aria-labelledby="" class="dropdown-menu dropdown-menu-right">
<li><button class="dropdown-item" type="button">Remove</button></li>
<li><button class="dropdown-item" type="button">Download</button></li>
<li><button class="dropdown-item" type="button">Checkout</button></li>
</ul>
</div>
</div>
</li>
<li class="list-group-item list-group-item-flex">
<div class="autofit-col">
<div class="custom-control custom-checkbox">
<label>
<input class="custom-control-input" type="checkbox"/>
<span class="custom-control-label"></span>
</label>
</div>
</div>
<div class="autofit-col">
<div class="sticker sticker-secondary">
<span class="inline-item">
<svg class="lexicon-icon lexicon-icon-folder" focusable="false" role="presentation">
<use href="/images/icons/icons.svg#folder" />
</svg>
</span>
</div>
</div>
<div class="autofit-col autofit-col-expand">
<section class="autofit-section">
<h4 class="list-group-title">
<a href="#1">Account Example Two</a>
</h4>
<p class="list-group-text">List Group Text</p>
<p class="list-group-subtext">List Group Subtext</p>
</section>
</div>
<div class="autofit-col">
<div class="quick-action-menu">
<button class="component-action quick-action-item" type="button">
<svg class="lexicon-icon lexicon-icon-trash" focusable="false" role="presentation">
<use href="/images/icons/icons.svg#trash" />
</svg>
</button>
<button class="component-action quick-action-item" type="button">
<svg class="lexicon-icon lexicon-icon-download" focusable="false" role="presentation">
<use href="/images/icons/icons.svg#download" />
</svg>
</button>
<button class="component-action quick-action-item" type="button">
<svg class="lexicon-icon lexicon-icon-expand" focusable="false" role="presentation">
<use href="/images/icons/icons.svg#expand" />
</svg>
</button>
</div>
<div class="dropdown dropdown-action">
<button aria-expanded="false" aria-haspopup="true" class="component-action dropdown-toggle" data-toggle="dropdown" id="dropdownAction1" type="button">
<svg class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false" role="presentation">
<use href="/images/icons/icons.svg#ellipsis-v" />
</svg>
</button>
<ul aria-labelledby="" class="dropdown-menu dropdown-menu-right">
<li><a class="dropdown-item" href="#1" role="button">Remove</a></li>
<li><a class="dropdown-item" href="#1" role="button">Download</a></li>
<li><a class="dropdown-item" href="#1" role="button">Checkout</a></li>
</ul>
</div>
</div>
</li>
</ul>List Group with Links and Buttons
<div class="list-group">
<a class="list-group-item list-group-item-action" href="#1">List Item 1</a>
<a class="list-group-item list-group-item-action" href="#1">List Item 2</a>
<button class="list-group-item list-group-item-action" type="button">List Item 3</button>
<a class="list-group-item list-group-item-action" href="#1">List Item 4</a>
</div>Contextual List Group
- List Item Normal
- List Item Success
- List Item Info
- List Item Warning
- List Item Danger
- List Item Light
- List Item Dark
<ul class="list-group">
<li class="list-group-item">List Item Normal</li>
<li class="list-group-item list-group-item-success">List Item Success</li>
<li class="list-group-item list-group-item-info">List Item Info</li>
<li class="list-group-item list-group-item-warning">List Item Warning</li>
<li class="list-group-item list-group-item-danger">List Item Danger</li>
<li class="list-group-item list-group-item-light">List Item Light</li>
<li class="list-group-item list-group-item-dark">List Item Dark</li>
</ul>Linked Contextual List Groups
<div class="list-group">
<a class="list-group-item list-group-item-action" href="#1">List Item Action Normal</a>
<a class="list-group-item list-group-item-action list-group-item-success" href="#1">List Item Action Success</a>
<a class="list-group-item list-group-item-action list-group-item-info" href="#1">List Item Action Info</a>
<a class="list-group-item list-group-item-action list-group-item-warning" href="#1">List Item Action Warning</a>
<a class="list-group-item list-group-item-action list-group-item-danger" href="#1">List Item Action Danger</a>
<a class="list-group-item list-group-item-action list-group-item-light" href="#1">List Item Action Light</a>
<a class="list-group-item list-group-item-action list-group-item-dark" href="#1">List Item Action Dark</a>
</div>
<div class="list-group">
<a class="active list-group-item list-group-item-action" href="#1">List Item Action Normal Active</a>
<a class="active list-group-item list-group-item-action list-group-item-success" href="#1">List Item Action Success Active</a>
<a class="active list-group-item list-group-item-action list-group-item-info" href="#1">List Item Action Info Active</a>
<a class="active list-group-item list-group-item-action list-group-item-warning" href="#1">List Item Action Warning Active</a>
<a class="active list-group-item list-group-item-action list-group-item-danger" href="#1">List Item Action Danger Active</a>
<a class="active list-group-item list-group-item-action list-group-item-light" href="#1">List Item Action Light Active</a>
<a class="active list-group-item list-group-item-action list-group-item-dark" href="#1">List Item Action Dark Active</a>
</div>