Image

Plain image

Just a plain image

This is a image
Hey, I am a caption for an 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 in modal

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

This is a image
Click image to open a modal with a bigger image example
Click image to open a modal with a bigger image example
<!-- 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

Rounded corners

An image with border radius for rounded corners

This is a image
Image with rounded corners (default size: md)
<!-- 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

Missing plain image

Image not found but rendered as a placeholder.

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

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