Aspect ratios

It's a good practice to tokenise aspect ratios for the images / videos in your project. You can do it with aspectRatios property in the config:

export const shopstoryConfig = {
  //...
  aspectRatios: [
    {
      id: '9:4',
      value: '9:4',
      mapTo: "$panoramic"
    },
    {
      id: '5:7',
      value: '5:7'
    },
    {
      id: '20:7',
      value: '20:7'
    },
    {
      id: '4:1',
      value: '4:1',
      label: 'Super panoramic' // custom label
    },
    {
      id: '$portrait', // overriding built-in
      value: '4:5' ,
      mapTo: "$portrait"
    }
  ],
}

Master tokens for aspect ratios

idLabelDefault value

$panoramic

Panoramic

2:1

$landscape

Landscape

16:9

$square

Square

1:1

Last updated