Füllen diesen Marketingbanner aus, um für eine Sonderaktion zu werben, wie z.B. 20% sparen an diesem Wochenende!
Zur Startseite gehen
0
Warenkorb
0 / 0,00 €*

Listen / Listgroups

  • An item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
HTML / Code

<ul class="list-group">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

Active Item

  • An item
  • An active item
  • A third item
  • A fourth item
  • And a fifth one
HTML / Code

<ul class="list-group">
  <li class="list-group-item" aria-current="true">An item</li>
  <li class="list-group-item active">An active item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

Simple Style

  • An item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
HTML / Code

<ul class="list-group list-group-flush">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

Experimental

  1. Subheading
    Cras justo odio
    14
  2. Subheading
    Cras justo odio
    14
  3. Subheading
    Cras justo odio
    14
HTML / Code

<ol class="list-group list-group-numbered">
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Cras justo odio
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Cras justo odio
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Cras justo odio
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
</ol>

Colors / Farben

  • A simple default list group item
  • A simple primary list group item
  • A simple secondary list group item
  • A simple success list group item
  • A simple danger list group item
  • A simple warning list group item
  • A simple info list group item
  • A simple light list group item
  • A simple dark list group item
HTML / Code

<ul class="list-group">
  <li class="list-group-item">A simple default list group item</li>
  <li class="list-group-item list-group-item-primary">A simple primary list group item</li>
  <li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
  <li class="list-group-item list-group-item-success">A simple success list group item</li>
  <li class="list-group-item list-group-item-danger">A simple danger list group item</li>
  <li class="list-group-item list-group-item-warning">A simple warning list group item</li>
  <li class="list-group-item list-group-item-info">A simple info list group item</li>
  <li class="list-group-item list-group-item-light">A simple light list group item</li>
  <li class="list-group-item list-group-item-dark">A simple dark list group item</li>
</ul>

Custom Content / Individuell

List group item heading
3 days ago

Some placeholder content in a paragraph.

And some small print.
List group item heading
3 days ago

Some placeholder content in a paragraph.

And some muted small print.
List group item heading
3 days ago

Some placeholder content in a paragraph.

And some muted small print.
HTML / Code

<div class="list-group">
    <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
        <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1">List group item heading</h5>
            <small>3 days ago</small>
        </div>
        <p class="mb-1">Some placeholder content in a paragraph.</p>
        <small>And some small print.</small>
    </a>
    <a href="#" class="list-group-item list-group-item-action">
        <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1">List group item heading</h5>
            <small class="text-muted">3 days ago</small>
        </div>
        <p class="mb-1">Some placeholder content in a paragraph.</p>
        <small class="text-muted">And some muted small print.</small>
    </a>
    <a href="#" class="list-group-item list-group-item-action">
        <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1">List group item heading</h5>
            <small class="text-muted">3 days ago</small>
        </div>
        <p class="mb-1">Some placeholder content in a paragraph.</p>
        <small class="text-muted">And some muted small print.</small>
    </a>
</div>

Checkboxes

  • First checkbox
  • Second checkbox
  • Third checkbox
  • Fourth checkbox
  • Fifth checkbox
HTML / Code

<ul class="list-group">
    <li class="list-group-item">
        <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
        First checkbox
    </li>
    <li class="list-group-item">
        <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
        Second checkbox
    </li>
    <li class="list-group-item">
        <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
        Third checkbox
    </li>
    <li class="list-group-item">
        <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
        Fourth checkbox
    </li>
    <li class="list-group-item">
        <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
        Fifth checkbox
    </li>
</ul>

Abonnieren Sie jetzt unseren regelmäßig erscheinenden Newsletter, um rechtzeitig über neue Produkte und Angebote informiert zu werden.

Datenschutz*
Schnellkontakt Widget
info@example.com
022321/129239
+1 323 555 1234
Anfahrt bei Google Maps
Wichtige Informationen

Diese Demo zeigt dir in vollem Umfang, was mit dem Theme + Addons möglich ist. Folgende Erweiterungen sind in dieser Demo installiert:

THEME FEATURES - Erweiterung für das Theme
Demo-Installer, Animationen für einzelne Elemente, fixierter Warenkorb auf Produktseite, Google Fonts, Schnellkontakt - Widget etc...
Self-Managed
CMS BUNDLE - Erweiterung der Erlebniswelten
Zahlreiche Erlebniswelten - Elemente, verschiedene Sektionseinstellungen wie bspw. Übergang, Negativ-Versatz, Fixierter Hintergrund etc...
Self-Managed

Wenn Du das Theme so aufbauen möchtest, wie das Theme im Demoshop gezeigt wird, empfehle ich dir, dass du das Theme + Addons im Bundle zusammen erwirbst. Im Shopware Store findest du auf der Detailseite des Themes die Bundle-Angebote.

Beachte bitte, dass diese Addons in der Shopware Cloud nicht unterstützt werden.

Die Bilder in dieser Demo sind teilweise urheberrechtlich geschützt. Wenn du dieses Theme mit Demodaten installierst, solltest du darauf achten, alle Bilder vor dem Livegang auszutauschen!