Media

Media can include photography, illustrations, art, and graphics. You can use the media credit component to attribute images to their creators.

Overview

Media containers

Media appears in containers with rounded corners.

1:1

A square image container with rounded corners. In the bottom right corner, offset from the edge by a small margin, there is a media icon. The icon is a black rounded square with a gray outline. A white icon of a stylized mountain and sun is in the center.

3:4

The example is the same as the 1:1 container except that the aspect ratio is slightly wider than it is tall.

16:9

The example is the same as the 1:1 container except that the aspect ratio is much wider than it is tall.

Media credit

The media credit component is a small icon that displays the creator's name when clicked.

Closed Default

The icon is a black rounded square with a gray outline. A white icon of a stylized mountain and sun is in the center.

Closed Focused

In the focus state, the component is surrounded with a dashed line.

Open Default

The open component is a wide black rectangle with white text. The example reads "Photo by Jane John. D. Doe" On the right side of the container there is a vertical bar and a white "X" icon.

Open Focused

In the focus state, the entire component is surrounded by a dashed line.

When to use

Use the media container for all media on nyc.gov.

Add the media credit when:

The media is a photograph or artwork
The media is attributed to an individual
You want to credit the individual who contributed the media

The media credit should only appear in standalone images or the background image in the page hero.

When to use something else

Don’t use a media credit for:

Images in cards
Screenshots or instructional graphics
Video (include credit in the video itself)

Only use the media credit to attribute an image to an individual, not a team or organization.

Usage guidelines

The media credit is aligned to the bottom right of the media container.

Never put links in media credits.

Example of a correct open media credit component. Text reads "Photo by Jane John D. Doe" with no links.

Example of incorrect open media credit component. Text reads "Photo by Jane John D. Doe" and "Jane John D. Doe" is hyperlinked.

Images

Images with credits can be utilized with a picture container, with the following items:

Image element: img
Image credit container: div.image-credit
- Image credit text: span.image-credit__text
- Button to toggle image credit visibility: button
- - Close icon: i.i-ph:x
  - Open icon: svg.image-credit__icon--open: The svg code is included in the example below

This code is for reference only. The library is currently in beta. Check back for future releases.

Closed (default)

<div class="code-examples">
  <section>
    <h4 style="justify-content: center;">Closed (default)</h4>
    <picture>
      <img src="/assets/img/components-media-code-placeholder.png" alt="Example image of two girls playing." />

      <!-- START -->
      <div class="image-credit" data-expanded="false">
        <span class="image-credit__text" aria-hidden="true">Photo by Jane Doe</span>
        <button type="button" aria-label="Image credits" aria-expanded="false">
          <i class="i-ph:x"></i>
          <svg class="image-credit__icon--open" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M19.5 2.625H4.5C4.00272 2.625 3.52581 2.82254 3.17417 3.17417C2.82254 3.52581 2.625 4.00272 2.625 4.5V19.5C2.625 19.9973 2.82254 20.4742 3.17417 20.8258C3.52581 21.1775 4.00272 21.375 4.5 21.375H19.5C19.9973 21.375 20.4742 21.1775 20.8258 20.8258C21.1775 20.4742 21.375 19.9973 21.375 19.5V4.5C21.375 4.00272 21.1775 3.52581 20.8258 3.17417C20.4742 2.82254 19.9973 2.625 19.5 2.625ZM19.125 4.875V10.8488L17.4506 9.17438C17.099 8.82287 16.6222 8.6254 16.125 8.6254C15.6278 8.6254 15.151 8.82287 14.7994 9.17438L4.875 19.0988V4.875H19.125ZM8.03063 19.125L16.125 11.0306L19.125 14.0306V19.125H8.03063ZM7.125 9C7.125 8.62916 7.23497 8.26665 7.44099 7.95831C7.64702 7.64996 7.93986 7.40964 8.28247 7.26773C8.62508 7.12581 9.00208 7.08868 9.36579 7.16103C9.72951 7.23337 10.0636 7.41195 10.3258 7.67417C10.588 7.9364 10.7666 8.27049 10.839 8.63421C10.9113 8.99792 10.8742 9.37492 10.7323 9.71753C10.5904 10.0601 10.35 10.353 10.0417 10.559C9.73335 10.765 9.37084 10.875 9 10.875C8.50272 10.875 8.02581 10.6775 7.67417 10.3258C7.32254 9.97419 7.125 9.49728 7.125 9Z" fill="white"/> </svg>
        </button>
      </div>
      <!-- END -->

    </picture>
  </section>
</div>
<script>
  document.querySelector('.image-credit button').addEventListener('click', function() {
    const credit = this.parentElement;
    const isExpanded = credit.getAttribute('data-expanded') === 'true';
    credit.setAttribute('data-expanded', !isExpanded);
    this.setAttribute('aria-expanded', !isExpanded);
    credit.querySelector('.image-credit__text').setAttribute('aria-hidden', isExpanded);
  });
</script>