You are viewing legacy documentation. View the most recent documentation.

Profile Images

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


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



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/profile-images-sample-image@2x.png" alt="Author Photo">


Author Bar

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

Profile Image
<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/profile-images-sample-image@2x.png" alt="false">
            <div class="mds-article__author-bar-text">
                <div class="mds-article__author-bar-author-name">
                    Christine Benz
                <div class="mds-article__author-bar-article-info">
                    Apr 17, 2017 | 15 min
            <div class="mds-article__author-bar-actions">

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.


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


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