Profile Images

Variations Design Guidelines Accessibility

Profile Images
new

HTML/CSS Available
Web Component Unavailable
Last Updated
2.11.0

Profile Images display visual depictions to identify an author or user.

Variations Design Guidelines Accessibility

Variations

Default

Use to show an image of an individual, e.g., an article’s author.

Profile Image

<img class="mds-profile-image" src="/images/components/profile-images/[email protected]" alt="Author Photo">

Examples

Author Bar

This example shows an profile image used within an Article’s Author Bar.

Profile Image

Christine Benz

Apr 17, 2017 | 15 min

<article class="mds-article">
    <div class="mds-article__container">
        <div class="mds-article__author-bar">
            <img class="mds-profile-image" src="/images/components/profile-images/[email protected]" alt="false">
            <div class="mds-article__author-bar-text">
                <div class="mds-article__author-bar-author-name"> Christine Benz </div>
                <div class="mds-article__author-bar-article-info"> Apr 17, 2017 | 15 min </div>
            </div>
            <div class="mds-article__author-bar-actions">
            </div>
        </div>
    </div>
</article>

Use When

Displaying a Article’s author photo.
Displaying a photograph to attribute information to a particular person, like the author of an article or report.
Displaying an avatar for a user.

Don′t Use When

Providing additional visual content paired with text. Instead, use an Exhibit.
Showing supporting illustrations or iconography.

Visual Language

By default, exhibits expand to 100% of the width of their container. Consider applying custom sizing to meet your product’s needs.

Editorial

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

Implementation

Always include an alt attribute describing the information that is visually displayed in the image.