Components

Persona

We use the persona to represent users. It consists of two parts - a user's avatar and details. Both subcomponents can be used independent of one another. Details has their name and optional metadata.

Class pattern	Sizes
`.persona.persona-<size>`	`sm`, `lg`

Usage

Below is an example of the most common persona component use-case.

Jane Doe

Software Engineer

 HTML 
 <div class="persona">
    <figure class="persona-avatar">
        <img src="~/src/scaffold/media/avatar.png" alt="Avatar for Jane Doe" />
    </figure>
    <div class="persona-details">
        <p class="persona-name">Jane Doe</p>
        <p>Software Engineer</p>
    </div>
</div> 

Persona's details may contain a link to user's profile, and with help of the .stretched-link component the whole area persona takes becomes clickable:

Jane Doe

Software Engineer

 HTML 
 <div class="persona position-relative">
    <figure class="persona-avatar">
        <img src="~/src/scaffold/media/avatar.png" alt="Avatar for Jane Doe" />
    </figure>
    <div class="persona-details">
        <a class="persona-name justify-self-stretch stretched-link" href="#">Jane Doe</a>
        <p>Software Engineer</p>
    </div>
</div> 

Persona might have both avatar and details presented at the same time or just one of them.

Jane Doe

Software Engineer

 HTML 
 <div class="persona">
    <figure class="persona-avatar">
        <img src="~/src/scaffold/media/avatar.png" alt="Avatar for Jane Doe" />
    </figure>
</div>

<div class="persona margin-top-md">
    <div class="persona-details">
        <p class="persona-name">Jane Doe</p>
        <p>Software Engineer</p>
    </div>
</div> 

Sizes

The following classes are available for resizing: persona-sm, persona-lg.

Jane Doe

Software Engineer

Jane Doe

Software Engineer

Jane Doe

Software Engineer

 HTML 
 <div class="display-flex flex-direction-column gap-sm">
    <div class="persona persona-sm">
        <figure class="persona-avatar">
            <img src="~/src/scaffold/media/avatar.png" alt="Avatar for Jane Doe" />
        </figure>
        <div class="persona-details">
            <p class="persona-name">Jane Doe</p>
            <p>Software Engineer</p>
        </div>
    </div>
    <div class="persona">
        <figure class="persona-avatar">
            <img src="~/src/scaffold/media/avatar.png" alt="Avatar for Jane Doe" />
        </figure>
        <div class="persona-details">
            <p class="persona-name">Jane Doe</p>
            <p>Software Engineer</p>
        </div>
    </div>
    <div class="persona persona-lg">
        <figure class="persona-avatar">
            <img src="~/src/scaffold/media/avatar.png" alt="Avatar for Jane Doe" />
        </figure>
        <div class="persona-details">
            <p class="persona-name">Jane Doe</p>
            <p>Software Engineer</p>
        </div>
    </div>
</div> 

Persona

Usage

Sizes

Figma