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
Image variation in grid
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
≥ 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
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
≥ 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
b. Caption text (optional)
c. Zoom icon (optional) in corporate color, opens the image lightbox on click
≥ 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
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
