Gallery

The Gallery component provides a reusable pattern for gallery in the interface.

Gallery

Image with stuff
Sed posuere consectetur est at lobortis.
Image with stuff
Image with stuff
Image with stuff
Image with stuff, and a long description provided in the caption field.

<ul class="c-gallery" data-uid="6aa533ae067d3" data-component="gallery">
  <li class="c-gallery__item c-gallery__item-0">
    <!-- image.blade.php -->
    <figure class="c-image c-image--type-jpg c-image--full-width" data-open="gallery_6aa533ae067f8" data-large-img="/assets/img/993-900x600.jpg" data-stepping="0" data-caption="Image with stuff"
    data-uid="6aa533ae06875" data-component="image">
      <div class="c-image__image-wrapper">
        <img loading="lazy" class="c-image__image" src="/assets/img/993-300x200.jpg" alt="The alt text" />
      </div>
      <figcaption>
        <span class="c-image__caption">Image with stuff</span><br />
      </figcaption>
    </figure>
  </li>
  <li class="c-gallery__item c-gallery__item-1">
    <!-- image.blade.php -->
    <figure class="c-image c-image--type-jpg c-image--full-width" data-open="gallery_6aa533ae067f8" data-large-img="/assets/img/1026-900x600.jpg" data-stepping="1" data-caption=
    "Sed posuere consectetur est at lobortis." data-uid="6aa533ae0693c" data-component="image">
      <div class="c-image__image-wrapper">
        <img loading="lazy" class="c-image__image" src="/assets/img/1026-300x200.jpg" alt="The alt text" />
      </div>
      <figcaption>
        <span class="c-image__caption">Sed posuere consectetur est at lobortis.</span><br />
      </figcaption>
    </figure>
  </li>
  <li class="c-gallery__item c-gallery__item-2">
    <!-- image.blade.php -->
    <figure class="c-image c-image--type-jpg c-image--full-width" data-open="gallery_6aa533ae067f8" data-large-img="/assets/img/1038-900x600.jpg" data-stepping="2" data-caption="Image with stuff"
    data-uid="6aa533ae069b0" data-component="image">
      <div class="c-image__image-wrapper">
        <img loading="lazy" class="c-image__image" src="/assets/img/1038-300x200.jpg" alt="The alt text" />
      </div>
      <figcaption>
        <span class="c-image__caption">Image with stuff</span><br />
      </figcaption>
    </figure>
  </li>
  <li class="c-gallery__item c-gallery__item-3">
    <!-- image.blade.php -->
    <figure class="c-image c-image--type-jpg c-image--full-width" data-open="gallery_6aa533ae067f8" data-large-img="/assets/img/1039-900x600.jpg" data-stepping="3" data-caption="Image with stuff"
    data-uid="6aa533ae06a1a" data-component="image">
      <div class="c-image__image-wrapper">
        <img loading="lazy" class="c-image__image" src="/assets/img/1039-300x200.jpg" alt="The alt text" />
      </div>
      <figcaption>
        <span class="c-image__caption">Image with stuff</span><br />
      </figcaption>
    </figure>
  </li>
  <li class="c-gallery__item c-gallery__item-4">
    <!-- image.blade.php -->
    <figure class="c-image c-image--type-jpg c-image--full-width" data-open="gallery_6aa533ae067f8" data-large-img="/assets/img/1043-900x600.jpg" data-stepping="4" data-caption="Image with stuff"
    data-uid="6aa533ae06a7f" data-component="image">
      <div class="c-image__image-wrapper">
        <img loading="lazy" class="c-image__image" src="/assets/img/1043-300x200.jpg" alt="The alt text" />
      </div>
      <figcaption>
        <span class="c-image__caption">Image with stuff</span><br />
      </figcaption>
    </figure>
  </li>
  <li class="c-gallery__item c-gallery__item-5">
    <!-- image.blade.php -->
    <figure class="c-image c-image--type-jpg c-image--full-width" data-open="gallery_6aa533ae067f8" data-large-img="/assets/img/1006-900x600.jpg" data-stepping="5" data-caption=
    "Image with stuff, and a long description provided in the caption field." data-uid="6aa533ae06ae2" data-component="image">
      <div class="c-image__image-wrapper">
        <img loading="lazy" class="c-image__image" src="/assets/img/1006-300x200.jpg" alt="The alt text" />
      </div>
      <figcaption>
        <span class="c-image__caption">Image with stuff, and a long description provided in the caption field.</span><br />
      </figcaption>
    </figure>
  </li>
</ul><!-- modal.blade.php -->
<dialog class="c-modal c-modal--gallery c-modal--stepper c-modal--is-modal c-modal--scale-up c-modal--padding-3 c-modal--transparent c-modal--overlay-dark" aria-labelledby=
"modal__label__gallery_6aa533ae067f8" aria-modal="true" role="dialog" id="gallery_6aa533ae067f8" data-uid="6aa533ae06d34" data-component="modal">
  <div class="c-modal__header">
    <button class="c-button c-modal__close c-button__basic c-button__basic--default c-button--lg c-button--icon-only" data-close="" aria-label="close" type="button" data-uid="6aa533ae06dae"
    data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
     </span></span></button>
  </div>
  <div class="c-modal__content" tabindex="2">
    <button class="c-button c-modal__prev c-button__basic c-button__basic--default c-button--lg c-button--icon-only" data-prev="" aria-label="chevron_left" type="button" data-uid="6aa533ae06e4f"
    data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
     </span></span></button> <!-- image.blade.php -->
    <figure class="c-image c-image--is-placeholder c-image--is-placeholder" data-uid="6aa533ae06b49" data-component="image">
      <div class="c-image__placeholder" aria-label="Image with stuff, and a long description provided in the caption field.">
        <!-- icon.blade.php -->
      </div>
    </figure><button class="c-button c-modal__next c-button__basic c-button__basic--default c-button--lg c-button--icon-only" data-next="" aria-label="chevron_right" type="button" data-uid=
    "6aa533ae06ec8" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
     </span></span></button>
  </div>
</dialog>

@gallery([
    'list' => [
        ['largeImage' => "/assets/img/993-900x600.jpg", 'smallImage' => "/assets/img/993-300x200.jpg", 'caption' => "Image with stuff", 'alt' => "The alt text"],
        ['largeImage' => "/assets/img/1026-900x600.jpg", 'smallImage' => "/assets/img/1026-300x200.jpg", 'caption' => "Sed posuere consectetur est at lobortis. ", 'alt' => "The alt text"],
        ['largeImage' => "/assets/img/1038-900x600.jpg", 'smallImage' => "/assets/img/1038-300x200.jpg", 'caption' => "Image with stuff", 'alt' => "The alt text"],
        ['largeImage' => "/assets/img/1039-900x600.jpg", 'smallImage' => "/assets/img/1039-300x200.jpg", 'caption' => "Image with stuff", 'alt' => "The alt text"],
        ['largeImage' => "/assets/img/1043-900x600.jpg", 'smallImage' => "/assets/img/1043-300x200.jpg", 'caption' => "Image with stuff", 'alt' => "The alt text"],
        ['largeImage' => "/assets/img/1006-900x600.jpg", 'smallImage' => "/assets/img/1006-300x200.jpg", 'caption' => "Image with stuff, and a long description provided in the caption field.", 'alt' => "The alt text"],
    ]

])
@endgallery

API

Parameter	Default	Description
list	[]	Array with following keys: largeImage, smallImage, caption and alt
ariaLabels	[]	Object with following keys: prev, next

CSS API

Variable	Default	Type	Values	Description
--c-gallery--base	var(--base)	range	-	Main unit that drives radius and spacing scales.
--c-gallery--space	var(--space)	range	-	Base spacing unit. Used for padding and margin inside components.
--c-gallery--color--alpha	var(--color--alpha)	rgba	-	Used for overlays. Includes opacity — set both color and alpha together.
--c-gallery--border-radius	var(--border-radius)	range	-	Border Radius
--c-gallery--shadow-color	var(--shadow-color)	rgba	-	Shadow Color
--c-gallery--shadow-amount	var(--shadow-amount)	range	-	Multiplier for elevation shadows. 0 = none, 1 = default.
--c-gallery--corner-shape	var(--corner-shape)	select	square, round, squircle, circular, bevel, scoop	Corner Shape
--c-gallery--color--alpha-contrast	var(--color--alpha-contrast)	color	-	Used for text and icons on alpha overlays.
--c-gallery--color--surface-contrast-muted	var(--color--surface-contrast-muted)	color	-	Derived muted contrast for text and icons on surface backgrounds.

Similar components

Gallery Modal Paper Table