Gallery
Gallery
Authored Gallery collection surfaces.
Root
qp-gallery
Root gallery surface.
Children
qp-gallery__caption
Figure caption owned by a gallery item.
qp-gallery__item
Individual gallery item.
Modifiers
qp-gallery__item--vertical
Marks a portrait-oriented gallery item.
Example
Rendered HTML
<div class="qp-gallery">
<figure class="qp-image qp-gallery__item">
<a class="qp-image__link" href="/gallery-study.svg" data-qp-lightbox="image" data-qp-src="/gallery-study.svg" aria-haspopup="dialog" rel="noopener">
<picture><img src="/gallery-study.svg" alt="Neutral layout study with caption" loading="lazy" decoding="async"></picture> </a>
<figcaption class="qp-gallery__caption qp-figure__caption">
<span class="qp-figure__caption-line qp-figure__caption-title">Layout study</span>
<span class="qp-figure__caption-line qp-figure__caption-subtitle">A caption and sub-caption in the gallery and lightbox.</span>
<span class="qp-figure__caption-line qp-figure__caption-credit">Quail Pages</span>
</figcaption>
</figure>
<figure class="qp-image qp-gallery__item">
<a class="qp-image__link" href="/gallery-study.svg" data-qp-lightbox="image" data-qp-src="/gallery-study.svg" aria-haspopup="dialog" rel="noopener">
<picture><img src="/gallery-study.svg" alt="Neutral layout study without caption" loading="lazy" decoding="async"></picture> </a>
</figure>
</div>
Preview
