Flip-Card

Flip-Cards bieten Embed- und Sharing-Optionen sowie Infos zur Lizenz und der Maschinenlesbarkeit.
Beispiel: Andere Websites können die wien.gv.at-Card "Parkscheinkosten" einbinden.
Vorteil: Eine Änderung der Card auf wien.gv.at erfolgt automatisch auf den Websites, wo sie geteilt oder eingebettet wurde.
Flip-Cards sind nur für diesen Einsatzzweck vorgesehen. Wenn die Card gedreht wird, werden immer Informationen zum Embedding, JSON et cetera angezeigt.

Varianten

Flip-Card Parkscheinkosten

Vorschau

Parkscheinkosten

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

Informationen zum Inhalt

Dieser Inhalt wird von der Stadt Wien kostenfrei gemäß Creative Commons CC-BY 4.0 zur Verfügung gestellt.

Kontakt: redaktion@wien.gv.at
Letzte Aktualisierung:31.03.2023, 10.17 Uhr
Eindeutige ID dieses Inhalts: Xa3Y2f
Maschinenlesbar mit Metadaten: JSON
Nutzungsbedingungen

Diesen Inhalt teilen

Infocards

Diesen Inhalt einbetten

Der eingebettete Inhalt aktualisiert sich automatisch, sobald wir ihn auf wien.gv.at ändern.

Code

<wm-card size="l">
  <h2 slot="heading">
    Parkscheinkosten
  </h2>
  <div slot="content">
    <p>
      Montag bis Freitag: 9 bis 20 Uhr<br/> Samstag, Sonntag und Feiertage: 8 bis 20 Uhr
    </p>
    <p>
      Montag bis Freitag: 9 bis 20 Uhr<br/> Samstag, Sonntag und Feiertage: 8 bis 20 Uhr
    </p>
  </div>
  <div slot="flip">
    <wm-accordion open="1" multiple="multiple">
      <wm-accordion-heading icon="info">
        <h3>Informationen zum Inhalt</h3>
      </wm-accordion-heading>
      <wm-accordion-content>
        <p>Dieser Inhalt wird von der Stadt Wien kostenfrei gemäß
          <a href="https://creativecommons.org/licenses/by/4.0/deed.de">Creative Commons CC-BY 4.0</a>
          zur Verfügung gestellt.</p>
        <wm-list clean="clean" gap="none">
          <ul>
            <li class="wm-u-jcsb">
              <span>Kontakt:</span>
              <span>
                <a href="mailto:redaktion@wien.gv.at">redaktion@wien.gv.at</a>
              </span>
            </li>
            <li class="wm-u-jcsb">
              Letzte Aktualisierung:<span>31.03.2023, 10.17 Uhr</span>
            </li>
            <li class="wm-u-jcsb">
              Eindeutige ID dieses Inhalts: <span>Xa3Y2f</span>
            </li>
            <li class="wm-u-jcsb">
              Maschinenlesbar mit Metadaten:<span>
                <a href="#">JSON</a>
              </span>
            </li>
            <li class="wm-u-jcsb">
              <a href=" https://data.wien.gv.at/nutzungsbedingungen">Nutzungsbedingungen</a>
            </li>
          </ul>
        </wm-list>
      </wm-accordion-content>
      <wm-accordion-heading icon="share">
        <h3>Diesen Inhalt teilen</h3>
      </wm-accordion-heading>
      <wm-accordion-content>
        <p>Infocards</p>
        <form>
          <wm-stack horizontal="true" alignment="end">
            <div class="wm-u-fg1">
              <label for="link-teilen_copy">Link</label>
              <input id="link-teilen_copy" type="text" value="https://wien.gv.at/verkehr/parken" style="--wm-theme-input-background: var(--wm-color-weiss);"/>
            </div>
            <wm-button>
              <button type="submit">Link kopieren</button>
            </wm-button>
          </wm-stack>
        </form>
      </wm-accordion-content>
      <wm-accordion-heading icon="embed">
        <h3>Diesen Inhalt einbetten</h3>
      </wm-accordion-heading>
      <wm-accordion-content>
        <form>
          <wm-stack horizontal="true" alignment="end">
            <div class="wm-u-fg1">
              <label for="link-einbetten_copy">Link</label>
              <input id="link-einbetten_copy" type="text" value="<iframe src=https://wien.gv.at/verkehr/parken></iframe>" style="--wm-theme-input-background: var(--wm-color-weiss);"/>
            </div>
            <button>HTML kopieren</button>
          </wm-stack>
        </form>
        <p>Der eingebettete Inhalt aktualisiert sich automatisch, sobald wir ihn auf wien.gv.at ändern.</p>
      </wm-accordion-content>
    </wm-accordion>
  </div>
</wm-card>

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