Container

Die Containerkomponente kann genutzt werden um Elemente nebeneinander darzustellen. Hierzu stehen die folgenden Varianten zur Verfügung.

Variantenname	Beschreibung
`container`	Sorgt für die Anordnung der Kindelemente, sodass diese nebeneinander stehen. Die verfügbare Breite wird hierbei in 12 gleichmäßige Spalten unterteilt.
`column`	Muss Kindelementen des Containers mit der vorherigen Variante gegeben werden. Zusätzlich kann die Breite der Spalte mit `column-1` bis `column-12` festgelegt werden.

Bilder

Diese Komponente kann zur Einbindung von Bildern genutzt werden. Über die nachfolgenden Varianten kann die Skalierung angepasst werden.

Variantenname	Beschreibung
`ratio`	Setzt die maximale Höhe des Bildes anhand des 16:9-Verhältnisses
`portrait`	Streckt das Bild auf die maximal verfügbare Breite. Die Höhe ergibt sich entsprechend des Seitenverhältnisses.
`landscape`	Streckt das Bild auf die maximal verfügbare Höhe. Die Breite ergibt sich entsprechend des Seitenverhältnisses.

Layout

Repräsentiert eine Einbettungsebene für ein konfiguriertes Layout. Es kann nur auf der obersten Ebene genutzt werden und kann nur Seitenkomponenten enthalten.

Page

Repräsentiert eine Seite. Intial werden alle zu platzierenden Elemente auf einer Seite entsprechend ihres Layouts platziert. Das Javascript übernimmt dann die Verteilung auf Einzelseiten.

Paragraph

Wird für formatierten Text (strong, em, ul, li, a, etc.) genutzt und kann mit den nachfolgenden Varianten verändert werden.

Variantenname	Beschreibung
`lead`	Setzt die Schriftgröße auf `$print-typography-size-lead`.
`muted`	Setzt die Schriftgröße auf `$print-typography-size-muted`.
`headline-1` bis `headline-6`	Setzt die Schrifgröße auf die Überschriftgrößen entsprechend des Levels
`align-center`	Zentriert den Inhalt der Komponente
`align-right`	Richtet den Inhalt rechtsbündig aus
`columns`	Unterteilt den Inhalt in horizontale Spalten. Mit den zusätzlichen Varianten `columns-2` bis `columns-4` kann die Anzahl an Spalten festgelegt werden.

Spacer

Stellt einen vertikalen Abstand dar welche über die folgenden Varianten verändert werden kann.

Variantenname	Beschreibung
`grow`	Erlaubt dem Spacer eine größere Höhe anzunehmen als durch eine andere Variante definiert. Dadurch kann bspw. ein nachfolgendes Element an das Ende der Seite gedrückt werden.
`x2` bis `x16`	Definiert die Höhe des Spacers

Table

Eine Tabelle verfügt über folgende Optionen welche über das Attribut data-print-options gesetzt werden können:

Optionname	Beschreibung
`thead-always`	Wiederholt den Kopfbereich der Tabelle bei jedem Seitenumbruch.
`tfoot-always`	Wiederholt den Fußbereich der Tabelle bei jedem Seitenumbruch.

Zudem können die folgenden Attribute gesetzt werden:

Attribut	Beschreibung
`data-print-orphans`	Legt die Anzahl an Inhaltszeilen fest welche mindestens platziert werden müssen.
`data-print-widows`	Legt die Anzahl an Inhaltszeilen fest welche mindestens für die letzte Platzierung vorhanden sein müssen.

Komponenten (print-styleguide)