Skip to main content

Persona

Persona is a representation of a single identity in an ecosystem. When interactive, it links to an account or profile page that show more information and relative metadata about that identity.

Example

Microsoft profile picture
Edward Rodriguez

edrodriguez@microsoft.com

Best practices

Personas should be highly contextual and relevant to the user, either to the page content they are browsing or to the experience flow they are in. As a single instance, it is usually meant to represent the user's presence on the site, but it can also be used in groups in a list format for a module such as people picker. For multiple personas with a unique identify for the group, consider using facepile instead,

Do

  • Use as a reference to identity that is meaningful and relevant.
  • Be mindful of the layout - persona is usually meant to be placed inline in an existing structural container and not meant to be a visually defining block on the page.

Don’t

  • Use random personas as a way to show social activity for the sake of appearing social. Personas should have a meaningful presence on the page that is relevant to the user.

Related

Heading
Image

Options

  • If no image is provided, the persona module will use a SVG default image.
  • Persona variations include image only and image with text. Either variation can have a provided image, or the default image.

Development

  • Schema definition: The persona schema defines the acceptable configurations, requirements, and options for each module.

Code and preview

Heading persona size 1

Microsoft profile picture
Edward Rodriguez

Persona information

<div class="m-persona-1">
    <div>
        <picture role="img" aria-label="Microsoft profile picture">
            <img class="c-image f-round" src="http://placehold.it/144x144" alt="Microsoft profile picture" id="personaSize1">
        </picture>
    </div>
    <div>
        <h5 class="c-heading">Edward Rodriguez</h5>
        <p class="c-subheading">Persona information</p>
    </div>
</div>

Heading persona size 2

Microsoft profile picture
Edward Rodriguez

Persona information

<div class="m-persona-2">
    <div>
        <picture role="img" aria-label="Microsoft profile picture">
            <img class="c-image f-round" src="http://placehold.it/64x64" alt="Microsoft profile picture" id="personaSize2">
        </picture>
    </div>
    <div>
        <h5 class="c-heading">Edward Rodriguez</h5>
        <p class="c-subheading">Persona information</p>
    </div>
</div>

Heading persona size 3

Microsoft profile picture
Edward Rodriguez

Persona information

<div class="m-persona-3">
    <div>
        <picture role="img" aria-label="Microsoft profile picture">
            <img class="c-image f-round" src="http://placehold.it/48x48" alt="Microsoft profile picture" id="personaSize3">
        </picture>
    </div>
    <div>
        <h5 class="c-heading">Edward Rodriguez</h5>
        <p class="c-subheading">Persona information</p>
    </div>
</div>

Heading persona size 4

Microsoft profile picture
Edward Rodriguez
<div class="m-persona-4">
    <div>
        <picture role="img" aria-label="Microsoft profile picture">
            <img class="c-image f-round" src="http://placehold.it/32x32" alt="Microsoft profile picture" id="personaSize4">
        </picture>
    </div>
    <div>
        <h5 class="c-heading">Edward Rodriguez</h5>
    </div>
</div>

Heading persona size 5

Microsoft profile picture
Edward Rodriguez
<div class="m-persona-5">
    <div>
        <picture role="img" aria-label="Microsoft profile picture">
            <img class="c-image f-round" src="http://placehold.it/24x24" alt="Microsoft profile picture" id="personaSize5">
        </picture>
    </div>
    <div>
        <h5 class="c-heading">Edward Rodriguez</h5>
    </div>
</div>

Hyperlink persona size 4

<div class="m-persona-4">
    <div>
        <picture role="img" aria-label="Microsoft profile picture">
            <img class="c-image f-round" src="http://placehold.it/32x32" alt="Microsoft profile picture" id="personaSize4">
        </picture>
    </div>
    <div>
        <a href="#" class="c-hyperlink">Edward Rodriguez</a>
    </div>
</div>

Button persona size 4

Microsoft profile picture
<div class="m-persona-4">
    <div>
        <picture role="img" aria-label="Microsoft profile picture">
            <img class="c-image f-round" src="http://placehold.it/32x32" alt="Microsoft profile picture" id="personaSize4">
        </picture>
    </div>
    <div>
        <button name="button" class="c-button">Edward Rodriguez</button>
    </div>
</div>

Paragraph persona size 4

Microsoft profile picture

Edward Rodriguez

<div class="m-persona-4">
    <div>
        <picture role="img" aria-label="Microsoft profile picture">
            <img class="c-image f-round" src="http://placehold.it/32x32" alt="Microsoft profile picture" id="personaSize4">
        </picture>
    </div>
    <div>
        <p class="c-paragraph">Edward Rodriguez</p>
    </div>
</div>

Default image size 1

Edward Rodriguez

Persona information

<div class="m-persona-1">
    <div>
        <picture role="img" aria-label="Microsoft profile picture"></picture>
    </div>
    <div>
        <h5 class="c-heading">Edward Rodriguez</h5>
        <p class="c-subheading">Persona information</p>
    </div>
</div>

Default image size 2

Edward Rodriguez

Persona information

<div class="m-persona-2">
    <div>
        <picture role="img" aria-label="Microsoft profile picture"></picture>
    </div>
    <div>
        <h5 class="c-heading">Edward Rodriguez</h5>
        <p class="c-subheading">Persona information</p>
    </div>
</div>

Default image size 3

Edward Rodriguez

Persona information

<div class="m-persona-3">
    <div>
        <picture role="img" aria-label="Microsoft profile picture"></picture>
    </div>
    <div>
        <h5 class="c-heading">Edward Rodriguez</h5>
        <p class="c-subheading">Persona information</p>
    </div>
</div>

Default image size 4

Edward Rodriguez
<div class="m-persona-4">
    <div>
        <picture role="img" aria-label="Microsoft profile picture"></picture>
    </div>
    <div>
        <h5 class="c-heading">Edward Rodriguez</h5>
    </div>
</div>

Default image size 5

Edward Rodriguez
<div class="m-persona-5">
    <div>
        <picture role="img" aria-label="Microsoft profile picture"></picture>
    </div>
    <div>
        <h5 class="c-heading">Edward Rodriguez</h5>
    </div>
</div>

Default image only size 1

<div class="m-persona-1">
    <div>
        <picture role="img" aria-label="Microsoft profile picture"></picture>
    </div>
</div>

Default image only size 2

<div class="m-persona-2">
    <div>
        <picture role="img" aria-label="Microsoft profile picture"></picture>
    </div>
</div>

Default image only size 3

<div class="m-persona-3">
    <div>
        <picture role="img" aria-label="Microsoft profile picture"></picture>
    </div>
</div>

Default image only size 4

<div class="m-persona-4">
    <div>
        <picture role="img" aria-label="Microsoft profile picture"></picture>
    </div>
</div>

Default image only size 5

<div class="m-persona-4">
    <div>
        <picture role="img" aria-label="Microsoft profile picture"></picture>
    </div>
</div>