Vorlage:Card2

Developer-Version!

Erstellt Cards in einer Card-Liste.

Wichtig: Immer in eine {{Cards|...}}-Vorlage einsetzen!

Kopiervorlage mit den häufigen Parametern:

  {{Card|
    link...|                <<- Pflicht, Wikiseite auf die die Card verweist
    titel=...|              <<- Sollte genutzt werden, kann bei Vollbild-Card entfallen
    icon=...|               <<- Optional, Name der Bilddatei für ein Icon (ohne Datei:)
    neu=jjjjmmtt|           <<- Optional, jjjjmmtt=Tag an dem die Card hinzugefügt wurde
    ...                     <<- Inhalt. Ggf. ein 1= voranstellen, wenn ein = Zeichen enthalten ist
  }}

Infos zu Inhalt und Card-Bild siehe unten.

• 

  Ein längerer, umbrechender Card-Titel

  Dies ist eine Dummy Card mit Decklink.

  Sie verwendet eine konstante helle Hintergrundfarbe und nutzt deshalb den mode=light-Schalter, um unabhängig vom Light/Dark-Mode dunklen Text zu zeigen
   
• Der richtige Code-Editor
  
   
• Transform

  mit CSS

  drehen,
  skalieren, schräg
  stellen und
  verschieben
   
• Bilder im Internet
  • Bilder mit CSS formatieren
  • Bilder präsentieren
  • Bildwechsler
  • Card verwendet ebenfalls festen light-Mode.

  
   
• &

  Schachtelung von Regeln

  
  CSS Präprozessoren, nehmt euch in Acht!
  Card mit "neu" Schalter
  Die Vorlage ändert im Darkmode den Grünton

   

Parameter für die Card-Vorlage

titel

für die Überschrift

icon

setzt das Bild als Float rechts neben die Kartenüberschrift, mit 35% der Card-Breite.

Anzugeben ist der Name der Bilddatei im Wiki, ohne Datei: davor!

logo

Setzt einen leeren Container als Float rechts neben die Kartenüberschrift. Der Inhalt kann frei gestaltet werden (Beispiel: Card für CSS-Nesting)

mode

Entweder mode=light oder mode=dark angeben. Erzwingt die Darstellung der Card im light-mode oder dark-mode durch Setzen von color-scheme:light bzw. color-scheme:dark. Farbangaben, die mittels light-dark() gemacht wurden (z.B. die Standardfarben für Text, Links und Hintergrund), verwenden dann automatisch die Ausprägung für den entsprechenden Modus.

Setzen Sie mode=dark, wenn die Card ein Hintergrundbild mit hellen Farben hat und Sie immer dunkle Text- und Linkfarben brauchen

Setzen Sie mode=light, wenn die Card ein Hintergrundbild mit dunklen Farben hat und Sie immer helle Text- und Linkfarben brauchen

link

gibt an, auf welche Wiki-Seite die Card verlinken soll. Der Link überdeckt die ganze Karte! Links im Karteninhalt sind unzulässig.

hintergrund

Setze einen Hintergrund (background-Eigenschaft). Verwenden Sie möglichst Farben aus der Selfhtml-Palette!

Sie können Farbangaben automatisch an den Darkmode anpassen, wenn Sie die light-dark() Funktion verwenden. Beispiel:
background=light-dark(var(--yellow3),var(--blue-dark))

neu

Markiert eine Card als neu. Als Wert kann eine Datumsangabe gesetzt werden (Format bitte JJJJMMTT, kann die Vorlage nicht prüfen), damit man weiß, von wann die Neuigkeit ist. Das Seiten-JS **könnte** "neu" Cards, die nicht mehr neu sind, von der neu Klasse befreien. Man könnte auch automatisch eine Kategorie "Neu-JJJJMMTT" erzeugen und damit auf Altlastenjagd gehen.

zeilen

Anzahl der Zeilen im Grid, die die Card einnehmen soll. Default ist 1

spalten

Anzahl der Spalten im Grid, die die Card einnehmen soll. Default ist 1

Der eigentliche Card-Inhalt wird als Positionsparameter 1 eingetragen. Ein Bild, das die Card-Breite ausfüllen soll, muss zwingend mit der Vorlage {{Card/Bild|...}} eingebunden werden. Diese Vorlage sorgt dafür, dass das Bild keinen Link erzeugt und bietet die Option "vollbild", womit der Titelbereich über das Bild gelegt wird. Mit {{Card/Bild|...|schiebe=2em}} erhält das Bild einen negativen margin-top und wird in den Hintergrund gelegt, womit eine teilweise Überlappung von Inhalt und Bild möglich ist.