Image

<!-- image.blade.php -->
    <figure class="c-image" data-uid="69f0d05aba6cb" data-component="image">
         
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="https://picsum.photos/id/1026/300/200" 
    alt="This is a image"
    
></div>            <figcaption>
                <span class="c-image__caption">Hey, I am a caption for an image</span><br>
              </figcaption>
            </figure>

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

<!-- image.blade.php -->
    <figure class="c-image" data-uid="69f0d05abaa4f" data-component="image">
         
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="https://picsum.photos/id/1028/300/200" 
    alt="This is a image"
    
></div>            <figcaption>
                <span class="c-image__caption">Click image to open a modal with a bigger image example</span><br>
              </figcaption>
            </figure>

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

<!-- image.blade.php -->
    <figure class="c-image c-image--radius-1" data-uid="69f0d05abada1" data-component="image">
         
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="https://picsum.photos/id/1032/300/200" 
    alt="This is a image"
    
></div>            <figcaption>
                <span class="c-image__caption">Image with rounded corners (default size: md)</span><br>
              </figcaption>
            </figure>

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

<!-- image.blade.php -->
    <figure class="c-image c-image--is-placeholder c-image--is-placeholder" data-uid="69f0d05abb11f" data-component="image">
                    <div class="c-image__placeholder" aria-label="This is a image not found">
                <!-- 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="69f0d05abb2da" data-component="icon">
                    </span>
          </div>
            </figure>

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

<!-- image.blade.php -->
    <figure class="c-image c-image--full-width" data-uid="69f0d05abb645" data-component="image">
         
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="https://picsum.photos/id/1026/1024/400" 
    alt="This is a image"
    
></div>                        </figure>

@image([
    'src'=> "https://picsum.photos/id/1026/1024/400",
    'alt' => "This is a image",
    'fullWidth' => true
])
@endimage

<!-- image.blade.php -->
    <figure class="c-image c-image--cover" data-uid="69f0d05abba08" data-component="image">
         
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="https://picsum.photos/id/1026/1024/400" 
    alt="This is a image"
    
></div>                        </figure>

@image([
    'src'=> "https://picsum.photos/id/1026/1024/400",
    'alt' => "This is a image",
    'cover' => true
])
@endimage