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.

<!-- gallery.blade.php -->
    
    <ul class="c-gallery" data-uid="69f0d0faa64ef" 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_69f0d0faa6537" data-large-img="/assets/img/993-900x600.jpg" data-stepping="0" data-caption="Image with stuff" data-uid="69f0d0faa65c9" 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_69f0d0faa6537" data-large-img="/assets/img/1026-900x600.jpg" data-stepping="1" data-caption="Sed posuere consectetur est at lobortis. " data-uid="69f0d0faa66b1" 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_69f0d0faa6537" data-large-img="/assets/img/1038-900x600.jpg" data-stepping="2" data-caption="Image with stuff" data-uid="69f0d0faa6734" 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_69f0d0faa6537" data-large-img="/assets/img/1039-900x600.jpg" data-stepping="3" data-caption="Image with stuff" data-uid="69f0d0faa67b5" 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_69f0d0faa6537" data-large-img="/assets/img/1043-900x600.jpg" data-stepping="4" data-caption="Image with stuff" data-uid="69f0d0faa6823" 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_69f0d0faa6537" 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="69f0d0faa68a8" 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_69f0d0faa6537" aria-modal="true" role="dialog" id="gallery_69f0d0faa6537" data-uid="69f0d0faa6b3e" 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="69f0d0faa6bae" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--close c-icon--material c-icon--material-close material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-lg" aria-hidden="false" data-material-symbol="close" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d0faa6bf1" data-component="icon">
                    </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-uid="69f0d0faa6c40" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <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 material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-lg" aria-hidden="false" data-material-symbol="chevron_left" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d0faa6c7a" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>        
        <!-- image.blade.php -->
    <figure class="c-image c-image--is-placeholder c-image--is-placeholder" data-uid="69f0d0faa691e" 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 material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-xxl" data-material-symbol="broken_image" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69f0d0faa6abd" data-component="icon">
                    </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-uid="69f0d0faa6cc3" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <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 material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-lg" aria-hidden="false" data-material-symbol="chevron_right" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d0faa6cfb" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>            </div>

    
                <!-- steppers.blade.php -->
<div class="c-steppers c-steppers--type-dots" data-uid="69f0d0faa6d5e" data-component="steppers">
    
</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