Cookies on MoJ Design System

We’d like to use analytics cookies so we can understand how you use the service and make improvements.

Skip to main content

Components Messages

Open this example (Messages (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.