Aspect Ratio
Constrains its content to a fixed width-to-height ratio. One published component, seventeen ratios, each one paired with its own inverse.
Seventeen ratios, every one with its inverse
Drawn here at a common width so the shapes can be compared. In the file each variant is 240px wide and the height falls out of the ratio, which is why 9 / 21 is 560 tall and 21 / 9 is 103.
No examples frame here
Most component pages carry two frames: a Components frame with the full variant matrix, and an examples frame showing the part doing real work. Thirteen of the fifty-nine stop at the first, and Aspect Ratio is one of them. An aspect ratio in context is a photograph at a ratio, and the seventeen variants above already say everything a second frame would. Where the example would only repeat the matrix, the page does not pad the file with one.
One component, seventeen ratios
Read straight out of the Penpot file. The axes below are the property names you will see in the variant dropdown.
Using the Aspect Ratio
Because a board can be dragged to any size, and a size on its own says nothing about intent. Recording the ratio as a named property means the agent reads Ratio=16 / 9 off the instance and emits that ratio, instead of dividing 240 by 135 and hoping the rounding was not deliberate.
It is a container, not a picture. The component is the constraint; the content goes inside your copy - an image, a map, a video still, a card. Everything the kit ships is a bare frame filled with base.muted so an empty slot still reads as a slot.
Each landscape ratio has its portrait inverse: 16 / 9 and 9 / 16, 4 / 3 and 3 / 4, right down to 1.618 / 1 and 1 / 1.618. Rotating a crop is then a dropdown rather than arithmetic, and the two orientations cannot drift apart.
Most component pages carry a second frame showing the part in context. Thirteen of the fifty-nine do not, and this is one of them: an aspect ratio in context is a photo at a ratio, which the seventeen variants already show. Where a second frame would only repeat the first, the page stops at one.