Components Messages

Open this example in a new window

<div id="messages" class="moj-messages-container">

  <div class="moj-message-list">

    <time class="moj-message-list__date" datetime="16 March 2019">16 March 2019</time>

    <div class="moj-message-item moj-message-item--sent">
      <div class="moj-message-item__text moj-message-item__text--sent">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
      <div class="moj-message-item__meta">
        <span class="moj-message-item__meta--sender">Person A</span> at <time class="moj-message-item__meta--timestamp" datetime="10:50am">10:50am</time>
      </div>
    </div>

    <time class="moj-message-list__date" datetime="17 March 2019">17 March 2019</time>

    <div class="moj-message-item moj-message-item--received">
      <div class="moj-message-item__text moj-message-item__text--received">Nullam vestibulum lorem vulputate velit euismod luctus.</div>
      <div class="moj-message-item__meta">
        <span class="moj-message-item__meta--sender">Person B</span> at <time class="moj-message-item__meta--timestamp" datetime="10:51am">10:51am</time>
      </div>
    </div>

    <time class="moj-message-list__date" datetime="19 March 2019">19 March 2019</time>

    <div class="moj-message-item moj-message-item--sent">
      <div class="moj-message-item__text moj-message-item__text--sent">Fusce et vulputate justo. Integer suscipit felis non urna lobortis, vel finibus sem tristique.</div>
      <div class="moj-message-item__meta">
        <span class="moj-message-item__meta--sender">Person A</span> at <time class="moj-message-item__meta--timestamp" datetime="10:53am">10:53am</time>
      </div>
    </div>
    <div class="moj-message-item moj-message-item--sent">
      <div class="moj-message-item__text moj-message-item__text--sent">Mauris tincidunt feugiat orci et convallis. Nam efficitur gravida justo non lobortis. Aliquam velit ante, lobortis eu venenatis sit amet, semper sit amet justo.</div>
      <div class="moj-message-item__meta">
        <span class="moj-message-item__meta--sender">Person A</span> at <time class="moj-message-item__meta--timestamp" datetime="10:55am">10:55am</time>
      </div>
    </div>

    <time class="moj-message-list__date" datetime="21 March 2019">21 March 2019</time>

    <div class="moj-message-item moj-message-item--received">
      <div class="moj-message-item__text moj-message-item__text--received">Proin dapibus, nisl id ultricies ultricies, erat magna pulvinar risus, sit amet commodo nunc purus eu nulla. Aliquam erat volutpat. Vestibulum in ante interdum, elementum arcu vel, viverra nibh. Etiam ultrices urna at suscipit sollicitudin. Nulla non lectus magna. Curabitur vel vestibulum lorem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
      <div class="moj-message-item__meta">
        <span class="moj-message-item__meta--sender">Person B</span> at <time class="moj-message-item__meta--timestamp" datetime="11:56am">11:56am</time>
      </div>
    </div>
  </div>

</div>

Nunjucks macro options

Container

Name	Type	Required	Description
items	array	Yes	An array of message item objects. See items.
classes	string	No	Classes to add to the messages’s container.
attributes	object	No	HTML attributes (for example data attributes) to add to the message’s container.

Items

Name	Type	Required	Description
id	string	No	The unique ID of the item
text	string	Yes	If `html` is set, this is not required. Text to use within the item. If `html` is provided, the `text` argument will be ignored.
html	string	Yes	If `text` is set, this is not required. HTML to use within the item. If `html` is provided, the `text` argument will be ignored.
type	string	Yes	Used to show sent or received messages. Sent messages are blue and aligned to the right, received messages are grey and aligned to the left. Options: `sent` or `received`.
sender	string	Yes	The thing that created the message.
timestamp	string	Yes	A valid datetime string to be formatted. For example: `1970-01-01T11:59:59.000Z`

Warning: If you’re using Nunjucks macros in production be aware that using HTML arguments, or ones ending with .html can be at risk from cross-site scripting attacks. More information about security vulnerabilities can be found in the Nunjucks documentation.

{%- from "moj/components/messages/macro.njk" import mojMessages -%}

{{ mojMessages({
  items: [
    {
      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
      type: 'sent',
      timestamp: '2019-03-16T10:50:00.000Z',
      sender: 'Person A'
    },
    {
      text: 'Nullam vestibulum lorem vulputate velit euismod luctus.',
      type: 'received',
      timestamp: '2019-03-17T10:51:00.000Z',
      sender: 'Person B'
    },
    {
      text: 'Fusce et vulputate justo. Integer suscipit felis non urna lobortis, vel finibus sem tristique.',
      type: 'sent',
      timestamp: '2019-03-19T10:53:00.000Z',
      sender: 'Person A'
    },
    {
      text: 'Mauris tincidunt feugiat orci et convallis. Nam efficitur gravida justo non lobortis. Aliquam velit ante, lobortis eu venenatis sit amet, semper sit amet justo.',
      type: 'sent',
      timestamp: '2019-03-19T10:55:00.000Z',
      sender: 'Person A'
    },
    {
      text: 'Proin dapibus, nisl id ultricies ultricies, erat magna pulvinar risus, sit amet commodo nunc purus eu nulla. Aliquam erat volutpat. Vestibulum in ante interdum, elementum arcu vel, viverra nibh. Etiam ultrices urna at suscipit sollicitudin. Nulla non lectus magna. Curabitur vel vestibulum lorem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.',
      type: 'received',
      timestamp: '2019-03-21T11:56:00.000Z',
      sender: 'Person B'
    }
  ]
}) }}

This component is in the ‘Assets’ tab in the MoJ Figma Kit.

If you’re external to MoJ, download the Kit and add it as a library to your Figma files. You’ll need to re-add the kit to update the version.

View component in MoJ Figma Kit

When to use

Use this component in your service to display a list of messages in chronological order between different people or systems. For example, between case workers and legal professionals.

Research

This component has been used in:

Claim fees for Crown court defence (Legal Aid Agency)
Track a query (Ministry of Justice)

Get help and contribute

Get help

You can contact the MoJ Design System team for help or support using this component.

Help improve this component

The MoJ Design System team would like to hear:

how you have used this component in your service
any feedback you have about its usage, for example accessibility or ideas for improvement

Add these comments to the messages discussion on GitHub.

Cookies on MoJ Design System