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-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_6aca2f1cb7d4c" data-large-img="/assets/img/993-900x600.jpg" data-stepping="0" data-caption="Image with stuff"
    data-component="image">
      <div class="c-image__image-wrapper">
        <img class="c-image__image" src="/assets/img/993-300x200.jpg" alt="The alt text" loading="lazy" width="300" height="200" />
      </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_6aca2f1cb7d4c" data-large-img="/assets/img/1026-900x600.jpg" data-stepping="1" data-caption=
    "Sed posuere consectetur est at lobortis." data-component="image">
      <div class="c-image__image-wrapper">
        <img class="c-image__image" src="/assets/img/1026-300x200.jpg" alt="The alt text" loading="lazy" width="300" height="200" />
      </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_6aca2f1cb7d4c" data-large-img="/assets/img/1038-900x600.jpg" data-stepping="2" data-caption="Image with stuff"
    data-component="image">
      <div class="c-image__image-wrapper">
        <img class="c-image__image" src="/assets/img/1038-300x200.jpg" alt="The alt text" loading="lazy" width="300" height="200" />
      </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_6aca2f1cb7d4c" data-large-img="/assets/img/1039-900x600.jpg" data-stepping="3" data-caption="Image with stuff"
    data-component="image">
      <div class="c-image__image-wrapper">
        <img class="c-image__image" src="/assets/img/1039-300x200.jpg" alt="The alt text" loading="lazy" width="300" height="200" />
      </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_6aca2f1cb7d4c" data-large-img="/assets/img/1043-900x600.jpg" data-stepping="4" data-caption="Image with stuff"
    data-component="image">
      <div class="c-image__image-wrapper">
        <img class="c-image__image" src="/assets/img/1043-300x200.jpg" alt="The alt text" loading="lazy" width="300" height="200" />
      </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_6aca2f1cb7d4c" 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-component="image">
      <div class="c-image__image-wrapper">
        <img class="c-image__image" src="/assets/img/1006-300x200.jpg" alt="The alt text" loading="lazy" width="300" height="200" />
      </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_6aca2f1cb7d4c" aria-modal="true" role="dialog" id="gallery_6aca2f1cb7d4c" 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-component=
    "button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
     <span class="c-icon c-icon--close c-icon--material c-icon--material-close c-icon--svg-material c-icon--size-lg" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label=
    "Icon: Undefined" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
    "fill:var(--icon-color, currentColor)">
    <path d="M256 760 200 704 424 480 200 256 256 200 480 424 704 200 760 256 536 480 760 704 704 760 480 536Z"></path></svg></span></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-component=
    "button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
     <span class="c-icon c-icon--chevron-left c-icon--material c-icon--material-chevron_left c-icon--svg-material c-icon--size-lg" aria-hidden="false" role="img" data-nosnippet="" translate="no"
    aria-label="Icon: Undefined" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
    "fill:var(--icon-color, currentColor)">
    <path d="M560 720 320 480 560 240 616 296 432 480 616 664Z"></path></svg></span></span></span></button> <!-- image.blade.php -->
    <figure class="c-image c-image--is-placeholder c-image--is-placeholder" 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 -->
         <span class="c-icon c-icon--broken-image c-icon--material c-icon--material-broken_image c-icon--svg-material c-icon--size-xxl" role="img" data-nosnippet="" translate="no" aria-label=
        "Icon: Undefined" aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
        "fill:var(--icon-color, currentColor)">
        <path d=
        "M200 840Q167 840 143.5 816.5Q120 793 120 760V200Q120 167 143.5 143.5Q167 120 200 120H760Q793 120 816.5 143.5Q840 167 840 200V760Q840 793 816.5 816.5Q793 840 760 840ZM240 503 400 343 560 503 720 343 760 383V200Q760 200 760.0 200.0Q760 200 760 200H200Q200 200 200.0 200.0Q200 200 200 200V463ZM200 760H760Q760 760 760.0 760.0Q760 760 760 760V496L720 456L560 616L400 456L240 616L200 576V760Q200 760 200.0 760.0Q200 760 200 760ZM200 760Q200 760 200.0 760.0Q200 760 200 760V496V576V463V383V200Q200 200 200.0 200.0Q200 200 200 200Q200 200 200.0 200.0Q200 200 200 200V463V576V760Q200 760 200.0 760.0Q200 760 200 760Z">
        </path></svg></span>
      </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-component=
    "button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
     <span class="c-icon c-icon--chevron-right c-icon--material c-icon--material-chevron_right c-icon--svg-material c-icon--size-lg" aria-hidden="false" role="img" data-nosnippet="" translate="no"
    aria-label="Icon: Undefined" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
    "fill:var(--icon-color, currentColor)">
    <path d="M504 480 320 296 376 240 616 480 376 720 320 664Z"></path></svg></span></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	Type	Description
list	[]	array	-
ariaLabels	[]	array	-

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