Letterboxes are useful if you have some source media which is larger than the area you want to display it in. For instance, you might have a really tall image and want it to be displayed in a neatly cropped square. While the ideal solution to this problem is to update the source image, this might not always be possible for either cost or performance reasons.
Letterbox should be used in situations where you would otherwise use the CSS property `background-size: cover`.
Tall content (564:806)
Wide content (564:517)
Square content (1:1)
Square content (1:1) in a vertical frame
Square content (1:1) in a horizontal frame
Component quality checklist
Component is not currently available in Figma.
Component is available in code for web and mobile web.
Component is not currently available in code for iOS.
Component is not currently available in code for Android.