Stage and Media Component

Stages and media components are suitable for highlighting important topics or placing key visuals prominently on a page. They have a modular structure, allowing them to be individually adapted to your specific needs. It is possible to use them on all page levels.



a. Stages are placed on top of a page and show the most important topic or
    the core topic of the site. They can only be used once per page.
b. Media components can be used several times per page and appear within
    in the content as a highlight component.


The components always run over 12 columns (XL) while their Images and optional Sliders are always placed outside the grid to the browser edges. Stages & Media Components must contain at least a headline.
The remaining elements are optional.
a. Overline
b. Headline
c. Copy
d. Link to site
e. Movie button (movie opens directly in the stage)
f. Slider
g. Stages have overlapping elements only at the bottom, while media
    components can be overlapped at the top and bottom.

Stage versions

stage versions.jpg

Stages are available in versions for
a. dark backgrounds (with white typography)
b. light backgrounds (with black typography)
c. The stage size is either big (image ratio 16:9)
d. or small (image ratio 2.56:1) – for key visuals without text.

Text elements and buttons can be placed left or right, depending on the Image. In the dark version the image is layered with 20% black to make sure that the typography is legible.


Media component

media component.jpg
The media component is available in the same versions as the stage.
It can be used as a
a. big version with different elements (see above) or as
b. small version without text.

responsive behaviour.jpg

Left: The stages and media components behave in the same way in the three largest viewports.

Right: In the smallest viewport, there are no overlapping elements and the background image has a 50% black overlay to make sure that the text is legible.

Related topics


Kontakt und Feedback

Das Team Brand Consultancy berät Sie gerne bei Fragen: Kontakt.
Wir freuen uns über ein Feedback zum Brand Portal.