Image
Plain image
Just a plain 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.
<!-- 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
<!-- 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. |