NEWSLETTER HUB|BRANDHUB

We couldn’t find anything that matched your searched term

  • PAGES

  • COMPONENTS

  • Brand guidelines

  • Insights

Documentation

Component

Lists groups are a serie of vertical content. They display items with the same level of hierarchy. They improve the readability of the different items by creating a better structured organisation.

Basic example
  • An item
  • An item
  • An item
  • An item
  • An item
<ul class="list-group list-group-flush">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">An item</li>
  <li class="list-group-item">An item</li>
  <li class="list-group-item">An item</li>
  <li class="list-group-item">An item</li>
</ul>
Active items
  • An item
  • An item
  • An item
  • An item
  • An item
<ul class="list-group list-group-flush">
  <li class="list-group-item active" aria-current="true">An item</li>
  <li class="list-group-item">An item</li>
  <li class="list-group-item">An item</li>
  <li class="list-group-item">An item</li>
  <li class="list-group-item">An item</li>
</ul>
Disabled items
  • An item
  • An item
  • An item
  • An item
  • An item
<ul class="list-group list-group-flush">
  <li class="list-group-item disabled" aria-disabled="true">An item</li>
  <li class="list-group-item">An item</li>
  <li class="list-group-item">An item</li>
  <li class="list-group-item">An item</li>
  <li class="list-group-item">An item</li>
</ul>
List with links
An item An item An item An item An item 
<div class="list-group list-group-flush">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">An item</a>
  <a href="#" class="list-group-item list-group-item-action">An item</a>
  <a href="#" class="list-group-item list-group-item-action">An item</a>
  <a href="#" class="list-group-item list-group-item-action">An item</a>
  <a href="#" class="list-group-item list-group-item-action disabled" aria-disabled="true">An item</a>
</div>
List with links & buttons

Specific to AXA design : use <a> and add classes .btn, .btn-link-secondary and .list-group-item

An item
An item
An item
An item
An item 
<div class="list-group list-group-flush">
  <a
    href="#"
    class="btn btn-link-secondary list-group-item mb-0"
    aria-current="true"
  >
    <div class="d-flex w-100 justify-content-between">
      <span>An item</span>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="16"
        height="16"
        fill="currentColor"
        class="valign-btn-icon ms-1"
        viewBox="0 0 16 16"
      ><path
          fill-rule="evenodd"
          d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"
        /></svg>
    </div>
  </a>
  <a href="#" class="btn btn-link-secondary list-group-item mb-0">
    <div class="d-flex w-100 justify-content-between">
      <span>An item</span>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="16"
        height="16"
        fill="currentColor"
        class="valign-btn-icon ms-1"
        viewBox="0 0 16 16"
      ><path
          fill-rule="evenodd"
          d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"
        /></svg>
    </div>
  </a>
  <a href="#" class="btn btn-link-secondary list-group-item mb-0">
    <div class="d-flex w-100 justify-content-between">
      <span>An item</span>
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
        fill="currentColor"
        class="valign-btn-icon ms-1"
        viewBox="0 0 16 16"
      ><path
          fill-rule="evenodd"
          d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"
        /></svg>
    </div>
  </a>
  <a href="#" class="btn btn-link-secondary list-group-item mb-0">
    <div class="d-flex w-100 justify-content-between">
      <span>An item</span>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="16"
        height="16"
        fill="currentColor"
        class="valign-btn-icon ms-1"
        viewBox="0 0 16 16"
      ><path
          fill-rule="evenodd"
          d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"
        /></svg>
    </div>
  </a>
  <a
    href="#"
    class="btn btn-link-secondary list-group-item mb-0 disabled"
    aria-disabled="true"
  >
    <div class="d-flex w-100 justify-content-between">
      <span>An item</span>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="16"
        height="16"
        fill="currentColor"
        class="valign-btn-icon ms-1"
        viewBox="0 0 16 16"
      ><path
          fill-rule="evenodd"
          d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"
        /></svg>
    </div>
  </a>
</div>
List article

List article elements are specifically designed for editorial content.

3 days ago

List group item heading

Some placeholder content in a paragraph. And some small print.

And some muted small print.

3 days ago

List group item heading

Some placeholder content in a paragraph. And some small print.

And some muted small print.

3 days ago

List group item heading

Some placeholder content in a paragraph. And some small print.

And some muted small print.

3 days ago

List group item heading

Some placeholder content in a paragraph. And some small print.

And some muted small print. 
<div class="list-group list-group-flush">
  <a href="#" class="list-group-item list-group-item-action px-3 py-4">
    <div class="d-flex w-100 justify-content-start">
      <h4 class="w-25 pt-2">3 days ago</h4>
      <div>
        <div class="display-5 mb-2">List group item heading</div>
        <p>Some placeholder content in a paragraph. And some small print.</p>
        <span class="h4 muted">And some muted small print.</span>
      </div>
    </div>
  </a>
  <a href="#" class="list-group-item list-group-item-action px-3 py-4">
    <div class="d-flex w-100 justify-content-start">
      <h4 class="w-25 pt-2">3 days ago</h4>
      <div>
        <div class="display-5 mb-2">List group item heading</div>
        <p>Some placeholder content in a paragraph. And some small print.</p>
        <span class="h4 muted">And some muted small print.</span>
      </div>
    </div>
  </a>
  <a href="#" class="list-group-item list-group-item-action px-3 py-4">
    <div class="d-flex w-100 justify-content-start">
      <h4 class="w-25 pt-2">3 days ago</h4>
      <div>
        <div class="display-5 mb-2">List group item heading</div>
        <p>Some placeholder content in a paragraph. And some small print.</p>
        <span class="h4 muted">And some muted small print.</span>
      </div>
    </div>
  </a>
  <a href="#" class="list-group-item list-group-item-action px-3 py-4">
    <div class="d-flex w-100 justify-content-start">
      <h4 class="w-25 pt-2">3 days ago</h4>
      <div>
        <div class="display-5 mb-2">List group item heading</div>
        <p>Some placeholder content in a paragraph. And some small print.</p>
        <span class="h4 muted">And some muted small print.</span>
      </div>
    </div>
  </a>
</div>