Layouts

Grids with layout combinations

This page shows layout combinations of grids:

1. Where exemplary pictures are placed. Images (media) are vertically centered within the lines.

2. With cards or teasers. They are not vertically centered within the lines.

3. With text indentations (for subtitles and text), which are a special type of layout combination

Further layout combinations of grids can be realized cost-effectively on request. Layout combinations that are not desired can be removed for an optimal content creation experience, so that the editor can only select CI valid styles.

Paragraph: Container Dokumentation

Layouts Dokumentation

Paragraph: Container Dokumentation

Responsive design

Full-responsive design. All content components are optimized for different screen sizes and end devices. A list with 4 elements arranged next to each other can also be displayed in 2 columns or below each other on small-screened devices.

Columns of the same size (e.g. with 6 images)

4 columns

3 columns 1-1-1

3 columns 1-2-1

3 columns 1-1-2

2 columns 1-1

2 columns 2-1

2 columns 1-2

2 columns 3-1

2 columns 1-3

No columns

50% width

Card and Teaser - Elements that are not vertically centered

Card Lorem ipsum

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Card Lorem ipsum

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.

Card Lorem ipsum

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

Subtitle alignment centered & left

Lorem ipsum dolor sit amet

Text alignments centered and left

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.

This is a Page with dummy text.

Content with the wording "Lorem Ipsum" is only a placeholder.