Morningstar Design System

Profile Images

Variations Design Guidelines Accessibility

Profile Images

  • 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
Author Photo 
<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
false
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, profile images 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.