Tile demonstration

This page demonstrates the use of the special "Row for tiles". This row does not generate predefined columns. Instead, the elements in the row have to generate the columns. Special formatters like for the section can do this. 

This allows you to generate "floating" layouts where the elements float depending on the screen size. 

She's looking at you

OpenCms has all the features

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Powerful

Powerful

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, at accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor.

Architecture

Architecture

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim.

Machine

Machine

Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. 

Turbine

Turbine

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore.

Turbine

Tiles and "standard" elements

The elements above are in a standard container. Blow is a text-tile list. This shows that tiles and standard elements can look exactly the same if configured correctly.

Tiles use display: flex - Squares use display: block.

TILES are "variable height":

  • Are part of a flex-box row
  • Height of a tile is based on the content / formatter
  • All tiles in a row will have the same height decause of flex
  • If height of tiles on a row is variable, flex will compensate for this

SQUARES require "fixed height":

  • Are not in flex-box row, use traditional box model
  • Usually do "float" left
  • Height must be set in the square itself as fixed height