Components Messages
Last updated: 11 October 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)