Exhibits

  • HTML/CSS Available
  • Web Component Unavailable
  • Last Updated

    2.11.0

Exhibits pair a visual element and a caption to provide additional content intended to aid in the communication of ideas.

Variations

Default

Use to display an informative visual paired with a caption.

Exhibit
Photograph of a modernist apartment building in Tokyo
Ex: An example of a modernist apartment building style common to Tokyo.
<figure class="mds-exhibit">
    <div class="mds-exhibit__content">
        <img src="/images/components/exhibits/exhibits-sample-image.png" alt="Photograph of a modernist apartment building in Tokyo">
    </div>
    <figcaption class="mds-exhibit__caption">Ex: An example of a modernist apartment building style common to Tokyo.</figcaption>
</figure>
  • Always provide a caption which directly relates to the content in the exhibit.

Use When

  • Providing supporting visual content, e.g., an image, data table, or chart, within the context of a larger composition.

Don′t Use When

  • Grouping visual content and text to provide an entry point into more information. Instead, use a Card.

Visual Language

  • By default, exhibits expand to 100% of the width of their container. Consider applying custom sizing to meet your product’s needs.
  • When using an exhibit within an Article, consider including a Header to title the content.

Editorial

  • Captions can either be full sentences or phrases; use whatever best helps you describe the core meaning/context of the visual element.

Ex: Snap Inc. CEO Fox Mulder rings the opening bell of the New York Stock Exchange on Dec. 1.

Do

Using a button to execute a contextual search.

Do
  • End each caption with a period, even if it’s not a sentence.
  • If using a sentence, remove extraneous, “filler” words.
    • If you’re relying on too many “filler words,” try using a caption instead.

Ex: The photo shows...

Don‘t

Ex: This is a chart that...

Don‘t

Best Practices

  • Considering using the aria-describedby tag to link the mds-exhibit__content and the mds-exhibit__caption.

Implementation

  • When using an image within the mds-exhibit__content area, always include the alt attribute describing the information that is visually displayed but is not explained in the mds-exhibit__caption text.