Images

The pictures, but not the hand drawn ones.

Image dimensions

• tiny: 72px;
• small: 120px;
• medium: 192px;
• large: 312px;
• huge: 504px;

How we design them

In most instances image utility classes can be used.

When you need to change the size of the image dynamically (e.g. different sizes for small and large screens) the image sizes can be obtained by using the getImageSize($size) function, where $size is the English term for the size required.

How they look

1. Set image sizes with utility classes:

    <img class="gg-u-image gg-u-image--width-medium gg-u-image--height-medium" src="https://via.placeholder.com/192x192" alt="">

  

2. Set the size of a rectangular image with utility classes:

    <img class="gg-u-image gg-u-image--width-large gg-u-image--height-medium" src="https://via.placeholder.com/312x192" alt="">

  

3. Medium icon on small screens and huge icon on a larger screens:

.el {
    height: getImageSize(large);
    width: getImageSize(large);

    @media (min-width: 960px) {
      height: getImageSize(huge);
      width: getImageSize(huge);
    }
}

Design Tokens

To copy any of the text values to your clipboard, click on the cell containing your required value.