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:

View demo Open in new window
320 x 568
View code
<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:

View demo Open in new window
320 x 568
View code
<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

Sass JSON Less Value
$gg-image-huge gg-image.huge @gg-image-huge 504px
$gg-image-large gg-image.large @gg-image-large 312px
$gg-image-medium gg-image.medium @gg-image-medium 192px
$gg-image-small gg-image.small @gg-image-small 120px
$gg-image-tiny gg-image.tiny @gg-image-tiny 72px