Erstellung einer Checkbox-Liste

Es gibt 4 Möglichkeiten eine Checkbox-Liste zu erstellen.

Screenshot Frontend Checkbox List Variants:

Man legt zuerst eine Section an und in diese fügt man eine Checkbox list ein.

Variante 1

Auf die Section setzt man die CSS-Klasse „lan-form-styles__checkboxlist“ und

Screenshot Backend Section für Checkbox List Normal:

auf die Checkbox list setzt man die CSS- Klasse „lan-form-styles__checkboxlist-label“ als Label-Klasse.

Screenshot Backend Checkbox List Label:

Der Hintergrund der Checkboxen wird beim Anhaken rot.

Screenshot Frontend Checkbox List Normal:

Variante 2

Bei der Variante 2 baut man die Checkbox list genauso wie Variante 1 auf und setzt zusätzlich die CSS-Klasse „lan-form-styles_inverted“ auf die Section.

Screenshot Backend Section für Checkbox List Inverted:

Der Hintergrund der Checkboxen wird beim Anhaken weiß.

Screenshot Frontend Checkbox List Inverted:

Variante 3

Bei der Variante 3 setzt man auf die Section die CSS-Klasse „lan-form-styles__checkbox“ und

Screenshot Backend Section für Checkbox List Buttons:

auf die Checkbox list setzt man als CSS- Klasse „lan-form-styles__checkbox-button-label“ als Label-Klasse.

Screenshot Backend Checkbox List Buttons Label:

Die Checkboxen werden nebeneinander als Buttons dargestellt, die je nach Text unterschiedlich breit sind. Ein inaktiver Button hat eine graue Schrift, ein aktivierter Button hat einen roten Hintergrund und eine weiße Schrift und beim Hover mit der Mouse wird die Schrift schwarz und die Umrandung des Buttons rot hervorgehoben.

Screenshot Frontend Checkbox List Buttons:

Variante 4

Bei der Variante 4 baut man die Checkbox list genauso auf wie bei Variante 3 und setzt die Section in eine weitere Section, die die CSS-Klasse „lan-form-styles__size-full“ bekommt.

Screenshot Backend Section um Section für Checkbox List Buttons:

Die Checkboxen werden untereinander in voller Breite als Buttons dargestellt.

Screenshot Frontend Checkbox List Buttons Below: