Components Messages

Last updated: 29 March 2022

<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'
    }
  ]
}) }}

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)