Cards

# Parameter card(raw, size, theme, settings)
  raw: "boolean" # Mobil kein Schatten und kein Padding
  size: "string" # Größe (s, m, l, full, expose, expose-reverse)
  theme: "string" # es kann eine Theme-Farbe übergeben werden (default, morgenrot, goldgelb, flieder, abendstimmung, frischgruen, wasserblau, nebelgrau)
  settings: "object"
    attributes: "object" # HTML-Attribute (z. B.: class,...), frei wählbar

# Parameter cardImage(img) # muss innerhalb eines card() Macros aufgerufen werden
  img: "object" # siehe Pattern "Bilder" -> Parameter und Anwendung

# Parameter cardContent(class) # muss innerhalb eines card() Macros aufgerufen werden
  class: "string"
  # Inhalt frei wählbar

# Parameter cardHeading(text, id, class, level, header, url, heading_icon) # muss innerhalb eines card() Macros aufgerufen werden
  text: "string" # Text frei wählbar
  id: "string" # ID frei wählbar
  class: "string" # z.B.: für lange Überschriften kann die class = "wm-u-hyphens" verwendet werden
  level: "string" # (default: h3) Level der Überschrift (zulässige Werte: h2-h6)
  header: "boolean" # (default: false) wird in Flipcards verwendet
  url: "string" # Pfad des Links
  heading_icon: "object" siehe Pattern "Icon" -> Parameter und Anwendung

  {% call card() %}
    {{ cardHeading(text, id, class, level, header, url, heading_icon) }}
    {{ cardImage(image) }}
    {% call cardContent() %}
      Inhalt frei wählbar
    {% endcall %}
  {% endcall %}

# Parameter cardCanvas(bg, color, position) # muss innerhalb eines card() Macros aufgerufen werden
  bg: "string" # zulässige Werte: (default: flieder), Farbenauswahl (siehe /look-and-feel/farben/)
  color: "string" # zulässige Werte: (default: weiss), fastschwarz
  position: "string" # zulässige Werte: (default: '' (rechts unten)), center, top-left

  {% call card() %}
    {{ cardHeading(text, url) }}
    {% call cardCanvas(bg, color, position) %}
    {% endcall %}
    {% call cardContent() %}
      Inhalt frei wählbar
    {% endcall %}
  {% endcall %}

# cardFlip()
  # muss in Verbindung mit cardFlipFront() und cardFlipBack() Macro aufgerufen werden

## cardFlipFront(btn_txt) # muss innerhalb eines cardFlip() Macros aufgerufen werden
  btn_text: "string" # Text des Buttons frei wählbar (default: Teilen)

## cardFlipBack(btn_txt) # muss innerhalb eines cardFlip() Macros aufgerufen werden
  btn_text: "string" # Text des Buttons frei wählbar (default: Schließen)

  {% call cardFlip() %}
    {% call cardFlipFront(btn_txt) %}
      {{ cardHeading(text, id, class, header) }}
      Inhalt frei wählbar
    {% endcall%}
    {% call cardFlipBack(btn_txt) %}
      Inhalt frei wählbar
    {% endcall%}
  {% endcall %}

# cards(size)
  size: "string" # zulässige Werte: small, large -> steuert die Größe der angezeigten Cards innerhalb des Grid-Layouts

  {% call cards(size = "small") %}
    {% call card() %}
      {% call cardContent() %}
        {{ cardHeading(text="Überschrift", class="wm-h5") }}
        {{ cardImage(image) }}

        <p>Text frei wählbar</p>
      {% endcall %}
    {% endcall%}
  {% endcall%}

# Grundsätzlich sollte eine Card semantisch korrekt gegliedert (heading, image, content). Strukturaufbau Card Beispiele:

# 1. positives Beispiel:
  card:
  - cardHeading
  - cardImage
  - cardContent
    -- Inhalt

# 1. negatives Beispiel:
  card:
  - cardContent
    -- cardImage
    -- cardHeading
    -- Inhalt