Basic example Selectable Badges Linked items Button items Disabled items Contextual classes Custom content Draggable element

UI Molecules

List group

1.1 Basic example

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
<ul class="amui-m-list-group list-group">
  <li class="amui-m-list-group__item list-group-item">Cras justo odio</li>
  <li class="amui-m-list-group__item list-group-item">Dapibus ac facilisis in</li>
  <li class="amui-m-list-group__item list-group-item">Morbi leo risus</li>
  <li class="amui-m-list-group__item list-group-item">Porta ac consectetur ac</li>
  <li class="amui-m-list-group__item list-group-item">Vestibulum at eros</li>
</ul>

1.2 Selectable

Utilisez le plugin « Selectable » de jQuery pour rendre votre liste sélectionnable : jQuery UI Selectable

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
<ul id="selectable-list" class="amui-m-list-group list-group">
  <li class="amui-m-list-group__item list-group-item">Cras justo odio</li>
  <li class="amui-m-list-group__item list-group-item">Dapibus ac facilisis in</li>
  <li class="amui-m-list-group__item list-group-item">Morbi leo risus</li>
  <li class="amui-m-list-group__item list-group-item">Porta ac consectetur ac</li>
  <li class="amui-m-list-group__item list-group-item">Vestibulum at eros</li>
</ul>

1.3 Badge

  • 14Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
<ul class="amui-m-list-group list-group">
  <li class="amui-m-list-group__item list-group-item"><span class="badge">14</span>Cras justo odio</li>
  <li class="amui-m-list-group__item list-group-item">Dapibus ac facilisis in</li>
  <li class="amui-m-list-group__item list-group-item">Morbi leo risus</li>
  <li class="amui-m-list-group__item list-group-item">Porta ac consectetur ac</li>
  <li class="amui-m-list-group__item list-group-item">Vestibulum at eros</li>
</ul>

1.4 Linked items

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros 
<div class="amui-m-list-group list-group">
  <a href="#" class="amui-m-list-group__item list-group-item active">
    Cras justo odio
  </a>
  <a href="#" class="amui-m-list-group__item list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="amui-m-list-group__item list-group-item">Morbi leo risus</a>
  <a href="#" class="amui-m-list-group__item list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="amui-m-list-group__item list-group-item">Vestibulum at eros</a>
</div>

1.4 Button items

<div class="amui-m-list-group list-group">
  <button type="button" class="amui-m-list-group__item list-group-item">Cras justo odio</button>
  <button type="button" class="amui-m-list-group__item list-group-item">Dapibus ac facilisis in</button>
  <button type="button" class="amui-m-list-group__item list-group-item">Morbi leo risus</button>
  <button type="button" class="amui-m-list-group__item list-group-item">Porta ac consectetur ac</button>
  <button type="button" class="amui-m-list-group__item list-group-item">Vestibulum at eros</button>
</div>

1.5 Disabled items

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros 
<div class="amui-m-list-group list-group">
  <a href="#" class="mui-m-list-group__item list-group-item disabled">
    Cras justo odio
  </a>
  <a href="#" class="mui-m-list-group__item list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="mui-m-list-group__item list-group-item">Morbi leo risus</a>
  <a href="#" class="mui-m-list-group__item list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="mui-m-list-group__item list-group-item">Vestibulum at eros</a>
</div>

1.6 Contextual

  • Dapibus ac facilisis in
  • Porta ac consectetur ac
  • Vestibulum at eros
Dapibus ac facilisis in Porta ac consectetur ac Vestibulum at eros 
<ul class="amui-m-list-group list-group">
  <li class="amui-m-list-group__item list-group-item is--success">Dapibus ac facilisis in</li>
  <li class="amui-m-list-group__item list-group-item is--warning">Porta ac consectetur ac</li>
  <li class="amui-m-list-group__item list-group-item is--danger">Vestibulum at eros</li>
</ul>

<div class="amui-m-list-group list-group">
  <a href="#" class="amui-m-list-group__item list-group-item is--success">Dapibus ac facilisis in</a>
  <a href="#" class="amui-m-list-group__item list-group-item is--warning">Porta ac consectetur ac</a>
  <a href="#" class="amui-m-list-group__item list-group-item is--danger">Vestibulum at eros</a>
</div>

1.6 Custom content

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

 
<div class="amui-m-list-group list-group">
  <a href="#" class="amui-m-list-group__item list-group-item active">

    <h4 class="amui-m-list-group__heading list-group-item-heading">List group item heading</h4>
    <p class="amui-m-list-group__text list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
  </a>
  <a href="#" class="amui-m-list-group__item list-group-item">
    <h4 class="amui-m-list-group__heading list-group-item-heading">List group item heading</h4>
    <p class="amui-m-list-group__text list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
  </a>
  <a href="#" class="amui-m-list-group__item list-group-item">
    <h4 class="amui-m-list-group__heading list-group-item-heading">List group item heading</h4>
    <p class="amui-m-list-group_text list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
  </a>
</div>

1.8 List group Draggable

  • Title State
  • Title State
  • Title State
  • Title State
  • Title State 
<ul class="amui-m-list-group list-group is--panel">
  <li class="amui-m-list-group__item list-group-item" draggable="true">
    <span id="drag-me" class="amui-m-list-group__text">Title</span>
    <span class="amui-m-list-group__status is--primary">State</span>
  </li>
  <li class="amui-m-list-group__item list-group-item" draggable="true">
    <span id="drag-me" class="amui-m-list-group__text">Title</span>
    <span class="amui-m-list-group__status is--success">State</span>
  </li>
  <li class="amui-m-list-group__item list-group-item" draggable="true">
    <span id="drag-me" class="amui-m-list-group__text">Title</span>
    <span class="amui-m-list-group__status is--warning">State</span>
  </li>
  <li class="amui-m-list-group__item list-group-item" draggable="true">
    <span id="drag-me" class="amui-m-list-group__text">Title</span>
    <span class="amui-m-list-group__status is--danger">State</span>
  </li>
  <li class="amui-m-list-group__item list-group-item" draggable="true">
    <span id="drag-me" class="amui-m-list-group__text">Title</span>
    <span class="amui-m-list-group__status is--draft">State</span>
  </li>
</ul>
← Input Groups Navs →