Components

Message

Use message component for chat or messaging communications.

Usage

Here is an example of a standard usage of message component.

May 29, 2023, 4:50PM

Q&A Moderator

Moderator

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ullamcorper velit sed ullamcorper morbi tincidunt ornare massa eget egestas. Pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat.

 HTML 
 <article class="message">
    <p class="message-time">May 29, 2023, 4:50PM</p>
    <div class="persona message-persona">
        <figure class="persona-avatar">
            <img src="~/src/scaffold/media/avatar.png" alt="Avatar for Jane Doe" />
        </figure>
    </div>
    <div class="message-content">
        <div class="message-content-header">
            <div class="persona">
                <div class="persona-details">
                    <p class="persona-name">Q&A Moderator</p>
                    <p>Moderator</p>
                </div>
            </div>
            <details class="message-content-options popover popover-right">
                <summary class="button button-clear button-primary">⋮</summary>
                <div class="popover-content">Popover content.</div>
            </details>
        </div>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
            labore et dolore magna aliqua. Ullamcorper velit sed ullamcorper morbi tincidunt ornare massa
            eget egestas. Pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat.
        </p>
    </div>
</article> 

Use the message-sender class to indicate message sent by the user.

May 29, 2023, 4:55PM

Kay Smith

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Viverra aliquet eget sit amet tellus cras. Nisl nisi scelerisque eu ultrices vitae. Condimentum id venenatis a condimentum. Ut eu sem integer vitae.

 HTML 
 <article class="message message-sender">
    <p class="message-time">May 29, 2023, 4:55PM</p>
    <div class="persona message-persona">
        <figure class="persona-avatar">
            <img src="~/src/scaffold/media/avatar.png" alt="Avatar for Jane Doe" />
        </figure>
    </div>
    <div class="message-content">
        <div class="message-content-header">
            <div class="persona">
                <div class="persona-details">
                    <p class="persona-name">Kay Smith</p>
                </div>
            </div>
            <details class="message-content-options popover popover-right">
                <summary class="button button-clear">⋮</summary>
                <div class="popover-content">Popover content.</div>
            </details>
        </div>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
            labore et dolore magna aliqua. Viverra aliquet eget sit amet tellus cras. Nisl nisi
            scelerisque eu ultrices vitae. Condimentum id venenatis a condimentum. Ut eu sem integer
            vitae.
        </p>
    </div>
</article> 

Sizes

message-sm is available for resizing.

May 29, 2023, 4:50PM

Q&A Moderator

Moderator

May 29, 2023, 4:50PM

Q&A Moderator

Moderator

 HTML 
 <article class="message message-sm">
    <p class="message-time">May 29, 2023, 4:50PM</p>
    <div class="persona persona-sm message-persona">
        <figure class="persona-avatar">
            <img src="~/src/scaffold/media/avatar.png" alt="Avatar for Jane Doe" />
        </figure>
    </div>
    <div class="message-content">
        <div class="message-content-header">
            <div class="persona persona-sm">
                <div class="persona-details">
                    <p class="persona-name">Q&A Moderator</p>
                    <p class="font-size-xs">Moderator</p>
                </div>
            </div>
            <details class="message-content-options popover popover-right">
                <summary class="button button-clear button-primary">⋮</summary>
                <div class="popover-content">Popover content.</div>
            </details>
        </div>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
            labore et dolore magna aliqua. Ullamcorper velit sed ullamcorper morbi tincidunt ornare massa
            eget egestas. Pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat.
        </p>
    </div>
</article>
<div class="margin-sm"></div>
<article class="message">
    <p class="message-time">May 29, 2023, 4:50PM</p>
    <div class="persona message-persona">
        <figure class="persona-avatar">
            <img src="~/src/scaffold/media/avatar.png" alt="Avatar for Jane Doe" />
        </figure>
    </div>
    <div class="message-content">
        <div class="message-content-header">
            <div class="persona">
                <div class="persona-details">
                    <p class="persona-name">Q&A Moderator</p>
                    <p>Moderator</p>
                </div>
            </div>
            <details class="message-content-options popover popover-right">
                <summary class="button button-clear button-primary">⋮</summary>
                <div class="popover-content">Popover content.</div>
            </details>
        </div>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
            labore et dolore magna aliqua. Ullamcorper velit sed ullamcorper morbi tincidunt ornare massa
            eget egestas. Pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat.
        </p>
    </div>
</article> 

Message

Usage

Sizes

Figma