Quicklink-Liste

Quicklinks sind eine Liste hervorgehobener Links mit Trennstrich. Quicklink-Listen sind auch mehrspaltig möglich (responsives Verhalten - Spaltenanzahl passt sich an die verfügbare Breite an).

Abgrenzung: 2 hervorgehobene Links sind auch ohne Quicklink-Liste möglich, wenn es sich um 2 weiterführende Links und keine Auflistung handelt.

Varianten

Quicklink-Liste - 2 Links

Vorschau

Code

<wm-quicklinks cols="1">
  <ul>
    <li>
      <wm-cta full="">
        <a href="#">Anmeldung Kindergarten</a>
      </wm-cta>
    </li>
    <li>
      <wm-cta full="">
        <a href="#">Anmeldung Hort</a>
      </wm-cta>
    </li>
  </ul>
</wm-quicklinks>

Quicklink-Liste - 2 Spalten

Vorschau

Code

<wm-quicklinks cols="2">
  <ul>
    <li>
      <wm-cta full="true">
        <a href="#">
          Aktuelle Kennzahlen (20. November 20XX)
        </a>
      </wm-cta>
    </li>
    <li>
      <wm-cta full="true">
        <a href="#">
          Tests in Schnupfen-Checkboxen (27. September 20XX)
        </a>
      </wm-cta>
    </li>
    <li>
      <wm-cta full="true">
        <a href="#">
          Mit größtmöglicher Sicherheit in den Schulstart (3. September 20XX)
        </a>
      </wm-cta>
    </li>
  </ul>
</wm-quicklinks>

Quicklink-Liste - 3 Spalten

Vorschau

Code

<wm-quicklinks cols="3">
  <ul>
    <li>
      <wm-cta full="true">
        <a href="#">
          Aktuelle Kennzahlen (20. November 20XX)
        </a>
      </wm-cta>
    </li>
    <li>
      <wm-cta full="true">
        <a href="#">
          Tests in Schnupfen-Checkboxen (27. September 20XX)
        </a>
      </wm-cta>
    </li>
    <li>
      <wm-cta full="true">
        <a href="#">
          Mit größtmöglicher Sicherheit in den Schulstart (3. September 20XX)
        </a>
      </wm-cta>
    </li>
  </ul>
</wm-quicklinks>

Quicklink-Liste auf Section mit Hintergrundfarbe

Vorschau

Code

<wm-section highlight="morgenrot">
  <wm-quicklinks cols="2">
    <ul>
      <li>
        <wm-cta full="true">
          <a href="#">
            Aktuelle Kennzahlen (20. November 20XX)
          </a>
        </wm-cta>
      </li>
      <li>
        <wm-cta full="true">
          <a href="#">
            Tests in Schnupfen-Checkboxen (27. September 20XX)
          </a>
        </wm-cta>
      </li>
      <li>
        <wm-cta full="true">
          <a href="#">
            Mit größtmöglicher Sicherheit in den Schulstart (3. September 20XX)
          </a>
        </wm-cta>
      </li>
    </ul>
  </wm-quicklinks>
</wm-section>

Quicklink-Liste mit Chip

Vorschau

Code

<wm-quicklinks>
  <ul>
    <li>
      <wm-cta full="true">
        <a href="#">
          Aktuelle Kennzahlen 
          <wm-chip color="frischgruen" size="s">Neu</wm-chip>
        </a>
      </wm-cta>
    </li>
    <li>
      <wm-cta full="true">
        <a href="#">
          Tests in Schnupfen-Checkboxen
        </a>
      </wm-cta>
    </li>
    <li>
      <wm-cta full="true">
        <a href="#">
          Mit größtmöglicher Sicherheit in den Schulstart
        </a>
      </wm-cta>
    </li>
  </ul>
</wm-quicklinks>

Dev

Interaktive Demo

Vorschau

Code

<wm-quicklinks data-demo-pattern="wm-quicklinks-preview">
  <ul>
    <li>
      <wm-cta full="true">
        <a href="#">
          Aktuelle Kennzahlen (20. November 2022)
        </a>
      </wm-cta>
    </li>
    <li>
      <wm-cta full="true">
        <a href="#">
          Tests in Schnupfen-Checkboxen (27. September 2022)
        </a>
      </wm-cta>
    </li>
    <li>
      <wm-cta full="true">
        <a href="#">
          Mit größtmöglicher Sicherheit in den Schulstart (3. September 2022)
        </a>
      </wm-cta>
    </li>
  </ul>
</wm-quicklinks>

API

Abhängigkeiten

HTML

<script src="https://assets.wien.gv.at/theme/latest/js/components/Quicklinks/Quicklinks.js" type="module"></script>
<script src="https://assets.wien.gv.at/theme/latest/js/components/CTA/CTA.js" type="module"></script>

JavaScript

import { Quicklinks } from './wienermelange/assets/js/components/Quicklinks/Quicklinks.js';
    import { CTA } from './wienermelange/assets/js/components/CTA/CTA.js';

Eigenschaften

Eigenschaften
Eigenschaft	Beschreibung	Werte	Default
`cols`	Anzahl der Spalten	`1\|2\|3`	`1`

Slots

Name	Beschreibung
`default`	Liste

CSS API

Property	Beschreibung
`--quicklinks-gap`	Abstand zwischen Spalten

Kontakt

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

handbuch@ma53.wien.gv.at