Card

Cards sind Container für unterschiedliche Inhalte.
Mögliche Inhalte: Bild, Überschrift, Text, Links, Tags, Button, Icons, Chips
Die Überschriften und Texte sollten so kurz wie möglich sein, weil Cards der Übersicht dienen sollen.
Buttons, Tags und Hervorgehobene Links sollten in Cards nicht miteinander kombiniert werden.
Es gibt 3 verschiedene Größen: Groß, mittel (=Standard) und klein.
Cards können in einer Reihe und in einem Raster dargestellt werden.

Varianten

Teaser Card

Überschrift: maximal 50 Zeichen
Text: maximal 180 Zeichen

Teaser Card mit hervorgehobenem Link

Vorschau

Stadtteilentwicklungskonzept (SEK) "Mitte 15"

Für von den ÖBB nicht mehr benötigte Lagerflächen entlang der Felberstraße gibt es einen breiten Beteiligungs- und Planungsprozess.

Mehr erfahren

Code

<wm-card size="m" blocklink>
  <h3 slot="heading">
    Stadtteilentwicklungskonzept (SEK) &quot;Mitte 15&quot;
  </h3>
  <img slot="media" src="/images/pattern/modal/modal1.jpg" alt="" />
  <div slot="content">
    <p>
      Für von den ÖBB nicht mehr benötigte Lagerflächen entlang der Felberstraße gibt es einen breiten Beteiligungs- und Planungsprozess.
    </p>
  </div>
  <div slot="postcontent">
    <wm-cta full align="end">
      <a href="#">Mehr erfahren</a>
    </wm-cta>
  </div>
</wm-card>

Teaser Card mit Icon-Zeilen

Mögliche Icon-Zeilen sind Standort, Preis, Zeit/Datum, Beteiligung, Projektstand, Barrierefrei

Vorschau

Julius-Tandler-Platz

Standort 9., Julius-Tandler-Platz
Beteiligung: abgeschlossen
Stand: Konzepterstellung

Code

<wm-card size="m" blocklink>
  <h3 slot="heading">
    <a href="#">Julius-Tandler-Platz</a>
  </h3>
  <img slot="media" src="/images/pattern/cards/julius-tandler-platz-bahnhof.webp" alt="" />
  <div slot="content">
    <wm-list clean>
      <ul>
        <li>
          <wm-icon iconid="pin">Standort</wm-icon>
          9., Julius-Tandler-Platz</li>
        <li>
          <wm-icon iconid="contact_alternative"></wm-icon>
          Beteiligung: abgeschlossen</li>
        <li>
          <wm-icon iconid="clock"></wm-icon>
          Stand: Konzepterstellung</li>
      </ul>
    </wm-list>
  </div>
</wm-card>

Teaser Card ohne Text

Vorschau

Kindergarten

Standort 1., Rathausstraße 42

Städtisch

Code

<wm-card size="m" blocklink>
  <h2 slot="heading">
    <a href="#">Kindergarten</a>
  </h2>
  <wm-stack slot="content" gap="xxs" horizontal>
    <wm-icon iconid="pin">Standort</wm-icon>
    1., Rathausstraße 42</span>
  </wm-stack>
  <div slot="precontent">
    <wm-chip color="flieder" size="s">Städtisch</wm-chip>
  </div>
  <img slot="media" src="/images/pattern/cards/kindergarten.png" alt=""/>
</wm-card>

Teaser Cards im Karussell

Achtung: SEO relevante Inhalte nicht hinter einem Karussell verstecken.

Vorschau

Aktuelles

Alsergrunder Kultursommer 2024

Der 4. Alsergrunder Kultursommer bietet von 28. Juni bis 1. September 2024 ein abwechslungsreiches und buntes Veranstaltungsprogramm.

Die Musiker*innen, 4 Männer und eine Frau, posieren vor einem Rollbalken

Klimabündnis Österreich

Der 9. Bezirk ist dem Klimabündnis Österreich beigetreten. Ziel ist, Bewusstsein für das Thema zu schaffen und nachhaltige Maßnahmen zu leben.

Nach einstimmigem Beschluss der Bezirksvertretung trat Alsergrund dem Klimaschutzbündnis Österreich bei.

Klimabündnis Österreich

Der 9. Bezirk ist dem Klimabündnis Österreich beigetreten. Ziel ist, Bewusstsein für das Thema zu schaffen und nachhaltige Maßnahmen zu leben.

Umgestaltung Frankhplatz

Im Mai und Juni laden Bezirksvertretung und Gebietsbetreuung ein, sich über die Veränderungen zu informieren und Ideen einzubringen.

Stadtplanausschnitt rund um den Frankhplatz im 9. Bezirk

Kindergarten-Anmeldungen

Kindergarten- und Hort-Anmeldungen sind ab jetzt möglich.

Urbanes Experiment Galileigasse

Die Galileigasse wird temporär umgestaltet und ist ab 7. Juni autofrei. Ein lebendiger Treffpunkt zeigt ab 14. Juni, wie eine langfristige Veränderung aussehen könnte.

Lichtentalerpark wird vergrößert

Der Lichtentalerpark wird erweitert, um Anwohner*innen mehr Grünflächen zum Spielen und Erholen zu bieten.

3 neue Bezirke fürs Klimateam

2024 startet das Wiener Klimateam im 9., 12. und 15. Bezirk. Ab September können Sie Ihre Ideen und Vorschläge einbringen.

Bezirksvorsteher Wilfried Zankl, Klimastadtrat Jürgen Czernohorszky, Bezirksvorsteherin Saya Ahmad und Bezirksvorsteher Dietmar Baurecht

Mehr Neuigkeiten

Code

<div>
  <h2>Aktuelles</h2>
  <wm-carousel dots>
    <wm-card size="m" blocklink>
      <h3 slot="heading">
        <a href="#">Alsergrunder Kultursommer 2024</a>
      </h3>
      <div slot="content">
        Der 4. Alsergrunder Kultursommer bietet von 28. Juni bis 1. September 2024 ein abwechslungsreiches und buntes Veranstaltungsprogramm.
      </div>
      <img slot="media" src="/images/pattern/carousel/alsergrunder-kultursommer.webp" title="copyright: Dusha Connection" alt="Die Musiker*innen, 4 Männer und eine Frau, posieren vor einem Rollbalken" />
    </wm-card>
    <wm-card size="m" blocklink>
      <h3 slot="heading">
        <a href="#">Klimabündnis Österreich</a>
      </h3>
      <div slot="content">
        <p>
          <strong>Der 9. Bezirk ist dem Klimabündnis Österreich beigetreten. Ziel ist, Bewusstsein für das Thema zu schaffen und nachhaltige Maßnahmen zu leben.</strong>
        </p>
        <p>Nach einstimmigem Beschluss der Bezirksvertretung trat Alsergrund dem Klimaschutzbündnis Österreich bei.</p>
      </div>
    </wm-card>
    <wm-card canvas size="m" color="goldgelb">
      <h3 slot="heading">
        <a href="#">Klimabündnis Österreich</a>
      </h3>
      <div slot="content">
        Der 9. Bezirk ist dem Klimabündnis Österreich beigetreten. Ziel ist, Bewusstsein für das Thema zu schaffen und nachhaltige Maßnahmen zu leben.
      </div>
      <div slot="media">
        <wm-icon iconid="home" width="85"></wm-icon>
      </div>
    </wm-card>
    <wm-card size="m" blocklink>
      <h3 slot="heading">
        <a href="#">Umgestaltung Frankhplatz</a>
      </h3>
      <div slot="content">
        Im Mai und Juni laden Bezirksvertretung und Gebietsbetreuung ein, sich über die Veränderungen zu informieren und Ideen einzubringen.
      </div>
      <img slot="media" src="/images/pattern/carousel/planausschnitt-frankhplatz.webp" title="copyright: BV 9 - Gebietsbetreuung Stadterneuerung" alt="Stadtplanausschnitt rund um den Frankhplatz im 9. Bezirk" />
    </wm-card>
    <wm-card size="m" blocklink>
      <h3 slot="heading">
        <a href="#">Kindergarten-Anmeldungen</a>
      </h3>
      <div slot="content">
        Kindergarten- und Hort-Anmeldungen sind ab jetzt möglich.
      </div>
      <img slot="media" src="/images/pattern/cards/kindergarten.png" title="" alt="" />
    </wm-card>
    <wm-card size="m" blocklink>
      <h3 slot="heading">
        <a href="#">Urbanes Experiment Galileigasse</a>
      </h3>
      <div slot="content">
        Die Galileigasse wird temporär umgestaltet und ist ab 7. Juni autofrei. Ein lebendiger Treffpunkt zeigt ab 14. Juni, wie eine langfristige Veränderung aussehen könnte.
      </div>
      <img slot="media" src="/images/pattern/carousel/galileigasse.webp" title="copyright: Tim Dornaus epilogy.photography" alt="Grätzloase mit Holzzaun und Sitzmöbeln" />
    </wm-card>
    <wm-card size="m" blocklink>
      <h3 slot="heading">
        <a href="#">Lichtentalerpark wird vergrößert</a>
      </h3>
      <div slot="content">
        Der Lichtentalerpark wird erweitert, um Anwohner*innen mehr Grünflächen zum Spielen und Erholen zu bieten.
      </div>
      <img slot="media" src="/images/pattern/carousel/lichtentalerpark.webp" title="copyright: Wiener Stadtgärten" alt="Spielplatz in einem Park" />
    </wm-card>
    <wm-card size="m" blocklink>
      <h3 slot="heading">
        <a href="#">3 neue Bezirke fürs Klimateam</a>
      </h3>
      <div slot="content">
        2024 startet das Wiener Klimateam im 9., 12. und 15. Bezirk. Ab September können Sie Ihre Ideen und Vorschläge einbringen.
      </div>
      <img slot="media" src="/images/pattern/carousel/klimateam-neue-bezirke.webp" title="copyright: Stadt Wien/Martin VOTAVA" alt="Bezirksvorsteher Wilfried Zankl, Klimastadtrat Jürgen Czernohorszky, Bezirksvorsteherin Saya Ahmad und Bezirksvorsteher Dietmar Baurecht" />
    </wm-card>
  </wm-carousel>
  <div style="text-align: right;">
    <wm-cta>
      <a href="#">Mehr Neuigkeiten</a>
    </wm-cta>
  </div>
</div>

Teaser Card mit Farbe

Auf weißem Hintergrund sind Teaser Cards mit Farbe in allen Markenfarben möglich, auch in den Light-Farben. Auf farbigem Hintergrund (siehe Pattern Section mit Hintergrund) muss eine Teaser Card immer 100 Prozent Deckkraft haben.

Teaser Card farbig mit Text

In dieser Variante wandert die Überschrift ins Bild.

Vorschau

Mitte 15

Für von den ÖBB nicht mehr benötigte Lagerflächen entlang der Felberstraße gibt es einen breiten Beteiligungs- und Planungsprozess.

Code

<wm-card canvas size="m" color="flieder" position="block-end inline-start" blocklink>
  <h2 slot="media">
    <a href="#">Mitte 15</a>
  </h2>
  <div slot="content">
    <p>Für von den ÖBB nicht mehr benötigte Lagerflächen entlang der Felberstraße gibt es einen breiten Beteiligungs- und Planungsprozess.</p>
  </div>
</wm-card>

Teaser Card farbig mit Icon

Vorschau

Für von den ÖBB nicht mehr benötigte Lagerflächen entlang der Felberstraße gibt es einen breiten Beteiligungs- und Planungsprozess.

Code

<wm-card canvas size="m" color="goldgelb">
  <h2 slot="media">
    <wm-icon iconid="home" width="85"></wm-icon>
  </h2>
  <div slot="content">
    <p>Für von den ÖBB nicht mehr benötigte Lagerflächen entlang der Felberstraße gibt es einen breiten Beteiligungs- und Planungsprozess.</p>
  </div>
</wm-card>

Card mit direkten Infos

Bietet im Gegensatz zu den Teaser Cards direkte Infos und optional weiterführende Links.

Card mit Überschrift und Text

Vorschau

Stadtteilentwicklungskonzept (SEK) "Mitte 15"

Für von den ÖBB nicht mehr benötigte Lagerflächen entlang der Felberstraße gibt es einen breiten Beteiligungs- und Planungsprozess.

Code

<wm-card size="m">
  <h3 slot="heading">
    Stadtteilentwicklungskonzept (SEK) &quot;Mitte 15&quot;
  </h3>
  <div slot="content">
    <p>
      Für von den ÖBB nicht mehr benötigte Lagerflächen entlang der Felberstraße gibt es einen breiten Beteiligungs- und Planungsprozess.
    </p>
  </div>
</wm-card>

Card mit Text und Button

Vorschau

Unser Newsletter informiert Sie über Veranstaltungen, Publikationen und Neuigkeiten in den Bereichen Statistik und Innovation.

Code

<wm-card size="l">
  <h2 slot="heading">Newsletter</h2>
  <div slot="content">
    <p>Unser Newsletter informiert Sie über Veranstaltungen, Publikationen und Neuigkeiten in den Bereichen Statistik und Innovation.</p>
  </div>
  <div slot="postcontent">
    <wm-button full="true" kind="primary" color="frischgruen" alignment="center">
      <a href="#" class="wm-e-button">Abonnieren</a>
    </wm-button>
  </div>
</wm-card>

Card volle Textbreite

Vorschau

Für den Online-Antrag benötigen Sie:

Zulassungsschein/e
Führerschein
Zugangsdaten im Falle elektronischer Bezahlung

Antrag stellen

Weitere Unterlagen können erforderlich sein:

Bei Leasing- oder Firmenfahrzeugen
Wenn Sie diplomatischen Status haben
Wenn Sie Inhaber*in eines Behindertenpasses sind ("Erforderliche Unterlagen")

Code

<wm-section contentsize="text">
  <wm-card size="full">
    <h3 slot="heading">Für den Online-Antrag benötigen Sie:</h3>
    <div slot="content">
      <ul>
        <li>Zulassungsschein/e</li>
        <li>Führerschein</li>
        <li>Zugangsdaten im Falle elektronischer Bezahlung</li>
      </ul>
      <p>
        <a href="#" class="wm-e-button">Antrag stellen</a>
      </p>
      <p>Weitere Unterlagen können erforderlich sein:</p>
      <ul>
        <li>Bei Leasing- oder Firmenfahrzeugen</li>
        <li>Wenn Sie diplomatischen Status haben</li>
        <li>Wenn Sie Inhaber*in eines Behindertenpasses sind (<a href="#unterlagen">"Erforderliche Unterlagen"</a>)</li>
      </ul>
    </div>
  </wm-card>
</wm-section>

Card mit Tags

Tags befinden sich am Ende einer Card und bieten Verknüpfungen zu häufig gesuchten, inhaltlich passenden Informationen.

Vorschau

Kosten

Bitte erfragen Sie die jeweiligen Kosten direkt am Standort.

Förderungen für Eltern

Code

<wm-card>
  <div slot="content">
    <wm-stack gap="s" vertical equal>
      <h2>Kosten</h2>
      Bitte erfragen Sie die jeweiligen Kosten direkt am Standort.
    </wm-stack>
  </div>
  <div slot="postcontent">
    <wm-tag-list>
      <ul>
        <li>
          <wm-tag open="false">
            <a href="#">Förderungen für Eltern</a>
          </wm-tag>
        </li>
      </ul>
    </wm-tag-list>
  </div>
</wm-card>

Card mit Tabelle

In Cards sollten nur sehr einfache Tabellen-Inhalte mit maximal 2 Spalten eingebunden werden.

Vorschau

Öffnungszeiten

Montag bis Freitag: 9 bis 20 Uhr
Samstag, Sonntag und Feiertage: 8 bis 20 Uhr

Ab 1. September:
Montag bis Freitag: 9 bis 19 Uhr
Samstag, Sonntag und Feiertage: 8 bis 19 Uhr

Preise
Tarif	Kosten
Erwachsene	5,90 Euro
Erwachsene ermäßigt	4,40 Euro
Jugendlich	3,20 Euro
Kinder	3,20 Euro
Kleinkinder	Gratis

Parkscheinkosten
Dauer	Preis
15 Minuten (Parkschein Violett)	Gebührenfrei
30 Minuten (Parkschein Rot)	1,05 Euro
1 Stunde (Parkschein Blau)	2,10 Euro

Code

<wm-card size="l">
<h2 slot="heading">
Öffnungszeiten
</h2>
  <div slot="content">
    <p>
      Montag bis Freitag: 9 bis 20 Uhr<br/> Samstag, Sonntag und Feiertage: 8 bis 20 Uhr
    </p>
    <p>
      <strong>Ab 1. September:</strong><br/> Montag bis Freitag: 9 bis 19 Uhr<br/> Samstag, Sonntag und Feiertage: 8 bis 19 Uhr
    </p>
    <div>
      <table>
        <caption>Preise</caption>
        <thead>
          <tr>
            <th>Tarif</th>
            <th>Kosten</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Erwachsene</td>
            <td>5,90 Euro</td>
          </tr>
          <tr>
            <td>Erwachsene ermäßigt</td>
            <td>4,40 Euro</td>
          </tr>
          <tr>
            <td>Jugendlich</td>
            <td>3,20 Euro</td>
          </tr>
          <tr>
            <td>Kinder</td>
            <td>3,20 Euro</td>
          </tr>
          <tr>
            <td>Kleinkinder</td>
            <td>Gratis</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div>
      <table>
        <caption>Parkscheinkosten</caption>
        <thead>
          <tr>
            <th>Dauer</th>
            <th>Preis</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>15 Minuten (Parkschein Violett)</td>
            <td>Gebührenfrei</td>
          </tr>
          <tr>
            <td>30 Minuten (Parkschein Rot)</td>
            <td>1,05 Euro</td>
          </tr>
          <tr>
            <td>1 Stunde (Parkschein Blau)</td>
            <td>2,10 Euro</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</wm-card>

Card responsive mit Bild

Mobil wird die Card mit responsivem Bild wie eine reguläre Card untereinander dargestellt, bei größeren Bildschirmauflösungen wie am Desktop nebeneinander. Achtung: Der Inhalt bestimmt die Größe des Bildes. Diese Variante der Cards sollte also nur Elemente mit wenig Text (maximal 280 Zeichen) und weiterführende Absprungpunkte wie Tags oder hervorgehobene Links enthalten.

Vorschau

Kindergarten

Städtisch

Kindergarten- und Hort-Anmeldungen sind ab jetzt möglich.

Standort 9., Julius-Tandler-Platz
Wann: ab 1.11.20XX

Anmeldung Kindergarten

Code

<wm-card size="full-responsive" blocklink>

  <h2 slot="heading">
    Kindergarten
  </h2>


  <div slot="precontent">
    <wm-chip color="flieder" size="s">Städtisch</wm-chip>
  </div>

  <picture slot="media">
    <source media="(max-width: 600px)" srcset="/images/pattern/cards/kindergarten.png">
    <source media="(min-width: 1024)" srcset="/images/pattern/cards/kindergarten_1x1.webp">
    <img src="/images/pattern/cards/kindergarten_1x1.webp" alt=""/>
  </picture>

  <div slot="content">
    <wm-stack vertical>
      <p>Kindergarten- und Hort-Anmeldungen sind ab jetzt möglich.</p>
      <wm-list type="row">
        <ul>
          <li>
            <wm-icon iconid="pin">Standort</wm-icon>
            9., Julius-Tandler-Platz</li>
          <li>
            <wm-icon iconid="clock"></wm-icon>
            Wann: ab 1.11.20XX</li>
        </ul>
      </wm-list>
    </wm-stack>
  </div>

  <div slot="postcontent" class="wm-u-tar">
    <wm-cta>
      <a href="#">Anmeldung Kindergarten</a>
    </wm-cta>
  </div>
</wm-card>

Card responsive farbig mit Icon

Mobil wie eine reguläre Card untereinander, auf Desktop horizontale Teilung. Achtung: der Inhalt bestimmt die Größe des farbigen Containers.

Vorschau

Kindergarten

Städtisch

Kindergarten- und Hort-Anmeldungen sind ab jetzt möglich.

Standort 9., Julius-Tandler-Platz
Wann: ab 1.11.20XX

Anmeldung Kindergarten

Code

<wm-card canvas color="flieder" size="full-responsive" blocklink>

  <h2 slot="heading">
    Kindergarten
  </h2>
  <div slot="media">
    <wm-icon iconid="home" width="150"></wm-icon>
  </div>

  <div slot="precontent">
    <wm-chip color="flieder" size="s">Städtisch</wm-chip>
  </div>

  <div slot="content">
    <wm-stack vertical>
      <p>Kindergarten- und Hort-Anmeldungen sind ab jetzt möglich.</p>
      <wm-list type="row">
        <ul>
          <li>
            <wm-icon iconid="pin">Standort</wm-icon>
            9., Julius-Tandler-Platz</li>
          <li>
            <wm-icon iconid="clock"></wm-icon>
            Wann: ab 1.11.20XX</li>
        </ul>
      </wm-list>
    </wm-stack>
  </div>

  <div slot="postcontent" class="wm-u-tar">
    <wm-cta>
      <a href="#">Anmeldung Kindergarten</a>
    </wm-cta>
  </div>
</wm-card>

Card mit Links und Bild

Vorschau

Sicher unterwegs

Code

<wm-card size="m" blocklink>
  <h2 slot="heading">Sicher unterwegs</h2>
  <div slot="content">
    <wm-list gap="xs">
      <ul>
        <li><a href="#">Sicherheitstipps</a></li>
        <li><a href="#">Verkehrsregeln für Radfahrer*innen</a></li>
        <li><a href="#">Bodenmarkierungen</a></li>
        <li><a href="#">Verkehrszeichen</a></li>
        <li><a href="#">Beschilderung von Radwegen</a></li>
      </ul>
    </wm-list>
  </div>
  <img slot="media" src="/images/pattern/cards/julius-tandler-platz-bahnhof.webp" alt="" />
</wm-card>

Card mit Links ohne Bild

Vorschau

Sicher unterwegs

Code

<wm-card size="m">
  <h2 slot="heading">Sicher unterwegs</h2>
  <div slot="content">
    <wm-list gap="xs">
      <ul>
        <li><a href="#">Sicherheitstipps</a></li>
        <li><a href="#">Verkehrsregeln für Radfahrer*innen</a></li>
        <li><a href="#">Bodenmarkierungen</a></li>
        <li><a href="#">Verkehrszeichen</a></li>
        <li><a href="#">Beschilderung von Radwegen</a></li>
      </ul>
    </wm-list>
  </div>
</wm-card>

Card mit Quicklink-Liste

Vorschau

Code

<wm-card size="m">
  <div slot="content">
    <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>
  </div>
</wm-card>

Card mit Infobox ohne Media-Element

Vorschau

Stand: Grundlagenerhebung
Standort 15., Umgebung Westbahnhof
Beteiligung: Offen
Mitte 15 - Du und dein Grätzl. Gestalte mit!
Weiterer Link

Code

<wm-card size="l">
  <wm-list type="row" slot="content">
    <ul>
      <li>
        <wm-icon iconid="clock"></wm-icon>
        Stand: Grundlagenerhebung
      </li>
      <li>
        <wm-icon iconid="pin">Standort</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>
        <p>
          <a href="https://www.mitte15.at/">Mitte 15 - Du und dein Grätzl. Gestalte mit!</a>
          <br />
          <a href="https://www.mitte15.at/">Weiterer Link</a>
        </p>
      </li>
    </ul>
  </wm-list>
</wm-card>

Card mit Infobox und Media-Element horizontal

Media-Element links oder rechts möglich
Entweder Bild, Video, Stadtplan, ViennaViz et cetera möglich

Vorschau

Lage: 22., Donaupark
Größe: circa 632.966 Quadratmeter
Angebote: Spielplätze, Sportanlagen, Sehenswürdigkeiten
Übersichtsplan
Telefon: +43 1 4000 xxxx

Code

<wm-card size="default">
  <wm-stack slot="content" equal grow gap="m">
    <div>
      <wm-list type="row">
        <ul>
          <li>
            <wm-icon iconid="pin"></wm-icon>
            Lage: 
            <a href="#">22., Donaupark</a>
          </li>
          <li>
            <wm-icon iconid="info"></wm-icon>
            Größe: circa 632.966 Quadratmeter
          </li>
          <li>
            <wm-icon iconid="info"></wm-icon>
            Angebote: Spielplätze, Sportanlagen, Sehenswürdigkeiten
          </li>
          <li>
            <wm-icon iconid="download"></wm-icon>
            <a href="#">Übersichtsplan</a>
          </li>
          <li>
            <wm-icon iconid="telefon"></wm-icon>
            <div>
              Telefon:
              <a href="tel:">+43 1 4000 xxxx</a>
            </div>
          </li>
        </ul>
      </wm-list>
    </div>
    <div><iframe allowfullscreen style="overflow: auto; border:none;" scrolling="auto" frameborder="0" src="https://www.wien.gv.at/video/embed/index.html?mid=694" width="1000" name="wien.gv.at Video" title="wien.gv.at Video"> <a href="https://www.wien.gv.at/video/embed/index.html?mid=694"> Video</a> </iframe></div>

  </wm-stack>
</wm-card>

Card mit Infobox und Media-Element vertikal

Vorschau

Auer-Welsbach-Park

15. Bezirk
Öffnungszeiten: 0 bis 24 Uhr
Größe: circa 110.517 Quadratmeter
Telefon: 01 4000 8042
Website
Wasser im Park Spielen erlaubt Hunde verboten

Code

<wm-card size="l">
  <h2 slot="heading">Auer-Welsbach-Park</h2>
  <wm-map-alt slot="media" id="innenstadt" geocoder update center="16.383657562770395, 48.21091265008741" style="--map-ratio: 16 / 9;--map-height: auto;">
    <wm-mapmarker lat="48.18859589" lng="16.31648157"></wm-mapmarker>
  </wm-map-alt>
  <div slot="content">
    <wm-list type="row">
      <ul>
        <li>
          <wm-icon iconid="vienna"></wm-icon>
          <span>15. Bezirk</span>
        </li>
        <li>
          <wm-icon iconid="clock"></wm-icon>
          Öffnungszeiten: 0 bis 24 Uhr
        </li>
        <li>
          <wm-icon iconid="park"></wm-icon>
          <span>Größe: circa 110.517 Quadratmeter</span>
        </li>
        <li>
          <wm-icon iconid="phone"></wm-icon>
          Telefon: 01 4000 8042
        </li>
        <li>
          <wm-icon iconid="language"></wm-icon>
          <a href="#">Website</a>
        </li>
        <li>
          <wm-stack wrap="" gap="xxs" horizontal="">
            <wm-chip color="frischgruen" size="s"><wm-icon iconid="water" width="22"></wm-icon> Wasser im Park</wm-chip>
            <wm-chip color="frischgruen" size="s"><wm-icon iconid="games" width="22"></wm-icon> Spielen erlaubt</wm-chip>
            <wm-chip color="morgenrot" size="s"><wm-icon iconid="dogno" width="22"></wm-icon> Hunde verboten</wm-chip>
          </wm-stack>
        </li>
      </ul>
    </wm-list>
  </div>
</wm-card>

Card mit Media-Element und Text

Vorschau

Klimafahrplan

Wien will bis 2040 klimaneutral sein. Der Wiener Klimafahrplan legt Ziele fest, um die Klimaneutralität zu erreichen. Er enthält über 100 Maßnahmen, die laufend ergänzt und angepasst werden. Im Mittelpunkt der sozialen Wiener Klimapolitik steht das Wohlergehen und die Gesundheit aller Menschen in der Stadt.

Zum Klimafahrplan

Code

<wm-section contentsize="full" highlight="nebelgrau">
  <div>
    <h2>Klimafahrplan</h2>
    <wm-stack vertical gap="m">
      <div>
        <wm-grid size="full" gap="m">
          <wm-card>
            <wm-stack gap="m" slot="content" equal grow>
              <div>
                <wm-stack vertical gap="s">
                  <a href="/images/pattern/cards/klimafahrplan.webp" data-modal="image1545457259">
                    <img src="/images/pattern/cards/klimafahrplan.webp" width="770" height="433" alt="Illustration zum Thema Klimafahrplan 2040" title="copyright: Stadt Wien" loading="lazy" />
                  </a>
                  <template id="image1545457259">
                    <wm-carousel single="1070" style="--carousel-shadow-offset: 0px" hidedots="" label="Bilder">
                      <div class="image">
                        <img src="/images/pattern/cards/klimafahrplan.webp" width="1140" height="641" alt="Illustration zum Thema Klimafahrplan 2040" title="copyright: Stadt Wien" sizes="100vw" loading="lazy" />
                      </div>
                    </wm-carousel>
                  </template>
                </wm-stack>
              </div>
              <div>
                <wm-stack vertical gap="s">
                  <p>
                    Wien will bis 2040 klimaneutral sein. Der Wiener Klimafahrplan legt Ziele fest, um die Klimaneutralität zu erreichen. Er
                    enthält über 100 Maßnahmen, die laufend ergänzt und angepasst werden. Im Mittelpunkt der sozialen Wiener Klimapolitik
                    steht das Wohlergehen und die Gesundheit aller Menschen in der Stadt.
                  </p>
                </wm-stack>
              </div>
            </wm-stack>
            <div slot="postcontent">
              <wm-cta full align="right">
                <a href="https://www.wien.gv.at/spezial/klimafahrplan/">Zum Klimafahrplan</a>
              </wm-cta>
            </div>
          </wm-card>
        </wm-grid>
      </div>
    </wm-stack>
  </div>
</wm-section>

Card Visitenkarte

Card Visitenkarte 50 Prozent

Vorschau

Bezirksvorsteherin Maria Magistrati

Sprechstunden finden jeden letzten Dienstag im Monat statt: Anmeldung
Standort
1., Rathausstraße 42, 1. Stock, Zimmer 318
Telefon: +43 1 4000 xxxx
E-Mail: maria.magistrati@wien.gv.at
Kontaktformular für Ihre Meinung

Code

<wm-card size="l">
  <h2 slot="heading">Bezirksvorsteherin Maria Magistrati</h2>
  <img slot="media" src="/images/pattern/sonstige/avatar/maria-magistrati.svg" alt="Foto Maria Magistrati" loading="lazy" />
  <div slot="content">
    <wm-stack vertical gap="m">
      <wm-list gap="xs" type="row" clean>
        <ul>
          <li>
            <wm-icon iconid="info" width="28" height="28"></wm-icon>
            <div>
              <strong>Sprechstunden</strong>
              finden jeden letzten Dienstag im Monat statt:
              <a href="#">Anmeldung</a>
            </div>
          </li>
          <li>
            <wm-icon iconid="pin" width="28" height="28">Standort</wm-icon>
            <div>
              <a href="#">1., Rathausstraße 42</a>, 1. Stock, Zimmer 318
            </div>
          </li>
          <li>
            <wm-icon iconid="telefon" width="28" height="28"></wm-icon>
            <div>
              Telefon:
              <a href="tel:">+43 1 4000 xxxx</a>
            </div>
          </li>
          <li>
            <wm-icon iconid="email" width="28" height="28"></wm-icon>
            <div>
              E-Mail:
              <a href="mailto:maria.magistrati@wien.gv.at">maria.magistrati@wien.gv.at</a>
            </div>
          </li>
          <li>
            <wm-icon iconid="contact_alternative" width="28" height="28"></wm-icon>
            <div>
              <a href="#">Kontaktformular für Ihre Meinung</a>
            </div>
          </li>
        </ul>
      </wm-list>
      <wm-list gap="xs" type="horizontal">
        <ul>
          <li><a href="#" class="wm-no-external-icon"><wm-icon iconid="facebook">facebook</wm-icon></a></li>
          <li><a href="#" class="wm-no-external-icon"><wm-icon iconid="instagram">instagram</wm-icon></a></li>
        </ul>
      </wm-list>
    </wm-stack>
  </div>
</wm-card>

Card Visitenkarte 100 Prozent

Vorschau

Bezirksvorsteherin Maria Magistrati

Pressefoto herunterladen

Sprechstunden finden jeden letzten Dienstag im Monat statt: Anmeldung
Standort
1., Rathausstraße 42, 1. Stock, Zimmer 318
Telefon: +43 1 4000 xxxx
E-Mail: maria.magistrati@wien.gv.at
Kontaktformular für Ihre Meinung

Code

<wm-card>
  <h2 slot="heading">Bezirksvorsteherin Maria Magistrati</h2>
  <wm-stack gap="m" slot="content" equal grow>
    <div>
      <wm-stack vertical gap="s">
        <figure>
          <a href="#" data-modal="image1631644986">
            <img src="/images/pattern/sonstige/avatar/maria-magistrati.svg" alt="Foto Maria Magistrati" title="" loading="lazy" />
          </a>
          <figcaption>
            <a href="#">Pressefoto herunterladen</a>
          </figcaption>
        </figure>
        <template id="image1631644986">
          <wm-carousel single="1070" style="--carousel-shadow-offset: 0px" hidedots="" label="Bilder">
            <figure class="image">
              <picture>
                <source type="image/webp" srcset="/images/pattern/sonstige/avatar/maria-magistrati.svg 1140w" sizes="100vw" />
                <img src="/images/pattern/sonstige/avatar/maria-magistrati.svg" srcset="/images/pattern/sonstige/avatar/maria-magistrati.svg 1140w" width="1140" height="641"  alt="Foto Maria Magistrati" title="" sizes="100vw" loading="lazy" />
              </picture>
              <figcaption>
                <a href="#">Pressefoto herunterladen</a>
              </figcaption>
            </figure>
          </wm-carousel>
        </template>
      </wm-stack>
    </div>
    <div>
      <wm-stack vertical gap="m">
        <wm-list gap="xs" type="row" clean>
          <ul>
            <li>
              <wm-icon iconid="info" width="28" height="28"></wm-icon>
              <div>
                <strong>Sprechstunden</strong>
                finden jeden letzten Dienstag im Monat statt:
                <a href="#">Anmeldung</a>
              </div>
            </li>
            <li>
              <wm-icon iconid="pin" width="28" height="28">Standort</wm-icon>
              <div>
                <a href="#">1., Rathausstraße 42</a>, 1. Stock, Zimmer 318
              </div>
            </li>
            <li>
              <wm-icon iconid="telefon" width="28" height="28"></wm-icon>
              <div>
                Telefon:
                <a href="tel:">+43 1 4000 xxxx</a>
              </div>
            </li>
            <li>
              <wm-icon iconid="email" width="28" height="28"></wm-icon>
              <div>
                E-Mail:
                <a href="mailto:maria.magistrati@wien.gv.at">maria.magistrati@wien.gv.at</a>
              </div>
            </li>
            <li>
              <wm-icon iconid="contact_alternative" width="28" height="28"></wm-icon>
              <div>
                <a href="#">Kontaktformular für Ihre Meinung</a>
              </div>
            </li>
          </ul>
        </wm-list>
        <wm-list gap="xs" type="horizontal">
          <ul>
            <li><a href="#" class="wm-no-external-icon"><wm-icon iconid="facebook">facebook</wm-icon></a></li>
            <li><a href="#" class="wm-no-external-icon"><wm-icon iconid="instagram">instagram</wm-icon></a></li>
          </ul>
        </wm-list>
      </wm-stack>
    </div>
  </wm-stack>
</wm-card>

Card mit Chip

Beim Chip kann man aus 3 Farben wählen:

Grün - für positive Zusatzinformationen wie "Gratis"
Rot - für negative Zusatzinformationen wie "Hunde verboten"
Grau - für neutrale Zusatzinformationen

Card mit Eigenschaften

Bei einer Card mit Chip unten muss der Chip immer das letzte Element sein. Ein Chip unten ist nicht kombinierbar mit einem Button, Tags oder einem hervorgehobenen Link.

Vorschau

Stadtteilentwicklungskonzept (SEK) "Mitte 15"

Für von den ÖBB nicht mehr benötigte Lagerflächen entlang der Felberstraße gibt es einen breiten Beteiligungs- und Planungsprozess.

In Planung

Code

<wm-card size="m">
  <h3 slot="heading">
    Stadtteilentwicklungskonzept (SEK) &quot;Mitte 15&quot;
  </h3>
  <img slot="media" src="/images/pattern/modal/modal1.jpg" alt="" />
  <div slot="content">
    <p>
    Für von den ÖBB nicht mehr benötigte Lagerflächen entlang der Felberstraße gibt es einen breiten Beteiligungs- und Planungsprozess.
    </p>
  </div>
  <div slot="postcontent">
    <wm-chip color="frischgruen" size="s">In Planung</wm-chip>
  </div>
</wm-card>

Card mit Chip und Icon

Vorschau

Stadtteilentwicklungskonzept (SEK) "Mitte 15"

Für von den ÖBB nicht mehr benötigte Lagerflächen entlang der Felberstraße gibt es einen breiten Beteiligungs- und Planungsprozess.

Hunde verboten

Code

<wm-card size="m">
  <h3 slot="heading">
    Stadtteilentwicklungskonzept (SEK) &quot;Mitte 15&quot;
  </h3>
  <img slot="media" src="/images/pattern/modal/modal1.jpg" alt="" />
  <div slot="content">
    <p>
      Für von den ÖBB nicht mehr benötigte Lagerflächen entlang der Felberstraße gibt es einen breiten Beteiligungs- und Planungsprozess.
    </p>
  </div>
  <div slot="postcontent">
    <wm-chip color="morgenrot" size="s">
      <wm-icon iconid="dogno" width="22"></wm-icon>
      Hunde verboten
    </wm-chip>
  </div>
</wm-card>

Card mit Kategorie

Der Kategorie-Chip steht über dem Card-Titel und kann in allen Markenfarben verwendet werden. Es darf immer nur eine Kategorie angezeigt werden.

Vorschau

Kindergarten

Standort

1., Rathausstraße 42

Städtisch

Code

<wm-card size="m" blocklink>
  <h2 slot="heading">
    <a href="#">Kindergarten</a>
  </h2>
  <wm-stack slot="content" gap="xxs" horizontal>
    <wm-icon iconid="pin">Standort</wm-icon>
    <span>1., Rathausstraße 42</span>
  </wm-stack>
  <div slot="precontent">
    <wm-chip color="flieder" size="s">Städtisch</wm-chip>
  </div>
  <img slot="media" src="/images/pattern/cards/kindergarten.png" alt=""/>
</wm-card>

Card mit Störer

Störer sind Textflächen im Bild, die besonders auffallen sollen. Dazu zählen beispielsweise Aktionen wie "1+1 Gratis", "-10%"" oder ähnliche. Störer sollten prinzipiell im vorgegebenen Grünton (Frischgrün) eingesetzt werden. In Ausnahmefällen sind sie in Sonderaufritten auch in anderen Markenfarben möglich. Bitte dafür um kurze Abstimmung mit dem Handbuch-Team.

Card mit Störer eckig

Eckige Störer dürfen maximal 15 Zeichen Text enthalten.

Vorschau

Praterturm im Wiener Prater

Am Prater-Montag erhalten Sie beim Kauf eines Tickets ein 2. gratis.

1+1 Gratis

Code

<wm-card size="l">
  <h2 slot="heading">
    Praterturm im Wiener Prater
  </h2>
  <img slot="media" src="/images/pattern/cards/praterturm.jpg" alt="">
  <div slot="content">
    Am Prater-Montag erhalten Sie beim Kauf eines Tickets ein 2. gratis.
  </div>
  <div slot="eyecatcher">
    1+1 Gratis
  </div>
</wm-card>

Card mit Störer rund

Runde Störer dürfen maximal 5 bis 6 Zeichen enthalten, damit der Text nicht über den Rand hinausgeht.

Vorschau

Stadtteilentwicklungskonzept (SEK) "Mitte 15"

Für von den ÖBB nicht mehr benötigte Lagerflächen entlang der Felberstraße gibt es einen breiten Beteiligungs- und Planungsprozess.

-10%

Code

<wm-card size="m" eyecatcher="round" position="block-start inline-start">
  <h3 slot="heading">
    Stadtteilentwicklungskonzept (SEK) &quot;Mitte 15&quot;
  </h3>
  <img slot="media" src="/images/pattern/modal/modal1.jpg" alt="" />
  <div slot="content">
    <p>
      Für von den ÖBB nicht mehr benötigte Lagerflächen entlang der Felberstraße gibt es einen breiten Beteiligungs- und Planungsprozess.
    </p>
  </div>
  <div slot="eyecatcher">-10%</div>
</wm-card>

Card in Reihen

Cards kann es auch in mehreren Card-Reihen untereinander geben.

Reihen mit mittleren Cards

Vorschau

Alsergrunder Kultursommer 2024

Der 4. Alsergrunder Kultursommer bietet von 28. Juni bis 1. September 2024 ein abwechslungsreiches und buntes Veranstaltungsprogramm.

Umgestaltung Frankhplatz

Im Mai und Juni laden Bezirksvertretung und Gebietsbetreuung ein, sich über die Veränderungen zu informieren und Ideen einzubringen.

Kindergarten-Anmeldungen

Kindergarten- und Hort-Anmeldungen sind ab jetzt möglich.

Urbanes Experiment Galileigasse

Die Galileigasse wird temporär umgestaltet und ist ab 7. Juni autofrei. Ein lebendiger Treffpunkt zeigt ab 14. Juni, wie eine langfristige Veränderung aussehen könnte.

Lichtentalerpark wird vergrößert

Der Lichtentalerpark wird erweitert, um Anwohner*innen mehr Grünflächen zum Spielen und Erholen zu bieten.

3 neue Bezirke fürs Klimateam

2024 startet das Wiener Klimateam im 9., 12. und 15. Bezirk. Ab September können Sie Ihre Ideen und Vorschläge einbringen.

Code

<wm-grid size="m" gap="s">
  <wm-card blocklink>
    <h3 slot="heading">
      <a href="#">Alsergrunder Kultursommer 2024</a>
    </h3>
    <div slot="content">
      Der 4. Alsergrunder Kultursommer bietet von 28. Juni bis 1. September 2024 ein abwechslungsreiches und buntes Veranstaltungsprogramm.
    </div>
    <img slot="media" src="/images/pattern/carousel/alsergrunder-kultursommer.webp" title="copyright: Dusha Connection" alt="Die Musiker*innen, 4 Männer und eine Frau, posieren vor einem Rollbalken" />
  </wm-card>
  <wm-card blocklink>
    <h3 slot="heading">
      <a href="#">Umgestaltung Frankhplatz</a>
    </h3>
    <div slot="content">
      Im Mai und Juni laden Bezirksvertretung und Gebietsbetreuung ein, sich über die Veränderungen zu informieren und Ideen einzubringen.
    </div>
    <img slot="media" src="/images/pattern/carousel/planausschnitt-frankhplatz.webp" title="copyright: BV 9 - Gebietsbetreuung Stadterneuerung" alt="Stadtplanausschnitt rund um den Frankhplatz im 9. Bezirk" />
  </wm-card>
  <wm-card blocklink>
    <h3 slot="heading">
      <a href="#">Kindergarten-Anmeldungen</a>
    </h3>
    <div slot="content">
      Kindergarten- und Hort-Anmeldungen sind ab jetzt möglich.
    </div>
    <img slot="media" src="/images/pattern/cards/kindergarten.png" title="" alt="" />
  </wm-card>
  <wm-card blocklink>
    <h3 slot="heading">
      <a href="#">Urbanes Experiment Galileigasse</a>
    </h3>
    <div slot="content">
      Die Galileigasse wird temporär umgestaltet und ist ab 7. Juni autofrei. Ein lebendiger Treffpunkt zeigt ab 14. Juni, wie eine langfristige Veränderung aussehen könnte.
    </div>
    <img slot="media" src="/images/pattern/carousel/galileigasse.webp" title="copyright: Tim Dornaus epilogy.photography" alt="Grätzloase mit Holzzaun und Sitzmöbeln" />
  </wm-card>
  <wm-card blocklink>
    <h3 slot="heading">
      <a href="#">Lichtentalerpark wird vergrößert</a>
    </h3>
    <div slot="content">
      Der Lichtentalerpark wird erweitert, um Anwohner*innen mehr Grünflächen zum Spielen und Erholen zu bieten.
    </div>
    <img slot="media" src="/images/pattern/carousel/lichtentalerpark.webp" title="copyright: Wiener Stadtgärten" alt="Spielplatz in einem Park" />
  </wm-card>
  <wm-card blocklink>
    <h3 slot="heading">
      <a href="#">3 neue Bezirke fürs Klimateam</a>
    </h3>
    <div slot="content">
      2024 startet das Wiener Klimateam im 9., 12. und 15. Bezirk. Ab September können Sie Ihre Ideen und Vorschläge einbringen.
    </div>
    <img slot="media" src="/images/pattern/carousel/klimateam-neue-bezirke.webp" title="copyright: Stadt Wien/Martin VOTAVA" alt="Bezirksvorsteher Wilfried Zankl, Klimastadtrat Jürgen Czernohorszky, Bezirksvorsteherin Saya Ahmad und Bezirksvorsteher Dietmar Baurecht" />
  </wm-card>
</wm-grid>

Reihen mit großen Cards

Vorschau

Alsergrunder Kultursommer 2024

Der 4. Alsergrunder Kultursommer bietet von 28. Juni bis 1. September 2024 ein abwechslungsreiches und buntes Veranstaltungsprogramm.

Umgestaltung Frankhplatz

Im Mai und Juni laden Bezirksvertretung und Gebietsbetreuung ein, sich über die Veränderungen zu informieren und Ideen einzubringen.

Kindergarten-Anmeldungen

Kindergarten- und Hort-Anmeldungen sind ab jetzt möglich.

Urbanes Experiment Galileigasse

Die Galileigasse wird temporär umgestaltet und ist ab 7. Juni autofrei. Ein lebendiger Treffpunkt zeigt ab 14. Juni, wie eine langfristige Veränderung aussehen könnte.

Lichtentalerpark wird vergrößert

Der Lichtentalerpark wird erweitert, um Anwohner*innen mehr Grünflächen zum Spielen und Erholen zu bieten.

3 neue Bezirke fürs Klimateam

2024 startet das Wiener Klimateam im 9., 12. und 15. Bezirk. Ab September können Sie Ihre Ideen und Vorschläge einbringen.

Code

<wm-grid size="l" gap="xs">
  <wm-card blocklink>
    <h3 slot="heading">
      <a href="#">Alsergrunder Kultursommer 2024</a>
    </h3>
    <div slot="content">
      Der 4. Alsergrunder Kultursommer bietet von 28. Juni bis 1. September 2024 ein abwechslungsreiches und buntes Veranstaltungsprogramm.
    </div>
    <img slot="media" src="/images/pattern/carousel/alsergrunder-kultursommer.webp" title="copyright: Dusha Connection" alt="Die Musiker*innen, 4 Männer und eine Frau, posieren vor einem Rollbalken" />
  </wm-card>
  <wm-card blocklink>
    <h3 slot="heading">
      <a href="#">Umgestaltung Frankhplatz</a>
    </h3>
    <div slot="content">
      Im Mai und Juni laden Bezirksvertretung und Gebietsbetreuung ein, sich über die Veränderungen zu informieren und Ideen einzubringen.
    </div>
    <img slot="media" src="/images/pattern/carousel/planausschnitt-frankhplatz.webp" title="copyright: BV 9 - Gebietsbetreuung Stadterneuerung" alt="Stadtplanausschnitt rund um den Frankhplatz im 9. Bezirk" />
  </wm-card>
  <wm-card blocklink>
    <h3 slot="heading">
      <a href="#">Kindergarten-Anmeldungen</a>
    </h3>
    <div slot="content">
      Kindergarten- und Hort-Anmeldungen sind ab jetzt möglich.
    </div>
    <img slot="media" src="/images/pattern/cards/kindergarten.png" title="" alt="" />
  </wm-card>
  <wm-card blocklink>
    <h3 slot="heading">
      <a href="#">Urbanes Experiment Galileigasse</a>
    </h3>
    <div slot="content">
      Die Galileigasse wird temporär umgestaltet und ist ab 7. Juni autofrei. Ein lebendiger Treffpunkt zeigt ab 14. Juni, wie eine langfristige Veränderung aussehen könnte.
    </div>
    <img slot="media" src="/images/pattern/carousel/galileigasse.webp" title="copyright: Tim Dornaus epilogy.photography" alt="Grätzloase mit Holzzaun und Sitzmöbeln" />
  </wm-card>
  <wm-card blocklink>
    <h3 slot="heading">
      <a href="#">Lichtentalerpark wird vergrößert</a>
    </h3>
    <div slot="content">
      Der Lichtentalerpark wird erweitert, um Anwohner*innen mehr Grünflächen zum Spielen und Erholen zu bieten.
    </div>
    <img slot="media" src="/images/pattern/carousel/lichtentalerpark.webp" title="copyright: Wiener Stadtgärten" alt="Spielplatz in einem Park" />
  </wm-card>
  <wm-card blocklink>
    <h3 slot="heading">
      <a href="#">3 neue Bezirke fürs Klimateam</a>
    </h3>
    <div slot="content">
      2024 startet das Wiener Klimateam im 9., 12. und 15. Bezirk. Ab September können Sie Ihre Ideen und Vorschläge einbringen.
    </div>
    <img slot="media" src="/images/pattern/carousel/klimateam-neue-bezirke.webp" title="copyright: Stadt Wien/Martin VOTAVA" alt="Bezirksvorsteher Wilfried Zankl, Klimastadtrat Jürgen Czernohorszky, Bezirksvorsteherin Saya Ahmad und Bezirksvorsteher Dietmar Baurecht" />
  </wm-card>
</wm-grid>

Reihen mit kleinen Cards

Bei Reihen mit kleinen Cards dürfen die Cards nur ein Bild und eine kurze Überschrift von maximal 30 Zeichen enthalten, keine Beschreibungstexte.

Vorschau

<wm-grid size="s" gap="s">
  <wm-card size="s" blocklink>
    <h3 slot="heading">
      <a href="#">Alsergrunder Kultursommer 2024</a>
    </h3>
    <img slot="media" src="/images/pattern/carousel/alsergrunder-kultursommer.webp" title="copyright: Dusha Connection" alt="Die Musiker*innen, 4 Männer und eine Frau, posieren vor einem Rollbalken" />
  </wm-card>
  <wm-card size="s" blocklink>
    <h3 slot="heading">
      <a href="#">Kindergarten-Anmeldungen</a>
    </h3>
    <img slot="media" src="/images/pattern/cards/kindergarten.png" title="" alt="" />
  </wm-card>
  <wm-card size="s" blocklink>
    <h3 slot="heading">
      <a href="#">Lichtentalerpark wird vergrößert</a>
    </h3>
    <img slot="media" src="/images/pattern/carousel/lichtentalerpark.webp" title="copyright: Wiener Stadtgärten" alt="Spielplatz in einem Park" />
  </wm-card>
  <wm-card size="s" blocklink>
    <h3 slot="heading">
      <a href="#">3 neue Bezirke fürs Klimateam</a>
    </h3>
    <img slot="media" src="/images/pattern/carousel/klimateam-neue-bezirke.webp" title="copyright: Stadt Wien/Martin VOTAVA" alt="Bezirksvorsteher Wilfried Zankl, Klimastadtrat Jürgen Czernohorszky, Bezirksvorsteherin Saya Ahmad und Bezirksvorsteher Dietmar Baurecht" />
  </wm-card>
</wm-grid>

API

Abhängigkeiten

HTML

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

JavaScript

import { Card } from './wienermelange/assets/js/components/Card/Card.js';
    import { Button } from './wienermelange/assets/js/components/Button/Button.js';
    import { Icon } from './wienermelange/assets/js/components/Icon/Icon.js';

Eigenschaften

Eigenschaften
Eigenschaft	Beschreibung	Werte	Default
`size`	Gibt die Maximalbreite der Card an.	`'s'\|'m'\|'l'\|'full'\|'full-responsive'`	leer
`eyecatcher`	Gibt die Art des Störers in der Card an.	`'default'\|'round'`	leer
`position`	Gibt die Position des Textes in der Canvas-Card oder des Störers an.	`'block-start'\|'block-end'\|'inline-start'\|'inline-end'`	leer
`color`	Gibt die Farbe der Canvas-Card oder des Störers an	`'abendstimmung'\|'abendstimmung-light'\|'flieder'\|'flieder-light'\|'frischgruen'\|'frischgruen-light'\|'goldgelb'\|'goldgelb-light'\|'morgenrot'\|'morgenrot-light'\|'nebelgrau'\|'nebelgrau-light'\|'wasserblau'\|'wasserblau-light'`	leer
`blocklink`	Gesamte Card verlinken.	`Boolean`	`false`
`canvas`	Cards mit Hintergrundfarbe	`Boolean`	`false`
`flipcardlabel`	Label des Flipcard Buttons	`String`	`"Teilen"`
`flipcardicon`	Icon im Flipcard Button	`String`	`"embed"`
`flipped`	Es soll eine Flip-Card umgedreht gezeigt werden.	`Boolean`	`false`
`video`	Es soll ein Video Icon gezeigt werden.	`Boolean`	`false`

Slots

Name	Beschreibung
`heading`	Überschrift
`media`	Bild oder Video
`eyecatcher`	Störer
`content`	Inhalt der Card
`precontent`	Zusätzlicher Inhalt am Anfang der Card, zum Beispiel Chip
`postcontent`	Zusätzlicher Inhalt am Ende der Card, zum Beispiel Tags
`flip`	Inhalt für die Rückseite der Flip-Card

Events

Event	Beschreibung	Rückgabewert
`wm-card-flipped`	Karte wurde geflipped

CSS API

Property	Beschreibung
`--card-background-color`	Hintergrundfarbe der Card
`--card-border`	Rahmen der Card
`--card-eyecatcher-spacing`	Abstand des Störers zum Rand
`--card-eyecatcher-padding`	Innenabstand im Störer
`--card-eyecatcher-font-size`	Schriftgröße im Störer
`--card-header-justify`	Ausrichtung im Card-Header
`--card-header-padding`	Innenabstand im Card-Header
`--card-media-background-color`	Hintergrundfarbe Media-Element
`--card-media-font-color`	Textfarbe Media-Element
`--card-spacing--mobil`	Innenabstand in der Card (Mobilansicht unter 64em)
`--card-spacing--desktop`	Innenabstand in der Card (Desktopansicht ab 64em)
`--card-shadow`	Schatten um die Card
`--card-shadow--hover`	Schatten um die Card bei Fokus und Hover

Kontakt

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

handbuch@ma53.wien.gv.at

Card

Teaser Card

Teaser Card mit hervorgehobenem Link

Stadtteilentwicklungskonzept (SEK) "Mitte 15"

Teaser Card mit Icon-Zeilen

Teaser Card ohne Text

Teaser Card mit Video

Teaser Card mit Kategorie

Teaser Cards im Karussell

Aktuelles

Teaser Card mit Farbe

Teaser Card farbig mit Text

Teaser Card farbig mit Icon

Card mit direkten Infos

Card mit Überschrift und Text

Stadtteilentwicklungskonzept (SEK) "Mitte 15"

Card mit Text und Button

Newsletter

Card volle Textbreite

Für den Online-Antrag benötigen Sie:

Card mit Tags

Kosten

Card mit Tabelle

Öffnungszeiten

Card responsive mit Bild

Kindergarten

Card responsive farbig mit Icon

Kindergarten

Card mit Links und Bild

Sicher unterwegs

Card mit Links ohne Bild

Sicher unterwegs

Card mit Quicklink-Liste

Card mit Infobox ohne Media-Element

Card mit Infobox und Media-Element horizontal

Card mit Infobox und Media-Element vertikal

Auer-Welsbach-Park

Card mit Media-Element und Text

Klimafahrplan

Card Visitenkarte

Card Visitenkarte 50 Prozent

Bezirksvorsteherin Maria Magistrati

Card Visitenkarte 100 Prozent

Bezirksvorsteherin Maria Magistrati

Card mit Chip

Card mit Eigenschaften

Stadtteilentwicklungskonzept (SEK) "Mitte 15"

Card mit Chip und Icon

Stadtteilentwicklungskonzept (SEK) "Mitte 15"

Card mit Kategorie

Card mit Störer

Card mit Störer eckig

Praterturm im Wiener Prater

Card mit Störer rund

Stadtteilentwicklungskonzept (SEK) "Mitte 15"

Card in Reihen

Reihen mit mittleren Cards

Reihen mit großen Cards

Reihen mit kleinen Cards

Abhängigkeiten

Eigenschaften

Slots

Events

CSS API

Kontakt