Images

This component can be used in all grid formats. There are two additional varations: fullsize formats and floating image. The main ratio used is 16:9. All images contain an optional caption and zoom icon. The zoom icon opens an image lightbox on click.

Druck

Example

example.jpg
Druck

Image variation in grid

image variation in grid.jpg
a. Image XL-XXS, main ratio 16:9
    Exception: In case of complex infographic XL, L can be used with a
    flexible height
b. Caption text (optional)
c. Zoom icon (optional), in corporate color, opens the image lightbox on click
d. XXS can be used in ratio 16:9 and 1:1

responsive behaviour.jpg

≥ 992

XL: One in a row
L: One in a row
M: Max. two in a row
S: Max. three in a row
XS: Max. four in a row
XXS: Max. six in a row

991 - 768

XL: One in a row
L: One in a row
M: Max. two in a row
S: Max. three in a row
XS: Max. two in a row (slider optional)
XXS: Max. three in a row (slider optional)

767 - 320

XL - XXS: One in a row (slider optional)

Variations: Fullsize images

variations fullsize images.jpg
a. There are two possible variations:
    F1: 100% full width, fixed height 560 px
    Exception: In case of complex infographic it can be used with a flexible
    height
    F2: 50% half width, ratio 16:9
b. Caption text (optional), F1: XL or L / F2: M
c. Zoom icon (optional) in corporate color, opens the image lightbox on click

responsive behaviour 2.jpg

≥ 768

F1: One in a row
F2: Two in a row

767 - 320

F1: One in a row
F2: One in a row (slider optional)

Variation: Floating image S in text

variation floating.jpg
a. Image S, 16:9 or optional with flexible height. Top left or top right
b. Caption text (optional)
c. Zoom icon (optional) in corporate color, opens the image lightbox on click

responsive behaviour 3.jpg

≥ 768

F1: One in a row (left or right aligned at the margin of the grid area and pushing text aside)

767 - 600

F1: One in a row (left or right aligned and pushing text aside / image size four col.)

599 - 320

F1: One in a row (text underneath images / image size max. 330 px)

Variation: Image L with text beside

variation L.jpg
a. Image L, ratio 16:9, placed left or right, not floating.
    Exception: In case of complex information it can be used with a flexible
    height
b. Caption text (optional)
c. Zoom icon (optional) in corporate color, opens image lightbox on click
d. Copy text
For responsive behavior see Grid & Viewports.
Druck

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.