Exhibits

Variations Design Guidelines Accessibility

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 Design Guidelines Accessibility

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.