Inset

exhibit is-immersive places content over artwork. With no position class, its fallback is bottom-left, leaving room for art above. Choose any of the nine positions; the generated HTML names it explicitly. Placement moves the content box, while text alignment controls words inside it. An Inset reserves its side of the scene so the main text does not collide with the quotation.

Art with a supporting quotation.

The cutaway reveals the surrounding section background.

HTML

<div class="inset-context"><article class="card is-padded exhibit is-dark is-immersive is-bottom-left has-inset"><div class="artwork" aria-hidden="true"><img src="/assets/images/artwork-placement.svg" width="800" height="500" alt=""></div><div class="content"><h2 class="like-h3">Art with a supporting quotation.</h2><p>The cutaway reveals the surrounding section background.</p></div><aside class="inset is-bottom-right"><figure class="quote is-small is-profile"><figcaption class="media"><img class="media-avatar is-rounded" src="/assets/images/pattern-example.svg" width="48" height="48" alt=""><div class="media-content"><strong>Example person</strong><span>Designer</span></div></figcaption><blockquote><p>“A short supporting quotation.”</p></blockquote></figure></aside></article></div>