Image

Plain image

This is a image
Hey, I am a caption for an image

Just a plain 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 in modal

This is a image
Click image to open a modal with a bigger image example

This image can be opened in a modal by clicking it.

<!-- 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

Rounded corners

This is a image
Image with rounded corners (default size: md)

An image with border radius for rounded corners

<!-- 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

Missing plain image

broken_image

Image not found but rendered as a placeholder.

<!-- 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

Blade component parameters

Key Default value Type Available values Description
src false boolean - -
alt string - -
caption string - -
fullWidth false boolean - -
rounded false boolean - Image radius on all 4 corners
roundedTopLeft false boolean - Image radius on top left corner
roundedTopRight false boolean - Image radius on top right corners
roundedBottomLeft false boolean - Image radius on bottom left corners
roundedBottomRight false boolean - Image radius on bottom right corners
roundedRadius string - Radius size: xs, sm, md and lg
openModal false boolean - If the image should be able to open in a modal
placeholderText Image missing string - Label to show if image is missing
placeholderIcon broken_image string - Icon to display if image is missing / false to hide
placeholderIconSize xl string - Icons size, please refer to image component for size.
id string - The DOM id of the component.
classList [] array - Array containing wrapping classes array
attributeList [] array - Array containing keys and values rendered as attributes
containerAware false boolean true/false Makes the component container aware. Appends modifiers --size--xs/sm/md/lg to the component.
Settings location: /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Image/image.json