Image

<!-- image.blade.php -->
<figure id="62bed3a170a37" class="c-image" data-uid="62bed3a170a31">
     
        <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="62bed3a170c23" class="c-image" data-uid="62bed3a170c20">
     
        <img src="https://picsum.photos/300/200?image=1028" alt="This is a image" class="c-image__image c-image__modal "  data-open="62bed3a170c1a"  />
                    <figcaption class="c-image__caption">Click image to open a modal with a bigger image example</figcaption>
            </figure>

    <!-- modal.blade.php -->
<dialog id="62bed3a170c1a" class="c-modal c-modal--is-modal c-modal--padding-3 c-modal--overlay-dark" role="dialog" aria-modal="true"
    aria-labelledby="modal__label__62bed3a170c1a" data-uid="62bed3a170f12">

    <header class="c-modal__header">
                    <!-- typography.blade.php  -->
<h2 id="modal__label__62bed3a170c1a" class="c-typography c-typography__variant--h2" data-uid="62bed3a170f94">
    Click image to open a modal with a bigger image example
</h2>        
        <button id="62bed3a171034" class="c-button c-modal__close c-button__basic c-button__basic--default c-button--lg c-button--icon-only" href="" target="_top" data-close="" type="button" aria-pressed="false" data-uid="62bed3a17102d">   
    <span class="c-button__label">
        
                    <span class="c-button__label-icon ">
                <!-- icon.blade.php -->
    <i id="62bed3a1710bb" class="c-icon c-icon--size-lg material-icons" translate="no" role="img" alt="" data-uid="62bed3a1710b6">
                    close
            </i>
            </span>
        
        
    </span>
</button>    </header>

    <section class="c-modal__content">

        
        

        <!-- image.blade.php -->
<figure id="62bed3a170e94" class="c-image" data-uid="62bed3a170e90">
     
        <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>

    
    </dialog>

@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="62bed3a1712ca" class="c-image c-image--rounded " data-uid="62bed3a1712c6">
     
        <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="62bed3a1714a0" class="c-image c-image--is-placeholder" data-uid="62bed3a17149d">
            
        <div class="c-image__placeholder" aria-label="This is a image not found">

                            <!-- icon.blade.php -->
    <i id="62bed3a1714db" class="c-icon c-icon--size-xl material-icons" translate="no" role="img" alt="" data-uid="62bed3a1714d7">
                    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