Zum Inhalt springen
Handbuch wien.gv.at
Startseite wien.gv.at

Liste
Varianten

Vertikale Listen

Liste mit Punkten (unordered List)

 Vorschau
  • Ermäßigungen
  • Monats- und Jahreskarte
  • Saisonkarte
 Code 
<wm-list>
  <ul>
    <li>Ermäßigungen</li>
    <li>Monats- und Jahreskarte</li>
    <li>Saisonkarte</li>
  </ul>
</wm-list>

Liste mit Aufzählung (ordered List)

 Vorschau
  1. Ermäßigungen
  2. Monats- und Jahreskarte
  3. Saisonkarte
 Code 
<wm-list>
  <ol>
    <li>Ermäßigungen</li>
    <li>Monats- und Jahreskarte</li>
    <li>Saisonkarte</li>
  </ol>
</wm-list>

Liste mit Links

 Vorschau Code 
<wm-list clean>
  <ul>
    <li>
      <a href="#">
        Ermäßigungen
      </a>
    </li>
    <li>
      <a href="#">
        Monats- und Jahreskarte
      </a>
    </li>
    <li>
      <a href="#">
        Saisonkarte
      </a>
    </li>
  </ul>
</wm-list>

Liste mit Trennstrich ohne Links

 Vorschau
  • Aktionstheater

    Theater im Stream

  • Belvedere

    Videos, Führungen

  • Dschungel Wien

    Theater im Stream

 Code 
<wm-list type="row" gap="xs">
  <ul>
    <li>
      <div>
        <strong>Aktionstheater</strong>
        <p>Theater im Stream</p>
      </div>
    </li>
    <li>
      <div>
        <strong>Belvedere</strong>
        <p>Videos, Führungen</p>
      </div>
    </li>
    <li>
      <div>
        <strong>Dschungel Wien</strong>
        <p>Theater im Stream</p>
      </div>
    </li>
  </ul>
</wm-list>

Liste mit Trennstrich und Link

 Vorschau Code 
<wm-list type="row" gap="xs" blocklink>
  <ul>
    <li>
      <div>
        <strong><a href="#">Aktionstheater</a></strong>
        <p>Theater im Stream</p>
      </div>
    </li>
    <li>
      <div>
        <strong><a href="#">Belvedere</a></strong>
        <p>Videos, Führungen</p>
      </div>
    </li>
    <li>
      <div>
        <strong><a href="#">Dschungel Wien</a></strong>
        <p>Theater im Stream</p>
      </div>
    </li>
  </ul>
</wm-list>

Liste mit Trennstrich sowie Bild und Link

 Vorschau Code 
<wm-list type="row" gap="xs" blocklink>
  <ul>
    <li>
      <img src="/images/pattern/modal/modal1.jpg" width="160" alt="Platz mit Brunnen">
      <div>
        <strong><a href="#">Aktionstheater</a></strong>
        <p>Theater im Stream</p>
      </div>
    </li>
    <li>
      <img src="/images/pattern/modal/modal2.jpg" width="160" alt="Luftbild mit Abgrenzung des Bearbeitungsgebiets">
      <div>
        <strong><a href="#">Belvedere</a></strong>
        <p>Videos, Führungen</p>
      </div>
    </li>
    <li>
      <img src="/images/pattern/modal/modal3.jpg" width="160" alt="Kleine, gärtnerische Fläche zwischen Wohnhäusern">
      <div>
        <strong><a href="#">Dschungel Wien</a></strong>
        <p>Theater im Stream</p>
      </div>
    </li>
  </ul>
</wm-list>

Liste Infobox

 Vorschau Code 
<wm-list type="row">
  <ul>
    <li>
      <wm-icon iconid="clock"></wm-icon>
      Stand: Grundlagenerhebung
    </li>
    <li>
      <wm-icon iconid="pin"></wm-icon>
      <a href="#">
        15., Umgebung Westbahnhof
      </a>
    </li>
    <li>
      <wm-icon iconid="contact_alternative"></wm-icon>
      Beteiligung: Offen
    </li>
    <li>
      <wm-icon iconid="info"></wm-icon>
      <a href="#">Mitte 15 - Du und dein Grätzl. Gestalte mit!</a>
    </li>
  </ul>
</wm-list>

Event-Feed

 Vorschau
  • Michael Niavarani
    • Ronacher
    • 02.04.
  • Michael Niavarani
    • Ronacher
    • 02.04.

    • Lorem, ipsum dolor sit amet consectetur adipisicing elit. Praesentium suscipit vel libero odio repudiandae quasi corrupti cumque iure nihil necessitatibus dolorem obcaecati deleniti repellendus iste culpa veritatis, sed consequuntur! Facere.
Code 
<wm-list type="row" gap="xs" blocklink>
  <ul>
    <li>
      <div>
        <strong><a href="#">Michael Niavarani</a></strong>

        <wm-list clean gap="xxs">
          <ul>
            <li>
              <wm-icon iconid="pin"></wm-icon>
              Ronacher
            </li>
            <li>
              <wm-icon iconid="clock"></wm-icon>
              02.04.
            </li>
          </ul>
        </wm-list>
      </div>
    </li>
    <li>
      <div>
        <strong><a href="#">Michael Niavarani</a></strong>

        <wm-list clean gap="xxs">
          <ul>
            <li>
              <wm-icon iconid="pin"></wm-icon>
              Ronacher
            </li>
            <li>
              <wm-icon iconid="clock"></wm-icon>
              02.04.
            </li>
            <li>
              <wm-icon iconid="info"></wm-icon>
              <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Praesentium suscipit vel libero odio repudiandae quasi corrupti cumque iure nihil necessitatibus dolorem obcaecati deleniti repellendus iste culpa veritatis, sed consequuntur! Facere.</p>
            </li>
          </ul>
        </wm-list>
      </div>
    </li>
  </ul>
</wm-list>

Event-Feed mit Bildern

 Vorschau
  • Platz mit Brunnen
    Michael Niavarani
    • Ronacher
    • 02.04.
  • Platz mit Brunnen
    Michael Niavarani
    • Ronacher
    • 02.04.

    • Lorem, ipsum dolor sit amet consectetur adipisicing elit. Praesentium suscipit vel libero odio repudiandae quasi corrupti cumque iure nihil necessitatibus dolorem obcaecati deleniti repellendus iste culpa veritatis, sed consequuntur! Facere.
Code 
<wm-list type="row"gap="xs" blocklink>
  <ul>
    <li>
      <img src="/images/pattern/modal/modal1.jpg" width="160" alt="Platz mit Brunnen">

      <div>
        <strong><a href="#">Michael Niavarani</a></strong>

        <wm-list clean gap="xxs">
          <ul>
            <li>
              <wm-icon iconid="pin"></wm-icon>
              Ronacher
            </li>
            <li>
              <wm-icon iconid="clock"></wm-icon>
              02.04.
            </li>
          </ul>
        </wm-list>
      </div>
    </li>
    <li>
      <img src="/images/pattern/modal/modal1.jpg" width="160" alt="Platz mit Brunnen">

      <div>
        <strong><a href="#">Michael Niavarani</a></strong>

        <wm-list clean gap="xxs">
          <ul>
            <li>
              <wm-icon iconid="pin"></wm-icon>
              Ronacher
            </li>
            <li>
              <wm-icon iconid="clock"></wm-icon>
              02.04.
            </li>
            <li>
              <wm-icon iconid="info"></wm-icon>
              <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Praesentium suscipit vel libero odio repudiandae quasi corrupti cumque iure nihil necessitatibus dolorem obcaecati deleniti repellendus iste culpa veritatis, sed consequuntur! Facere.</p>
            </li>
          </ul>
        </wm-list>
      </div>
    </li>
  </ul>
</wm-list>

Event-Feed mit Details

 Vorschau
  • Michael Niavarani
    • Ronacher
    • 02.04.
    • Beschreibung

      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Praesentium suscipit vel libero odio repudiandae quasi corrupti cumque iure nihil necessitatibus dolorem obcaecati deleniti repellendus iste culpa veritatis, sed consequuntur! Facere.
  • Michael Niavarani
    • Ronacher
    • 02.04.
    • Beschreibung

      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Praesentium suscipit vel libero odio repudiandae quasi corrupti cumque iure nihil necessitatibus dolorem obcaecati deleniti repellendus iste culpa veritatis, sed consequuntur! Facere.
Code 
<wm-list type="row" clean>
  <ul>
    <li>
      <div>
        <strong><a href="#">Michael Niavarani</a></strong>

        <wm-list clean gap="xxs">
          <ul>
            <li>
              <wm-icon iconid="pin"></wm-icon>
              Ronacher
            </li>
            <li>
              <wm-icon iconid="clock"></wm-icon>
              02.04.
            </li>
            <li>
              <wm-icon iconid="info"></wm-icon>
              <wm-details>
                <span slot="label">Beschreibung</span>
                <p slot="content">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Praesentium suscipit vel libero odio repudiandae quasi corrupti cumque iure nihil necessitatibus dolorem obcaecati deleniti repellendus iste culpa veritatis, sed consequuntur! Facere.</p>
              </wm-details>
            </li>
          </ul>
        </wm-list>
      </div>
    </li>
    <li>
      <div>
        <strong><a href="#">Michael Niavarani</a></strong>
        <wm-list clean gap="xxs">
          <ul>
            <li>
              <wm-icon iconid="pin"></wm-icon>
              Ronacher
            </li>
            <li>
              <wm-icon iconid="clock"></wm-icon>
              02.04.
            </li>
            <li>
              <wm-icon iconid="info"></wm-icon>
              <wm-details>
                <span slot="label">Beschreibung</span>
                <p slot="content">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Praesentium suscipit vel libero odio repudiandae quasi corrupti cumque iure nihil necessitatibus dolorem obcaecati deleniti repellendus iste culpa veritatis, sed consequuntur! Facere.</p>
              </wm-details>
            </li>
          </ul>
        </wm-list>
      </div>
    </li>
  </ul>
</wm-list>

Horizontale Listen

Horizontale Liste mit Links

 Vorschau Code 
<wm-list type="horizontal">
  <ul>
    <li>
      <a href="#ermaeszigungen">
        Ermäßigungen
      </a>
    </li>
    <li>
      <a href="#monatsjahreskarte">
        Monats- und Jahreskarte
      </a>
    </li>
    <li>
      <a href="#saisonkarte">
        Saisonkarte
      </a>
    </li>
  </ul>
</wm-list>

Horizontale Liste mit zentrierten Links

 Vorschau Code 
<wm-list type="horizontal" alignment="center">
  <ul>
    <li>
      <a href="#ermaeszigungen">
        Ermäßigungen
      </a>
    </li>
    <li>
      <a href="#monatsjahreskarte">
        Monats- und Jahreskarte
      </a>
    </li>
    <li>
      <a href="#saisonkarte">
        Saisonkarte
      </a>
    </li>
  </ul>
</wm-list>

Horizontale Liste mit Social Media-Icons

 Vorschau Code 
<wm-list type="horizontal">
  <ul>
    <li>
      <a href="https://facebook.com" class="wm-no-external-icon">
        <wm-icon iconid="facebook">Facebook</wm-icon>
      </a>
    </li>
    <li>
      <a href="https://x.com" class="wm-no-external-icon">
        <wm-icon iconid="twitter">twitter</wm-icon>
      </a>
    </li>
    <li>
      <a href="https://youtube.com" class="wm-no-external-icon">
        <wm-icon iconid="youtube">youtube</wm-icon>
      </a>
    </li>
    <li>
      <a href="https://www.wien.gv.at/bot/" class="wm-no-external-icon">
        <wm-icon iconid="wien-bot">wienbot</wm-icon>
      </a>
    </li>
  </ul>
</wm-list>

Horizontale Liste mit Trennstrich

 Vorschau Code 
<wm-list type="horizontal" separator="pipe" clean alignment="center">
  <ul>
    <li><a href="#" class="wm-h-link-clean"><strong>Impressum</strong></a></li>
    <li><a href="#" class="wm-h-link-clean"><strong>Datenschutz</strong></a></li>
    <li><a href="#" class="wm-h-link-clean"><strong>Barrierefreiheit</strong></a></li>
    <li><a href="#" class="wm-h-link-clean"><strong>Öffentliche Verlautbarungen</strong></a></li>
    <li><a href="#" class="wm-h-link-clean"><strong>Medienservice</strong></a></li>
  </ul>
</wm-list>
Dev

Interaktive Demo
Vorschau Code 
<wm-list data-demo-pattern="wm-list-preview">
  <ul>
    <li><a href="#">Impressum</a></li>
    <li><a href="#">Datenschutz</a></li>
    <li><a href="#">Barrierefreiheit</a></li>
  </ul>
</wm-list>
API

Abhängigkeiten

HTML 
<script src="https://assets.wien.gv.at/theme/latest/js/components/List/List.js" type="module"></script>
 JavaScript 
import { List } from './wienermelange/assets/js/components/List/List.js';

Eigenschaften

Eigenschaften
Eigenschaft Beschreibung Werte Default
clean Liste ohne Aufzählungszeichen, Innen- und Außenabstand Boolean false
gap Abstand zwischen Elementen 'xxs'|'xs'|'s'|'m'|'l'|'none' "s"
type Art der Darstellung 'horizontal'|'row' leer
separator Trennzeichen zwischen Elementen 'pipe' leer
alignment Ausrichtung der Elemente 'center' leer
block Ganze Zeile verlinken? Boolean false

Slots

Name Beschreibung
default <ol> oder <ul>

CSS API

Property Beschreibung
--list-border Rahmen zwischen Listenelementen
--list-border-color Rahmenfarbe
--list-gap Abstand zwischen Elementen
--list-link-background-image Hintergrundbild des 2. Buttons

Kontakt

Haben Sie noch Fragen, Feedback oder brauchen Sie ein Element, das die Pattern Library noch nicht bietet?

handbuch@ma53.wien.gv.at