Item with Header for React

Use ItemHeader when the visual should sit above the text at full width, as in this tile grid. Use ItemMedia for a small icon, avatar, or thumbnail beside the title. ItemHeader is basis-full, so it takes the whole row.

The image has aspect-3/2, w-full and object-cover, so it fills the tile's width at a fixed ratio and crops instead of stretching. The width and height attributes give the browser that ratio before the image loads, so the grid doesn't jump.

ItemGroup is a flex column by default; the example adds grid grid-cols-3 gap-4 to turn it into three columns. Use responsive classes, such as one column on small screens and three from md up, if the tiles get too narrow.

Set width and height to the source's ratio, and an alt text that says what the picture shows when it carries meaning. Here the pictures are decorative and the title names the model, so alt is empty. Add loading="lazy" for grids below the fold.

A small radius, rounded-sm here, keeps the image from looking pasted onto the tile's border. Match it to the Item's own corners, which come from your style, so the two curves look related.

Each tile sets role="listitem" inside the group's list, and is read as its name and description. The images have an empty alt, so they are skipped. Render the Item as a link when the whole tile should open a page.