List Group

List Group Type A

  • webshop

Dieses Pattern dient zur Übersicht der erstellten Listen im Shop

<div class="list-group list-group--type-a"> <div class="list-group-item"> <a href="#" class="list-group-item-title">Favoriten </a> <span class="list-group-item-information"> <span>156,52 €</span> </span> <div class="list-group-item-options"> <a href="/demos/webshop/orderlist-complete-csv-upload.html" class="btn iconButton iconButton--type-d" title="Liste bearbeiten"> <svg class="icon" viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#edit"></use> </svg> <span class="title"> <!-- --> </span> </a> <a class="btn iconButton iconButton--type-d" title="Liste duplizieren"> <svg class="icon" viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#copy"></use> </svg> <span class="title"> <!-- --> </span> </a> <a class="btn iconButton iconButton--type-d" title="Liste löschen"> <svg class="icon" viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#trash"></use> </svg> <span class="title"> <!-- --> </span> </a> </div> <div class="list-group-item-buy"> <a class="btn iconButton iconButton--type-a" title="Liste in den Warenkorb"> <svg class="icon" viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#cart"></use> </svg> <span class="title"> <!-- --> </span> </a> </div> </div> <div class="list-group-item"> <a href="#" class="list-group-item-title">PaperCrew 2000 </a> <span class="list-group-item-information"> <span>1.316,72 €</span> </span> <div class="list-group-item-options"> <a href="/demos/webshop/orderlist-complete-csv-upload.html" class="btn iconButton iconButton--type-d" title="Liste bearbeiten"> <svg class="icon" viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#edit"></use> </svg> <span class="title"> <!-- --> </span> </a> <a class="btn iconButton iconButton--type-d" title="Liste duplizieren"> <svg class="icon" viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#copy"></use> </svg> <span class="title"> <!-- --> </span> </a> <a class="btn iconButton iconButton--type-d" title="Liste löschen"> <svg class="icon" viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#trash"></use> </svg> <span class="title"> <!-- --> </span> </a> </div> <div class="list-group-item-buy"> <a class="btn iconButton iconButton--type-a" title="Liste in den Warenkorb"> <svg class="icon" viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#cart"></use> </svg> <span class="title"> <!-- --> </span> </a> </div> </div> <div class="list-group-item"> <a href="#" class="list-group-item-title">Sonderprodukte für Lager </a> <span class="list-group-item-information"> <span>589,63 €</span> </span> <div class="list-group-item-options"> <a href="/demos/webshop/orderlist-complete-csv-upload.html" class="btn iconButton iconButton--type-d" title="Liste bearbeiten"> <svg class="icon" viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#edit"></use> </svg> <span class="title"> <!-- --> </span> </a> <a class="btn iconButton iconButton--type-d" title="Liste duplizieren"> <svg class="icon" viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#copy"></use> </svg> <span class="title"> <!-- --> </span> </a> <a class="btn iconButton iconButton--type-d" title="Liste löschen"> <svg class="icon" viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#trash"></use> </svg> <span class="title"> <!-- --> </span> </a> </div> <div class="list-group-item-buy"> <a class="btn iconButton iconButton--type-a" title="Liste in den Warenkorb"> <svg class="icon" viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#cart"></use> </svg> <span class="title"> <!-- --> </span> </a> </div> </div> <div class="list-group-item"> <a href="#" class="list-group-item-title">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </a> <span class="list-group-item-information"> <span>89,63 €</span> </span> <div class="list-group-item-options"> <a href="/demos/webshop/orderlist-complete-csv-upload.html" class="btn iconButton iconButton--type-d" title="Liste bearbeiten"> <svg class="icon" viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#edit"></use> </svg> <span class="title"> <!-- --> </span> </a> <a class="btn iconButton iconButton--type-d" title="Liste duplizieren"> <svg class="icon" viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#copy"></use> </svg> <span class="title"> <!-- --> </span> </a> <a class="btn iconButton iconButton--type-d" title="Liste löschen"> <svg class="icon" viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#trash"></use> </svg> <span class="title"> <!-- --> </span> </a> </div> <div class="list-group-item-buy"> <a class="btn iconButton iconButton--type-a" title="Liste in den Warenkorb"> <svg class="icon" viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#cart"></use> </svg> <span class="title"> <!-- --> </span> </a> </div> </div> <div class="list-group-item"> <a href="#" class="list-group-item-title">Lorem ipsum dolor sit amet, consectetur adipisicing elit </a> <span class="list-group-item-information"> <span>945,63 €</span> </span> <div class="list-group-item-options"> <a href="/demos/webshop/orderlist-complete-csv-upload.html" class="btn iconButton iconButton--type-d" title="Liste bearbeiten"> <svg class="icon" viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#edit"></use> </svg> <span class="title"> <!-- --> </span> </a> <a class="btn iconButton iconButton--type-d" title="Liste duplizieren"> <svg class="icon" viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#copy"></use> </svg> <span class="title"> <!-- --> </span> </a> <a class="btn iconButton iconButton--type-d" title="Liste löschen"> <svg class="icon" viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#trash"></use> </svg> <span class="title"> <!-- --> </span> </a> </div> <div class="list-group-item-buy"> <a class="btn iconButton iconButton--type-a" title="Liste in den Warenkorb"> <svg class="icon" viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#cart"></use> </svg> <span class="title"> <!-- --> </span> </a> </div> </div> </div>