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.

.

Example

example.jpg
.

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.
.

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.