Skip to main content

Image

An image is used to add photographic or illustrative content to a page.

Example

A picture of a girl watching fish through a fish tank

Best practices

Use to break up text-heavy pages, to illustrate products for sale, or to improve storytelling on a page.

Do

  • Use descriptive alt text describing what you see in the picture. Make sure you are communicating what the image is telling you visually.
  • Use the Lifestyle and Product imagery guidance when choosing your images.

Don’t

  • Do not ignore the don't guidance at the bottom of the Lifestyle and Product imagery pages.

Related

Image select

Options

  • Round image: Add the class f-round to the image element to make the image round.
  • Lean image: Add the class f-lean to the outer module wrapper to remove vertical padding above the module when a flush design is required.

Development

  • Schema definition: The image schema defines the acceptable configurations, requirements, and options for each module.

Code and preview

Simple image

Placeholder with grey background and dimension watermark without any imagery
<div class="m-image">
    <img class="c-image" src="http://placehold.it/1900x540/2F2F2F/171717" alt="Placeholder with grey background and dimension watermark without any imagery">
</div>

Simple image with caption

Placeholder with grey background and dimension watermark without any imagery

Caption

<div class="m-image">
    <img class="c-image" src="http://placehold.it/2048x600" alt="Placeholder with grey background and dimension watermark without any imagery" aria-describedby="imageCaption">
    <p id="imageCaption" class="c-caption-2">Caption</p>
</div>

Picture

Placeholder with grey background and dimension watermark without any imagery
<div class="m-image">
    <picture class="c-image">
        <source srcset="http://placehold.it/2048x600/2F2F2F/171717" media="(min-width: 1779px)">
        <source srcset="http://placehold.it/1778x600/2F2F2F/171717" media="(min-width:1400px)">
        <source srcset="http://placehold.it/1399x600/2F2F2F/171717" media="(min-width:1084px)">
        <source srcset="http://placehold.it/1083x500/2F2F2F/171717" media="(min-width:768px)">
        <source srcset="http://placehold.it/767x400/2F2F2F/171717" media="(min-width:540px)">
        <source srcset="http://placehold.it/539x300/2F2F2F/171717" media="(min-width:0)">
        <img srcset="http://placehold.it/1399x600/2F2F2F/171717" src="http://placehold.it/1399x600/2F2F2F/171717" alt="Placeholder with grey background and dimension watermark without any imagery">
    </picture>
</div>

Round image

Placeholder with grey background and dimension watermark without any imagery
<div class="m-image">
    <img class="c-image f-round" src="http://placehold.it/200x200/2F2F2F/171717" alt="Placeholder with grey background and dimension watermark without any imagery">
</div>

Picture with lean option

Placeholder with grey background and dimension watermark without any imagery
<div class="m-image f-lean">
    <picture class="c-image">
        <source srcset="http://placehold.it/2048x600/2F2F2F/171717" media="(min-width: 1779px)">
        <source srcset="http://placehold.it/1778x600/2F2F2F/171717" media="(min-width:1400px)">
        <source srcset="http://placehold.it/1399x600/2F2F2F/171717" media="(min-width:1084px)">
        <source srcset="http://placehold.it/1083x500/2F2F2F/171717" media="(min-width:768px)">
        <source srcset="http://placehold.it/767x400/2F2F2F/171717" media="(min-width:540px)">
        <source srcset="http://placehold.it/539x300/2F2F2F/171717" media="(min-width:0)">
        <img srcset="http://placehold.it/1399x600/2F2F2F/171717" src="http://placehold.it/1399x600/2F2F2F/171717" alt="Placeholder with grey background and dimension watermark without any imagery">
    </picture>
</div>

Simple image with lean option

Placeholder with grey background and dimension watermark without any imagery
<div class="m-image f-lean">
    <img class="c-image" src="http://placehold.it/1900x540/2F2F2F/171717" alt="Placeholder with grey background and dimension watermark without any imagery">
</div>