Quelltext der Seite Hilfe:Vorlagen Design

Diese Seite dient als Übersicht und Veranschaulichung der wichtigsten Designvorlagen, die in eine Seite eingebaut werden können. Die jeweilige Seite muss dazu im Quelltext (oben rechts über die drei Punkte und "Quelltext bearbeiten") bearbeitet werden.

Es gibt Designmöglichkeiten, die über "Wikitext", die Programmiersprache von Mediawiki, eingefügt werden können. Und es gibt Vorlagen, die wir individuell erstellt haben. Diese sind an den Klammern "{{ }}" zu erkennen.
Unter dem jeweiligen Beispiel ist auf dieser Seite die Kopiervorlage eingefügt. Entweder der Code für Wikitext oder die Vorlage mit den Klammern "{{ }}". Mit den Klammern startet und endet eine Vorlage. Dazwischen kann in einigen Fällen individueller Text oder Bilder eingefügt werden. 


<div class="toclimit-2">__TOC__</div>

==Literatur und Zitate==
<big>'''Vorlage: Literaturhinweis'''</big>
{{Literaturhinweis|Autor etc.}}

Kopiervorlage: <nowiki>{{Literaturhinweis|Autor etc.}}</nowiki>


<big>'''Vorlage: Zitat'''</big>
{{Zitat|Text=Nachts sind alle Katzen grau.|Autor=Hund}}
Kopiervorlage: <nowiki>{{Zitat|Text=Nachts sind alle Katzen grau.|Autor=Hund}}</nowiki>

===Normale Literaturangaben===
Im Wiki können Quellen mit dem dem HTML-Code <nowiki><ref></nowiki> eingefügt werden.
z.B. 
{| class="wikitable"
|+ Beispiele für das Einfügen von Literaturangaben
|-
! Beschreibung !! Quelltext (Beispiel) !! Resultierender Wiki-Text
|-
| Bei einfachen Quellenangaben gibt man zwischen <nowiki><ref></ref></nowiki> die Quellenangabe an, die dann in der Fußnote auftaucht. || <nowiki>Paper von Annick de Witt et al. (2023)<ref>De Witt, A., Bootsma, M., Dermody, B. J., & Rebel, K. (2023). The Seven-Step Learning Journey: A Learning Cycle Supporting Design, Facilitation, and Assessment of Transformative Learning. ''Journal of Transformative Education, 0''(0). [https://doi.org/10.1177/15413446231220317 https://doi.org/10.1177/15413446231220317 <span></span>]</ref></nowiki> || Paper von Annick de Witt et al. (2023)<ref>De Witt, A., Bootsma, M., Dermody, B. J., & Rebel, K. (2023). The Seven-Step Learning Journey: A Learning Cycle Supporting Design, Facilitation, and Assessment of Transformative Learning. ''Journal of Transformative Education, 0''(0). [https://doi.org/10.1177/15413446231220317 https://doi.org/10.1177/15413446231220317]</ref>
|-
| Wenn man Quellen mehrfach zitiert, lohnt sich die Bennenung über das Attribute "name=". Außerdem ist hier mit zwei Apostrophen das Journal Kursiv gesetzt und über eckige Klammern der DOI verlinkt. Die Quellenagabe selbst taucht am Ende der Seite auf. || <nowiki>Giesenbauer & Müller-Christ (2020)<ref name="Giesenbauer2020">Giesenbauer, B. & Müller-Christ, G. (2020). University 4.0: Promoting the Transformation of Higher Education Institutions toward Sustainable Development. ''Sustainability, 12'' (8), 3371. [https://doi.org/10.3390/su12083371 https://doi.org/10.3390/su12083371]</ref></nowiki> || Giesenbauer & Müller-Christ (2020)<ref name="Giesenbauer2020">Giesenbauer, B. & Müller-Christ, G. (2020). University 4.0: Promoting the Transformation of Higher Education Institutions toward Sustainable Development. ''Sustainability, 12'' (8), 3371. [https://doi.org/10.3390/su12083371 https://doi.org/10.3390/su12083371]</ref>
|-
| Ist eine Quelle einmal auf der Wiki-Seite benannt, muss man beim nächsten Zitieren nur auf diesen Namen (ohne Anführungszeichen!) verweisen || <nowiki><ref name=Giesenbauer2020> </ref></nowiki> || <ref name=Giesenbauer2020> </ref>
|- 
| Kopiervorlage einfach || <nowiki><ref>QUELLENANGABE EINFÜGEN</ref></nowiki> ||
|- 
| Kopiervorlage Benennung || <nowiki><ref name"KURZNAME EINFÜGEN">QUELLENANGABE EINFÜGEN</ref></nowiki> ||
|- 
| Kopiervorlage um bereits Benanntes zu zitieren (ohne Anführungszeichen)|| <nowiki><ref name=KURZNAME REFERENZIEREN></ref></nowiki> ||
|}

==Bilder==

Bilder können auch über den VisualEditor hochgeladen und eingebunden werden. Weitere Formatierungen können im Quelltext bearbeitet werden.

<big>'''In Originalgröße ohne Formatierung:'''</big>

[[Datei:DG-Hub Nachhaltigkeitsstrategien 230306 3.jpeg]]

 <nowiki>[[Datei:Dateiname]]</nowiki>

<big>'''Bild gerahmt und rechts eingebunden:'''</big>
[[Datei:DG-Hub Nachhaltigkeitsstrategien 230306 3.jpeg|thumb|Bildunterschrift]]

 <nowiki>[[Datei:Dateiname|thumb|Bildunterschrift]]</nowiki>

<br clear=all>

<big>'''Bild ohne Rahmen und rechts eingebunden:'''</big>
[[Datei:DG-Hub Nachhaltigkeitsstrategien 230306 3.jpeg|frameless|right]]
 <nowiki>[[Datei:Dateiname|frameless|right]]</nowiki>

<br clear=all>
<big>'''Responsive Design'''</big>

Um Bilder/Grafiken responsive darzustellen für alle möglichen Screen-Sizes, ist dies in der CSS des Wikis definiert.<br>
Beispiel:
<div class="res-img">
[[Datei:Titelbild schwarzes brett.png|alt=Grafik Schwarzes Brett|link=]]
</div>

Dazu eingeben:
 <nowiki> <div class="res-img">[[Datei:Beispielgrafik.png|alt=Alternativer Text|link=]]</div> </nowiki>

<big>'''Weitere Formatierungsmöglichkeiten:'''</big>
Es gibt viele weitere Varianten für die Formatierung von Bildern. Sie sind [https://www.mediawiki.org/wiki/Help:Images/de hier] bei Mediawiki beschrieben.


<big>'''Absatz einfügen'''</big>

In manchen Fällen ist es gewünscht, dass hinter oder vor einem Bild ein Absatz eingefügt wird, damit der Text erst nach dem Bild wieder beginnt. Dann muss im Quelltext folgendes hinter oder vor das Bild eingegeben werden:
 <nowiki><br clear=all></nowiki>


<big>'''Vorlage: Clear'''</big>
{{Clear}}
 <nowiki>{{Clear}}</nowiki>

Es wird aus der Vorlage heraus nichts angezeigt.
Die Vorlage verhindert den Textumfluss, ein seitliches umfließen des Textes um ein Bild oder einen Seitenbaustein.
Der Effekt der Vorlage: Es geht mit dem Text einfach unterhalb eines Seitenelements weiter.
Um diese Vorlage in einen Artikel zu integrieren, muss nur <nowiki>{{Clear}}</nowiki> in die entsprechende Seite eingetragen werden.

<big>'''Divider'''</big><br>
Dividerlinie zum trennen von Inhalten.

 <nowiki>----</nowiki>
----
<br clear=all>
<big>'''Bildergalerie mit Rahmen'''</big>

<gallery>
Datei:DG-Hub Nachhaltigkeitsstrategien 230306 1.jpeg|alt=eine Gruppe arbeitet in Diskussionsrunde
Datei:DG-Hub Nachhaltigkeitsstrategien 230306 4.jpeg|alt=Nahaufnahme zweier Teilnehmender in Diskussionsrunde
Datei:DG-Hub Nachhaltigkeitsstrategien 230306 2.jpeg|alt=Nahaufnahme zweier Teilnehmender vor Tafel
Datei:DG-Hub Nachhaltigkeitsstrategien 230306 5.jpeg|alt=Drei Teilnehmende sitzend im Gespräch
Datei:DG-Hub Nachhaltigkeitsstrategien 230306 3.jpeg|alt=Nahaufnahme über die Schulter auf einen Laptop
</gallery>

Kopiervorlage:
 <nowiki><gallery>
Datei:Name der Datei |alt=eine Gruppe arbeitet in Diskussionsrunde
Datei:Name der Datei |alt=
Datei:Name der Datei |alt=
Datei:Name der Datei |alt=
Datei:Name der Datei |alt=
</gallery></nowiki>

Der Zusatz <nowiki>"alt="</nowiki> hinter dem Dateinamen dient zur Bildbeschreibung für Personen, die das Bild nicht sehen können bzw. für Screenreader. Es ist keine Pflichtangabe, ist aber dringend empfohlen.


<big>'''Bildergalerie ohne Rahmen'''</big>

<gallery mode=packed>
Datei:DG-Hub Nachhaltigkeitsstrategien 230306 1.jpeg|alt=eine Gruppe arbeitet in Diskussionsrunde
Datei:DG-Hub Nachhaltigkeitsstrategien 230306 4.jpeg|alt=Nahaufnahme zweier Teilnehmender in Diskussionsrunde
Datei:DG-Hub Nachhaltigkeitsstrategien 230306 2.jpeg|alt=Nahaufnahme zweier Teilnehmender vor Tafel
Datei:DG-Hub Nachhaltigkeitsstrategien 230306 5.jpeg|alt=Drei Teilnehmende sitzend im Gespräch
Datei:DG-Hub Nachhaltigkeitsstrategien 230306 3.jpeg|alt=Nahaufnahme über die Schulter auf einen Laptop
</gallery>

Kopiervorlage:
 <nowiki><gallery mode=packed>
Datei:Name der Datei |alt=eine Gruppe arbeitet in Diskussionsrunde
Datei:Name der Datei |alt=
Datei:Name der Datei |alt=
Datei:Name der Datei |alt=
Datei:Name der Datei |alt=
</gallery></nowiki>

Der Zusatz <nowiki>"alt="</nowiki> hinter dem Dateinamen dient zur Bildbeschreibung für Personen, die das Bild nicht sehen können bzw. für Screenreader. Es ist keine Pflichtangabe.


<big>'''Slideshow'''</big>

<gallery mode=slideshow>
Datei:DG-Hub Nachhaltigkeitsstrategien 230306 1.jpeg|alt=eine Gruppe arbeitet in Diskussionsrunde
Datei:DG-Hub Nachhaltigkeitsstrategien 230306 4.jpeg|alt=Nahaufnahme zweier Teilnehmender in Diskussionsrunde
Datei:DG-Hub Nachhaltigkeitsstrategien 230306 2.jpeg|alt=Nahaufnahme zweier Teilnehmender vor Tafel
Datei:DG-Hub Nachhaltigkeitsstrategien 230306 5.jpeg|alt=Drei Teilnehmende sitzend im Gespräch
Datei:DG-Hub Nachhaltigkeitsstrategien 230306 3.jpeg|alt=Nahaufnahme über die Schulter auf einen Laptop
</gallery>

Kopiervorlage:
 <nowiki><gallery mode=slideshow>
Datei:Name der Datei |alt=eine Gruppe arbeitet in Diskussionsrunde
Datei:Name der Datei |alt=
Datei:Name der Datei |alt=
Datei:Name der Datei |alt=
Datei:Name der Datei |alt=
</gallery></nowiki>

Der Zusatz <nowiki>"alt="</nowiki> hinter dem Dateinamen dient zur Bildbeschreibung für Personen, die das Bild nicht sehen können bzw. für Screenreader. Es ist keine Pflichtangabe.


<big>'''Weitere Formatierungsmöglichkeiten:'''</big>

Weitere Optionen für die Formatierung von Bildergalerien sind bei Wikipedia [https://de.wikipedia.org/wiki/Hilfe:Galerie hier] beschrieben.
==PDFs mit Vorschaubild==
PDFs können ähnlich wie Bilder mit einem Vorschaubild angezeigt werden. Dies ist besonders nützlich zum Einbinden von Präsentationen, z. B. in Hub-Dokumentationen.

Beispielquelltext (Ergebnisdarstellung rechts): [[Datei:Transformationspfade KuNaH Präsentation KdN Hub 240425.pdf|Präsentation Verbund KuNaH 24.04.2024 (PDF)|mini|right|link=https://wiki.dg-hochn.de/wiki/Datei:Transformationspfade_KuNaH_Pr%C3%A4sentation_KdN_Hub_240425.pdf|alt=Präsentation Verbund KuNaH 24.04.2024 (PDF)]]
<code>
<nowiki>[[Datei:Transformationspfade KuNaH Präsentation KdN Hub 240425.pdf|Präsentation Verbund KuNaH 24.04.2024 (PDF)|mini|right|link=https://wiki.dg-hochn.de/wiki/Datei:Transformationspfade_KuNaH_Pr%C3%A4sentation_KdN_Hub_240425.pdf|alt=Präsentation Verbund KuNaH 24.04.2024 (PDF)]]</nowiki></code>

In diesem Beispiel sorgt <code>Datei:Transformationspfade KuNaH Präsentation KdN Hub 240425.pdf</code> dafür, dass die Datei als Bild dargestellt wird. Der Zusatz <code>link=https://wiki.dg-hochn.de/wiki/Datei:Transformationspfade_KuNaH_Pr%C3%A4sentation_KdN_Hub_240425.pdf</code>" sorgt dafür, dass die Datei dort verlinkt wird. In diesem Fall wird auf die Oberseite verlinkt - man könnte auch direkt auf das PDF verlinken, in diesem Fall <code>https://wiki.dg-hochn.de/images/6/64/Transformationspfade_KuNaH_Pr%C3%A4sentation_KdN_Hub_240425.pdf</code>.

Hierfür muss die Datei im Wiki hochgeladen werden. Die Dateiliste findet man auf der [[Spezial:Dateien|Spezial-Seite für Dateien]].

Kopiervorlage:

<nowiki>
[[Datei:DATEINAME AUS DEM WIKI.pdf|BESCHREIBUNG DER DATEI (PDF)|mini|right|link=HTTPS LINK ZUR DATEI|alt=ALTERNATIVE BESCHREIBUNG FÜR BARRIEREFREIHEIT]]
</nowiki>

==Banner==
<big>'''Vorlage: Achtung'''</big>
{{Achtung|Text hier eingeben!}}

Kopiervorlage: <nowiki>{{Achtung|Text hier eingeben!}}</nowiki>


<big>'''Vorlage: ActionCall'''</big>
{{ActionCall}}

Kopiervorlage: <nowiki>{{ActionCall}}</nowiki>

<big>'''Vorlage: BoxBlau (im DG HochN Graublau; Logo)'''</big>
{{BoxBlau|text=Deinen Text hier eingeben}}

Kopiervorlage: <nowiki>{{BoxBlau|text=Deinen Text hier eingeben}}</nowiki>

<big>'''Vorlage:BoxINNO'''</big>
{{BoxINNO|Box zum Hervorheben von Text in den Projektfarben von INNO4BNE}}

Kopiervorlage: <nowiki>{{BoxINNO|Text hier eingeben}}</nowiki>

<big>'''Vorlage:BoxIMPACT'''</big>
{{BoxIMPACT|Box zum Hervorheben von Text in den Projektfarben von IMPACT}}

Kopiervorlage: <nowiki>{{BoxIMPACT|Text hier eingeben}}</nowiki>


<big>'''Vorlage:BoxIMPACTgrau'''</big>
{{BoxIMPACTgrau|Box zum Hervorheben von Text in den Projektfarben von IMPACT}}

Kopiervorlage: <nowiki>{{BoxIMPACTgrau|Text hier eingeben}}</nowiki>


<big>'''Vorlage:Boxtranhsform'''</big>
{{Boxtranhsform|Box zum Hervorheben von Text in den Projektfarben von traNHSform}}

Kopiervorlage: <nowiki>{{Boxtranhsform|Text hier eingeben}}</nowiki>


<big>'''Vorlage: Hinweis'''</big>
{{Hinweis|Text hier eingeben!}}

Kopiervorlage: <nowiki>{{Hinweis|Text hier eingeben!}}</nowiki>


<big>'''Vorlage: NichtAktuell'''</big>
{{Nichtaktuell}}

Kopiervorlage: <nowiki>{{Nichtaktuell}}</nowiki>


<big>'''Vorlage: InArbeit'''</big>
{{InArbeit
| username=Nutzerkennung
| ende=Voraussichtliches Ende der Bearbeitung}}

Kopiervorlage: 
<nowiki>
{{InArbeit
| username=Nutzerkennung
| ende=Voraussichtliches Ende der Bearbeitung}}</nowiki>


<big>'''Vorlage: These'''</big>
{{These|detail=Text hier eingeben!}}
Kopiervorlage: <nowiki>{{These|detail=Text hier eingeben!}}</nowiki>


<big>'''Vorlage: Tipp'''</big>
{{Tipp|text=Text hier eingeben}}

Kopiervorlage: <nowiki>{{Tipp|text=Text hier eingeben}}</nowiki>

==Ausklappmenüs für Text==

<big>'''Vorlage: Expander'''</big>
{{Expander|Titel|Dieser Text soll expandiert werden}}

Kopiervorlage: <nowiki>{{Expander|Titel|Dieser Text soll expandiert werden}}</nowiki>


<big>'''Vorlage: ExpanderOffen'''</big>
{{ExpanderOffen|Titel|Dieser Text soll expandiert werden}}

Kopiervorlage: <nowiki>{{ExpanderOffen|Titel|Dieser Text soll expandiert werden}}</nowiki>



==Tabellen==

Tabellen können am einfachsten über den VisualEditor eingefügt werden.
Über den Quelltext können sie ebenfalls über die den Editor eingefügt werden. Sie sehen als Quelltext ausgeschrieben so aus:

 <nowiki>{| class="wikitable"
|+ Text der Überschrift
|-
! Überschrift !! Überschrift !! Überschrift
|-
| Beispiel || Beispiel || Beispiel
|-
| Beispiel || Beispiel || Beispiel
|-
| Beispiel || Beispiel || Beispiel
|}</nowiki>

Weitere Formatierungsmöglichkeiten, z.B. bei der Farbwahl sind über Vorlagen möglich. Bspw. wie die beiden folgenden.

<big>'''collapsable Tabellen'''</big>

Um eine Tabelle einklappbar zu machen, kann die Funktion "collapse" verwendet werden. Entweder wird die Tabelle zunächst ausgeklappt angezeigt (1) oder eingeklappt (2).

(1)
 {| class="wikitable mw-collapsible"
|+ Text der Überschrift
|-
! Überschrift !! Überschrift !! Überschrift
|-
| Beispiel || Beispiel || Beispiel
|-
| Beispiel || Beispiel || Beispiel
|-
| Beispiel || Beispiel || Beispiel
|}

Kopiervorlage:
 <nowiki>{| class="wikitable mw-collapsible"
 |+ Text der Überschrift
 |-
 ! Überschrift !! Überschrift !! Überschrift
 |-
 | Beispiel || Beispiel || Beispiel
 |-
 | Beispiel || Beispiel || Beispiel
 |-
 | Beispiel || Beispiel || Beispiel
 |}</nowiki>
(2)
 {| class="wikitable mw-collapsed mw-collapsible"
|+ Text der Überschrift
|-
! Überschrift !! Überschrift !! Überschrift
|-
| Beispiel || Beispiel || Beispiel
|-
| Beispiel || Beispiel || Beispiel
|-
| Beispiel || Beispiel || Beispiel
|}

Kopiervorlage:
 <nowiki> {| class="wikitable mw-collapsed mw-collapsible"
  |+ Text der Überschrift
  |-
  ! Überschrift !! Überschrift !! Überschrift
  |-
  | Beispiel || Beispiel || Beispiel
  |-
  | Beispiel || Beispiel || Beispiel
  |-
  | Beispiel || Beispiel || Beispiel
  |}</nowiki>

<big>'''Sortierbare Tabellen'''</big>
{| class="wikitable sortable"
 |+ Text der Überschrift
 |-
 ! Überschrift !! Überschrift !! Überschrift
 |-
 | Beispiel || Beispiel || Beispiel
 |-
 | Beispiel || Beispiel || Beispiel
 |-
 | Beispiel || Beispiel || Beispiel
 |}

Kopiervorlage:
 <nowiki>{| class="wikitable sortable"
 |+ Text der Überschrift
 |-
 ! Überschrift !! Überschrift !! Überschrift
 |-
 | Beispiel || Beispiel || Beispiel
 |-
 | Beispiel || Beispiel || Beispiel
 |-
 | Beispiel || Beispiel || Beispiel
 |}
</nowiki>

<big>'''Vorlage: Themenspeicher'''</big>
{{Themenspeicher
|text1=Kurzbeschreibung
|text2=Ziel
|text3=Weiterführende Informationen
|name=Name}}

Kopiervorlage:
<nowiki>{{Themenspeicher
|text1=Kurzbeschreibung
|text2=Ziel
|text3=Weiterführende Informationen
|name=Name}}</nowiki>

<big>'''Vorlage: Ideensammlung'''</big>
{{Ideensammlung
|Idee=Kurzbeschreibung
|Name=Name}}

Kopiervorlage:
<nowiki>{{Ideensammlung
|Idee=Kurzbeschreibung
|Name=Name}}</nowiki>



==Boxen und Kästen==

<big>'''Vorlage: Kasten'''</big>
{{Kasten
|headline-bg-color = #FFFFFF
|headline-color    = #000000
|content-bg-color  = #FFFFFF
|content-color     = #000000
|id                = Ankermöglichkeit
|headline          = Überschrift
|content           = Inhalt der Box / Dein Text...
}}

 <nowiki>{{Kasten
|headline-bg-color = #FFFFFF
|headline-color    = #000000
|content-bg-color  = #FFFFFF
|content-color     = #000000
|id                = Ankermöglichkeit
|headline          = Überschrift
|content           = Inhalt der Box / Dein Text...
}}</nowiki>

<big>'''Vorlage: BoxListe'''</big>
{{BoxListe
  |bg-color=#dfcacf
  |titel=Aktuelles
  |Punkt1=Veranstaltung am 01.01.2024 <small>''- 23.10.23''</small>
  |Punkt2=[[Hauptseite|Neues zum Projekt XYZ]] <small>''- 23.10.23''</small>
  |Punkt3=[https://www.dg-hochn.de/ Dokumentation von...] <small>''- 23.10.23''</small>
}}

Kopiervorlage:
<pre>{{BoxListe
  |bg-color=
  |titel=
  |Punkt1=
  |Punkt2=
  |Punkt3=
}}</pre>

<big>'''Vorlage: CardSmall'''</big>
{{CardSmall
  |bg-color=
  |border-color=
  |text-color=
  |titel=
  |subtitel=
  |text=
}}


 <nowiki>{{CardSmall
  |bg-color=
  |titel=
  |subtitel=
  |text=
}}</nowiki>

<big>'''Vorlage: Cardsimple'''</big>
{{Cardsimple
  |bg-color=#7b9cb1
  |text=Hier steht ein Beispieltext. Die Farbwerte werden unter "bg-color" eingegeben.
}}


 <nowiki>{{Cardsimple
  |bg-color=
  |text=
}}</nowiki>

<big>'''Vorlage: Cardheader'''</big>
{{Cardheader
  |header= Überschrift
  |bg-color=#7b9cb1
  |headalign=
  |content=texttexttext
}}


 <nowiki>{{Cardheader
  |header=
  |bg-color=
  |headalign=
  |content=
 }}</nowiki>

<big>'''Vorlage: CardZweifarbig'''</big>
<br>Ähnlich wie Cardheader, aber auch Schriftfarbe ist anpassbar.
{{CardZweifarbig
  |color=#44546A
  |bg-color=#7b9cb1
  |position=left
  |titel=Überschrift
  |text=Text einfügen 
*1 
*2 
*3
}}
<pre>{{CardZweifarbig
  |color=
  |bg-color=
  |position=
  |titel=
  |text=
}}</pre>

<big>'''Vorlage: Card-Deck'''</big>

<div class="card-deck">
{{CardSmall
  |bg-color=#7b9cb1
  |titel=Beispiel Titel
  |subtitel=Beispiel Unterüberschrift
  |text=Hier steht ein Beispieltext. Die Farbwerte werden unter "bg-color" eingegeben.
}}
{{CardSmall
  |bg-color=#7b9cb1
  |titel=Beispiel Titel
  |subtitel=Beispiel Unterüberschrift
  |text=Hier steht ein Beispieltext. Die Farbwerte werden unter "bg-color" eingegeben.
}}
{{CardSmall
  |bg-color=#7b9cb1
  |titel=Beispiel Titel
  |subtitel=Beispiel Unterüberschrift
  |text=Hier steht ein Beispieltext. Die Farbwerte werden unter "bg-color" eingegeben.
}}
</div>

Um die Boxen nebeneinander zu setzen, muss vor die erste Box folgendes gesetzt werden:
 <nowiki><div class="card-deck"></nowiki>
und um zu schließen, hinter die letzte Box 
 <nowiki></div></nowiki>

Also insgesamt:

 <nowiki><div class="card-deck">
{{CardSmall
  |bg-color=#7b9cb1
  |titel=Beispiel Titel
  |subtitel=Beispiel Unterüberschrift
  |text=Hier steht ein Beispieltext. Die Farbwerte werden unter "bg-color" eingegeben.
}}
{{CardSmall
  |bg-color=#7b9cb1
  |titel=Beispiel Titel
  |subtitel=Beispiel Unterüberschrift
  |text=Hier steht ein Beispieltext. Die Farbwerte werden unter "bg-color" eingegeben.
}}
{{CardSmall
  |bg-color=#7b9cb1
  |titel=Beispiel Titel
  |subtitel=Beispiel Unterüberschrift
  |text=Hier steht ein Beispieltext. Die Farbwerte werden unter "bg-color" eingegeben.
}}
</div></nowiki>

[[Kategorie:Hilfe]]