The standard way of thinking about captions for infobox images is this:
<image source="image"> <caption source="caption"/> </image>
You stick a caption within image tags. Simple. Straightforward. And yet: not great if you come from a community with a penchant for writing longish captions. On mobile, captions get truncated. So if you really need to have the entirety of your captions visible, consider making your captions headers.
That is:
<image source="image"/> <header>{{{caption|}}}</header>
Headers are always visible in Mercury and on the desktop in their entirety, and — contrary to what you might think — they're not required to be within a group tag.
But what, you might ask, happens to the other, "proper" headers? Well, that's a stylistic choice on your part. You can leave them inside <header> tags and give only the first header special styling. Since the "caption" is probably always going to be the first header in the box, some nth-child(1)
styling will likely work for you.
Or if you don't like that, you could make all your "proper" headers things that reside in <navigation> tags.
Or if even that doesn’t appeal, you could consider whether you really need to have "proper" headers at all. Your infobox might be small enough that an image, a caption and a few points of data will work for you.