The Rivet design system is highly adaptive in terms of automatically cropping and resizing images to fit specific component types and contexts. However, there are limits to this adaptivity. As a best practice, content creators should crop and resize images to the preferred specs of the component types in which those images are being used.
Below are examples of the most commonly used Rivet components with images.
The preferred aspect ratio for the Vertical Card is 16:9.
The Vertical Card is the default option for the Card component and Card Grid/Feed layout.
The Card Grid/Feed layout will automatically resize images depending on the number of cards (1-4) in a row.
The preferred aspect ratio for the Card component in the horizontal layout is 1:1.
The preferred aspect ratio for the Billboard component is 3:2.
This component should be used sparingly, and rarely more than once per page.
Occasionally you may have an image in an aspect ratio that cannot be easily cropped to fit within one of the components listed above. In such instances, you can use the basic Image component in Rivet.
Note, however, that you should still resize your image to an appropriate size, and even then the image may render in a size that is larger than you would prefer. As such, DUX recommends trying to place images within other Rivet components whenever possible.
In both instances below, the image is 600 pixels wide with a 3:2 aspect ratio. In the first instance, it is presented as a stand-alone Image component. In the second, it is presented as an Image component within the middle column in a 1x3 Grid component.
Placing the image in the middle column of a 1x3 Grid component (below) causes Rivet to resize the image so that it better fits the screen.
This is not an ideal option, and it often requires a significant amount of trial and error to get an image like this to render the way you would like it to. However, in most cases, it is likely preferable to the having an image that is too large for the page context (such as the one above).