Image
Image
Authored Image, inline layout, and caption surfaces.
Root
qp-figure
Figure surface emitted for meaningful caption content.
qp-image
Canonical authored Image surface.
qp-inline-image
Stable layout wrapper for an authored Image.
Children
qp-figure__caption
Figure caption container.
qp-figure__caption-credit
Caption credit line.
qp-figure__caption-line
Shared caption line surface.
qp-figure__caption-subtitle
Caption subtitle line.
qp-figure__caption-title
Caption title line.
qp-image__badge
Badge associated with an image.
qp-image__link
Navigation or lightbox link owning an Image.
Modifiers
qp-image--hero
Marks an Image used as PageHeader hero media.
Example
Rendered HTML
<div class="qp-image qp-inline-image">
<picture><img src="/images/team.jpg" alt="The Acme team working together" loading="lazy" decoding="async" style="object-position: 50% 40%; aspect-ratio: 16 / 9;"></picture>
</div>
Preview
