Make components to show images side by side

[ghost]

Developers frequently need to show images side by side. That's fine on regular websites but manually specifying widths and padding is annoying when you just want to write docs.

We want to provide components that lets Mintlify users show multiple images side by side taking up equal amounts of space. For example:

<ImageRow count={2}>
  <img />
  <img />
</Row>

Should show two images side by side like on this page. The HTML for those two images is:

<div className="flex flex-row justify-between">
  <img src="/img/activity_small.png" width={"48%"} />
  <img src="/img/sleep_small.png" width={"48%"} />
</div>

However, we cannot directly modify child components inside the proposed ImageRow component. Whoever attempts this could use the children: variant to modify the CSS of Row's children like we do in CodeBlock

[Vishrut19]

Hi! Can i work on this issue ?

[ghost]

Yes! Let me know if you have any questions.

[internetdrew]

Has anyone found a solution to this? I would love to take a crack at it, if not.

[shalper]

I'd like to be able to present code side by side as in the example below (source). Hope this can be supported soon.