EN: Eine für Smartphones optmierte Version wird in Kürze verfügbar sein
3.0.Components    3.8.Image + Lightbox + Carousel

3.8.Image + Lightbox + Carousel

A lightbox is used as an image/video gallery that allows the user to view the content in a high-quality resolution and a larger scale. This provides a better experience to the user and a better understanding of the content.

You can opt to use a carousel when you want to use several images/videos. You can add the lightbox feature in this component and maintain the behavior.

3.0.Components      3.8.Image + Lightbox + Carousel      3.8.1.Structure

3.8.1.Structure

When selecting an image/video, the lightbox dims the background and makes the content much brighter. When you put an image or a photo into a lightbox, the goal is to get all user’s attention to that item. By blurring the rest of the screen except for a lightbox, you are putting that content in a user’s focus area.

As mentioned on the image and size ratios section, the image sizes that are to be used are 1:1, 2:1 and 16:9.

When having a carousel with lightbox feature, be sure that you allow the inner navigation in-between the existing content.

Some Image
Illustration

Images in a carousel

    Some Image
    Illustration

    Image Lightbox

      Some Image
      Illustration

      Video Lightbox

        3.0.Components      3.8.Image + Lightbox + Carousel      3.8.2.Download Resources

        3.8.2.Download Resources

        Designs of the Lightbox, Images and Carousel components are available for Sketch and integrated in the Daimler Design Kit. You can either copy paste them into your designs or use the Sketch file as a linked library and import the symbols.

        See the Sketch Design Kit