Aspect Ratio Mockup Cards Features Block for React

Each cell is one Report with a name, a sentence and a drawing as its child. Copy a cell, change the text and put your drawing inside it. The drawings are small components at the top of the file (TrendDrawing, TableDrawing…); the plate around them is always 4:3, so any drawing you write fills the same box. Keep the total a multiple of three so the last row has no gap.

Yes. Put an image in the cell instead of a drawing component and give it className="size-full object-cover". The 4:3 plate crops it to the same shape as the others. The plates are marked aria-hidden, so give the image an empty alt and keep the meaning in the title and sentence beside it.

The plate is the Aspect Ratio item with ratio={4 / 3}: a CSS aspect-ratio box, with the drawing positioned inside it.

The drawing sits in an absolutely positioned layer with a little padding, so it never changes the box's height.

The grid stays two across, so the plates are about 155 pixels wide. To keep them readable the trend line drops its title bars, the table and the ranked list drop a row, and the breakdown ring drops its legend. Titles and sentences step down a size. Nothing scrolls sideways at 320 pixels.

Every colour is a token: the drawings use the foreground colour at different strengths, never a palette colour. In a right-to-left layout the trend line mirrors with the page, and the bars in the table and the ranked list start from the start side of the page, which is then on the right.

The header and the cells fade up once when the page loads, one after another, with a CSS transition. With reduced motion they simply appear. The drawings themselves are still.