Image

<figure class="c-image" data-uid="6aa53176d451c" 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

<figure class="c-image c-image--radius-1" data-uid="6aa53176d4939" 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

<figure class="c-image c-image--is-placeholder c-image--is-placeholder" data-uid="6aa53176d4c45" data-component="image">
  <div class="c-image__placeholder" aria-label="This is a image not found">
    <!-- icon.blade.php -->
     <label class="c-image__placeholder-text">Image not found</label>
  </div>
</figure>

@image([
    'src'=> false,
    'alt' => "This is a image not found",
    'placeholderText' => "Image not found"
])
@endimage

<figure class="c-image c-image--full-width" data-uid="6aa53176d51d4" 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

<figure class="c-image c-image--cover" data-uid="6aa53176d5516" 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

<figure class="c-image c-image--container-query" data-uid="6aa53176d5883" data-component="image">
  <div class="c-image__image-wrapper" style="aspect-ratio:425/177;">
    <!-- Image assets -->
    <img loading="lazy" class="c-image__image c-image--mock-image-6aa53176d585a-425" src="https://picsum.photos/seed/styleguide-container-query/425/177" alt=
    "A photograph used to demonstrate responsive image loading." style="object-position: 50% 50%;" /> <img loading="lazy" class="c-image__image c-image--mock-image-6aa53176d585a-768" src=
    "https://picsum.photos/seed/styleguide-container-query/768/320" alt="A photograph used to demonstrate responsive image loading." style="object-position: 50% 50%;" /> <img loading="lazy" class=
    "c-image__image c-image--mock-image-6aa53176d585a-1024" src="https://picsum.photos/seed/styleguide-container-query/1024/427" alt="A photograph used to demonstrate responsive image loading."
    style="object-position: 50% 50%;" /> <img loading="lazy" class="c-image__image c-image--mock-image-6aa53176d585a-1440" src="https://picsum.photos/seed/styleguide-container-query/1440/600" alt=
    "A photograph used to demonstrate responsive image loading." style="object-position: 50% 50%;" /> <img loading="lazy" class="c-image__image c-image--mock-image-6aa53176d585a-1920" src=
    "https://picsum.photos/seed/styleguide-container-query/1920/800" alt="A photograph used to demonstrate responsive image loading." style="object-position: 50% 50%;" />
  </div>
  <figcaption>
    <span class="c-image__caption">By default, an ImageInterface source with multiple candidate sizes renders one &lt;img&gt; per size, switched by CSS container queries. Inspect the element to see
    several &lt;img&gt; tags, only one of which is visible.</span><br />
  </figcaption>
</figure><!-- Image styles -->

@image([
    'src'=> \MunicipioStyleGuide\Helper\MockImage::responsive('styleguide-container-query'),
    'caption' => "By default, an ImageInterface source with multiple candidate sizes renders one <img> per size, switched by CSS container queries. Inspect the element to see several <img> tags, only one of which is visible.",
])
@endimage

<figure class="c-image c-image--container-query" data-uid="6aa53176d5c8a" data-component="image">
  <div class="c-image__image-wrapper" style="aspect-ratio:425/177;">
    <!-- Image assets -->
    <img loading="lazy" class="c-image__image c-image--mock-image-6aa53176d5c62-425" src="https://picsum.photos/seed/styleguide-responsive/425/177" alt=
    "A photograph used to demonstrate responsive image loading." style="object-position: 50% 50%;" /> <img loading="lazy" class="c-image__image c-image--mock-image-6aa53176d5c62-768" src=
    "https://picsum.photos/seed/styleguide-responsive/768/320" alt="A photograph used to demonstrate responsive image loading." style="object-position: 50% 50%;" /> <img loading="lazy" class=
    "c-image__image c-image--mock-image-6aa53176d5c62-1024" src="https://picsum.photos/seed/styleguide-responsive/1024/427" alt="A photograph used to demonstrate responsive image loading." style=
    "object-position: 50% 50%;" /> <img loading="lazy" class="c-image__image c-image--mock-image-6aa53176d5c62-1440" src="https://picsum.photos/seed/styleguide-responsive/1440/600" alt=
    "A photograph used to demonstrate responsive image loading." style="object-position: 50% 50%;" /> <img loading="lazy" class="c-image__image c-image--mock-image-6aa53176d5c62-1920" src=
    "https://picsum.photos/seed/styleguide-responsive/1920/800" alt="A photograph used to demonstrate responsive image loading." style="object-position: 50% 50%;" />
  </div>
  <figcaption>
    <span class="c-image__caption">One responsive &lt;img&gt;, fed by a fake ImageInterface with several candidate sizes. Opted in via preferSrcset, since the default is container-query
    switching.</span><br />
  </figcaption>
</figure><!-- Image styles -->

@image([
    'src'=> \MunicipioStyleGuide\Helper\MockImage::responsive(),
    'preferSrcset' => true,
    'caption' => "One responsive <img>, fed by a fake ImageInterface with several candidate sizes. Opted in via preferSrcset, since the default is container-query switching.",
])
@endimage

<figure class="c-image c-image--container-query c-image--cover" data-uid="6aa53176d5fc6" data-component="image">
  <div class="c-image__image-wrapper" style="aspect-ratio: 16/9;">
    <!-- Image assets -->
    <img loading="lazy" class="c-image__image c-image--mock-image-6aa53176d5faf-425" src="https://picsum.photos/seed/styleguide-focus/425/425" alt=
    "A photograph used to demonstrate responsive image loading." style="object-position: 80% 15%;" /> <img loading="lazy" class="c-image__image c-image--mock-image-6aa53176d5faf-1024" src=
    "https://picsum.photos/seed/styleguide-focus/1024/1024" alt="A photograph used to demonstrate responsive image loading." style="object-position: 80% 15%;" /> <img loading="lazy" class=
    "c-image__image c-image--mock-image-6aa53176d5faf-1920" src="https://picsum.photos/seed/styleguide-focus/1920/1920" alt="A photograph used to demonstrate responsive image loading." style=
    "object-position: 80% 15%;" />
  </div>
  <figcaption>
    <span class="c-image__caption">The image is focused towards the top right corner.</span><br />
  </figcaption>
</figure><!-- Image styles -->

@image([
    'src'=> \MunicipioStyleGuide\Helper\MockImage::withFocusPoint(),
    'cover' => true,
    'preferSrcset' => true,
    'caption' => "The image is focused towards the top right corner.",
    'wrapperAttributes' => ['style' => 'aspect-ratio: 16/9;'],
])
@endimage

<figure class="c-image c-image--container-query" data-uid="6aa53176d6359" data-component="image">
  <div class="c-image__image-wrapper" style="aspect-ratio:425/177;background-image: url(https://picsum.photos/seed/styleguide-lqip/32/32); background-position: 50% 50%;">
    <!-- Image assets -->
    <img loading="lazy" class="c-image__image c-image--mock-image-6aa53176d6337-425" src="https://picsum.photos/seed/styleguide-lqip/425/177" alt=
    "A photograph used to demonstrate responsive image loading." style="object-position: 50% 50%;" /> <img loading="lazy" class="c-image__image c-image--mock-image-6aa53176d6337-768" src=
    "https://picsum.photos/seed/styleguide-lqip/768/320" alt="A photograph used to demonstrate responsive image loading." style="object-position: 50% 50%;" /> <img loading="lazy" class=
    "c-image__image c-image--mock-image-6aa53176d6337-1024" src="https://picsum.photos/seed/styleguide-lqip/1024/427" alt="A photograph used to demonstrate responsive image loading." style=
    "object-position: 50% 50%;" /> <img loading="lazy" class="c-image__image c-image--mock-image-6aa53176d6337-1440" src="https://picsum.photos/seed/styleguide-lqip/1440/600" alt=
    "A photograph used to demonstrate responsive image loading." style="object-position: 50% 50%;" /> <img loading="lazy" class="c-image__image c-image--mock-image-6aa53176d6337-1920" src=
    "https://picsum.photos/seed/styleguide-lqip/1920/800" alt="A photograph used to demonstrate responsive image loading." style="object-position: 50% 50%;" />
  </div>
  <figcaption>
    <span class="c-image__caption">A low quality placeholder is shown as a background while the image loads.</span><br />
  </figcaption>
</figure><!-- Image styles -->

@image([
    'src'=> \MunicipioStyleGuide\Helper\MockImage::responsiveWithLqip(),
    'preferSrcset' => true,
    'caption' => "A low quality placeholder is shown as a background while the image loads.",
])
@endimage

<figure class="c-image c-image--container-query" data-uid="6aa53176d6697" data-component="image">
  <div class="c-image__image-wrapper" style="aspect-ratio:1024/683;">
    <!-- Image assets -->
    <img loading="lazy" class="c-image__image c-image--mock-image-6aa53176d6684-1024" src="https://picsum.photos/seed/styleguide-single/1024/683" alt=
    "A photograph used to demonstrate responsive image loading." style="object-position: 50% 50%;" />
  </div>
  <figcaption>
    <span class="c-image__caption">Only one candidate size is available, so no srcset or sizes attribute is rendered.</span><br />
  </figcaption>
</figure><!-- Image styles -->

@image([
    'src'=> \MunicipioStyleGuide\Helper\MockImage::withoutSrcset(),
    'preferSrcset' => true,
    'caption' => "Only one candidate size is available, so no srcset or sizes attribute is rendered.",
])
@endimage

<figure class="c-image c-image--container-query c-image--full-width" data-uid="6aa53176d69c9" data-component="image">
  <div class="c-image__image-wrapper" style="aspect-ratio:425/177;">
    <!-- Image assets -->
    <img class="c-image__image c-image--mock-image-6aa53176d69a7-425" src="https://picsum.photos/seed/styleguide-eager/425/177" alt="A photograph used to demonstrate responsive image loading." style=
    "object-position: 50% 50%;" loading="eager" fetchpriority="high" sizes="100vw" /> <img class="c-image__image c-image--mock-image-6aa53176d69a7-768" src=
    "https://picsum.photos/seed/styleguide-eager/768/320" alt="A photograph used to demonstrate responsive image loading." style="object-position: 50% 50%;" loading="eager" fetchpriority="high"
    sizes="100vw" /> <img class="c-image__image c-image--mock-image-6aa53176d69a7-1024" src="https://picsum.photos/seed/styleguide-eager/1024/427" alt=
    "A photograph used to demonstrate responsive image loading." style="object-position: 50% 50%;" loading="eager" fetchpriority="high" sizes="100vw" /> <img class=
    "c-image__image c-image--mock-image-6aa53176d69a7-1440" src="https://picsum.photos/seed/styleguide-eager/1440/600" alt="A photograph used to demonstrate responsive image loading." style=
    "object-position: 50% 50%;" loading="eager" fetchpriority="high" sizes="100vw" /> <img class="c-image__image c-image--mock-image-6aa53176d69a7-1920" src=
    "https://picsum.photos/seed/styleguide-eager/1920/800" alt="A photograph used to demonstrate responsive image loading." style="object-position: 50% 50%;" loading="eager" fetchpriority="high"
    sizes="100vw" />
  </div>
  <figcaption>
    <span class="c-image__caption">Overriding imgAttributeList lets a caller opt out of the lazy-loading default, e.g. for above-the-fold images. preferSrcset is also set, since a prioritized image
    should render once, not switch between several candidates.</span><br />
  </figcaption>
</figure><!-- Image styles -->

@image([
    'src'=> \MunicipioStyleGuide\Helper\MockImage::responsive('styleguide-eager'),
    'preferSrcset' => true,
    'imgAttributeList' => [
        'loading' => 'eager',
        'fetchpriority' => 'high',
        'sizes' => '100vw',
    ],
    'fullWidth' => true,
    'caption' => "Overriding imgAttributeList lets a caller opt out of the lazy-loading default, e.g. for above-the-fold images. preferSrcset is also set, since a prioritized image should render once, not switch between several candidates.",
])
@endimage