r-image

Image with a full‑bleed overlay slot for headings, captions, or buttons.

Usage

<r-image name="cover-illustration">
  <h3>Your custom content here</h3>
  <p>Add any HTML elements</p>
  <!-- Add your own classes/styles in the slotted content -->
  <!-- to control layout, alignment, and typography. -->
</r-image>

Attributes

• name — string, required. Must match an uploaded story image's name so the renderer can resolve its URL.

In Story Content

Embed directly in a story's contentXml:

<div>
  <p>Your story text…</p>
  <r-image name="main-artwork">
    <div class="custom-overlay">
      <h2>Custom Title</h2>
      <p>Any content you want to overlay on the image</p>
    </div>
  </r-image>
  <p>More story text…</p>
  
  <!-- You can include multiple r-image tags in the same document -->
  <r-image name="secondary-art">
    <p>Caption or CTA here</p>
  </r-image>
</div>

Notes

• Renders an img plus an absolute overlay area where slotted content is placed.
• Available in Story content (registered via StoryContent imports).
• Default styles make the image responsive and center overlay content via CSS grid; add your own classes in the slot to adjust layout/typography.