Image

<!-- image.blade.php -->
<figure id="61efb1e2a64b3" class="c-image" data-uid="61efb1e2a64ad">
     
        <img src="https://picsum.photos/300/200?image=1026" alt="This is a image" class="c-image__image "  />
                    <figcaption class="c-image__caption">Hey, I am a caption for an image</figcaption>
            </figure>

@image([
    'src'=> "https://picsum.photos/300/200?image=1026",
    'alt' => "This is a image",
    'caption' => "Hey, I am a caption for an image",
])
@endimage

<!-- image.blade.php -->
<figure id="61efb1e2a674d" class="c-image" data-uid="61efb1e2a6749">
     
        <img src="https://picsum.photos/300/200?image=1028" alt="This is a image" class="c-image__image c-image__modal "  data-open="61efb1e2a6742"  />
                    <figcaption class="c-image__caption">Click image to open a modal with a bigger image example</figcaption>
            </figure>

    <!-- modal.blade.php -->
<div id="61efb1e2a6742" class="c-modal__bg c-modal__bg__animation--scale-up" role="dialog" aria-modal="true" aria-labelledby="modal__label__61efb1e2a6742">
    <div class="c-modal c-modal--is-modal c-modal--padding-3 c-modal--overlay-dark"  data-uid="61efb1e2a6cc6">

        
        <header class="c-modal__header">
                            <!-- typography.blade.php  -->
<h2 id="modal__label__61efb1e2a6742" class="c-typography c-typography__variant--h2" data-uid="61efb1e2a6d53">
    Click image to open a modal with a bigger image example
</h2>            
            <button id="61efb1e2a6de50.47351116" class="c-button c-modal__close c-button__basic c-button__basic--default c-button__icon-size--xl ripple ripple--before c-button--icon-only" href="" target="_top" data-close="" type="button" aria-pressed="false" data-uid="61efb1e2a6df9">   
    <span class="c-button__label">
    
                    <!-- icon.blade.php -->
    <i id="61efb1e2a6e91" class="c-icon c-icon--size-xl material-icons" translate="no" role="img" alt="" data-uid="61efb1e2a6e8c">
                    close
            </i>
        
                    
            
    </span>
</button>        </header>

        <section class="c-modal__content">

            
            
            
            <!-- image.blade.php -->
<figure id="61efb1e2a6be3" class="c-image" data-uid="61efb1e2a6bdc">
     
        <img src="https://picsum.photos/300/200?image=1028" alt="Click image to open a modal with a bigger image example" class="c-image__image "  />
            </figure>

            
                    </section>

        
            </div>
</div>

@image([
    'src'=> "https://picsum.photos/300/200?image=1028",
    'alt' => "This is a image",
    'caption' => "Click image to open a modal with a bigger image example",
    'openModal' => true
])
@endimage

<!-- image.blade.php -->
<figure id="61efb1e2a70c9" class="c-image c-image--rounded " data-uid="61efb1e2a70c5">
     
        <img src="https://picsum.photos/300/200?image=1032" alt="This is a image" class="c-image__image "  />
                    <figcaption class="c-image__caption">Image with rounded corners (default size: md)</figcaption>
            </figure>

@image([
    'src'=> "https://picsum.photos/300/200?image=1032",
    'alt' => "This is a image",
    'caption' => "Image with rounded corners (default size: md)",
    'rounded' => true
])
@endimage

<!-- image.blade.php -->
<figure id="61efb1e2a72de" class="c-image c-image--is-placeholder" data-uid="61efb1e2a72da">
            
        <div class="c-image__placeholder" aria-label="This is a image not found">

                            <!-- icon.blade.php -->
    <i id="61efb1e2a7329" class="c-icon c-icon--size-xl material-icons" translate="no" role="img" alt="" data-uid="61efb1e2a7325">
                    broken_image
            </i>
            
                            <label class="c-image__placeholder-text">
                    Image missing
                </label>
                        
        </div>
        
    </figure>

@image([
    'src'=> false,
    'alt' => "This is a image not found",
    'caption' => "Hey, I am a caption for an missing image",
])
@endimage