Zum Hauptinhalt springen

Neue Float-Container im Rahmen der Migration

Im Rahmen der Migration werden neue zweispaltige Float-Container eingeführt. Sie dienen dazu, bisherige Darstellungen mit Text neben einer Box oder Text neben einem Zitat technisch sauberer in die neue Struktur zu überführen.

Neue Container-Typen

Neu eingeführt werden:

  • Zweispaltiger Float-Container 50:50
  • Zweispaltiger Float-Container 66:33
  • Zweispaltiger Float-Container 33:66

Wofür werden sie verwendet?

Die neuen Float-Container werden insbesondere für bisherige Inhaltselemente genutzt, bei denen eine schmale Box beziehungsweise ein Zitat neben einem größeren Textbereich stand.

Das betrifft zum Beispiel:

  • Textboxen vom Typ „Box neben Text“
  • Zitatboxen mit zusätzlichem Text

Verhalten der Float-Container

Die breite Spalte umfließt dabei die schmale Spalte. Damit wird das bisherige Layoutverhalten dieser älteren Inhaltselemente weitgehend nachgebildet.

Trotzdem kann sich die Darstellung nach der Migration leicht verändern, zum Beispiel durch andere Spaltenbreiten, Abstände oder das Verhalten bei längeren Texten. Bitte prüfen Sie diese Elemente daher nach der Migration im Frontend.

Verhalten in der mobilen Ansicht

In der mobilen Ansicht steht das Float-Element immer oben. Anschließend folgt die umfließende Spalte.

Davon abgesehen gilt die Reihenfolge der Containerspalten. Das bedeutet: Die mobile Reihenfolge richtet sich grundsätzlich nach der Spaltenstruktur des jeweiligen Containers, wobei das Float-Element vorrangig oben ausgegeben wird.

Bitte prüfen Sie daher nach der Migration auch die mobile Darstellung, insbesondere bei Elementen mit Text und Zitat beziehungsweise Text und Box.

Empfehlung zur Nutzung der Spalten

Für die umfließende Spalte sollte nur das Inhaltselement Text freigegeben beziehungsweise verwendet werden.

Für die floatende Spalte empfehlen sich insbesondere:

  • Zitat
  • Text mit farbigem Hintergrund, also die bisherige Nutzung als Textbox

Damit bleibt die Struktur redaktionell nachvollziehbar und die Darstellung im Frontend möglichst stabil.