Cookies on ons.gov.uk

Cookies are small files stored on your device when you visit a website. We use some essential cookies to make this website work.

We would like to set additional cookies to remember your settings and understand how you use the site. This helps us to improve our services.

You have accepted all additional cookies. You have rejected all additional cookies. You can change your cookie preferences at any time.

Skip to main content

Help users to Send and reply to messages

Experimental : This pattern needs more research.

Messages - message list

Example: Example Message List contents

Nunjucks

{% from "components/message-list/_macro.njk" import onsMessageList %}

{{
    onsMessageList({
        "ariaLabel": "Message list for ONS Business Surveys",
        "unreadText": "New",
        "fromLabel": "From",
        "dateLabel": "Sent",
        "hiddenReadLabel": "Read the message",
        "ariaLabelMetaData": "Message information",
        "ariaLabelMsg": "Message preview",
        "messages": [
            {
                "id": "message1",
                "unread": true,
                "url": "#0",
                "subject": "BRES 2016 survey response query",
                "fromText": "ONS Business Surveys Team",
                "dateText": "Tue 4 Jul 2020 at 7:47",
                "body": "Hi Jacky. Thanks for that information. Your figures have allowed us to create more accurate…"
            },
            {
                "id": "message2",
                "url": "#0",
                "subject": "BRES 2015 Enquiry on data",
                "fromText": "Jacky Turner",
                "dateText": "Mon 1 Oct 2019 at 9:52",
                "body": "Hi Jacky, Thank you for returning the Business Register and Employment Survey (BRES) 2016…"
            }
        ]
    })
}}

HTML

<ul class="ons-message-list" aria-label="Message list for ONS Business Surveys">
  <li class="ons-message-item" aria-labelledby="message1">
    <h3 class="ons-message-item__subject" id="message1">
      <a href="#0" class="ons-u-fs-r--b">BRES 2016 survey response query</a>
      <span class="ons-message-item__unread ons-u-fs-s">(New)</span>
    </h3>
    <dl class="ons-message-item__metadata" aria-label="Message information">
      <dt class="ons-message-item__metadata-term ons-message-item__metadata-term--from ons-u-vh">From:</dt>
      <dd class="ons-message-item__metadata-value ons-message-item__metadata-value--from ons-u-fs-r--b">ONS Business
        Surveys Team</dd>
      <dt class="ons-message-item__metadata-term ons-message-item__metadata-term--date ons-u-vh">Sent:</dt>
      <dd class="ons-message-item__metadata-value ons-message-item__metadata-value--date ons-u-fs-s">Tue 4 Jul 2020 at
        7:47</dd>
    </dl>
    <div class="ons-message-item__body" aria-label="Message preview"> Hi Jacky. Thanks for that information. Your
      figures have allowed us to create more accurate… </div>
    <div class="ons-message-item__link ons-u-vh"><a href="#0">Read the message: BRES 2016 survey response query</a>
    </div>
  </li>
  <li class="ons-message-item" aria-labelledby="message2">
    <h3 class="ons-message-item__subject" id="message2">
      <a href="#0" class="ons-u-fs-r--b">BRES 2015 Enquiry on data</a>
    </h3>
    <dl class="ons-message-item__metadata" aria-label="Message information">
      <dt class="ons-message-item__metadata-term ons-message-item__metadata-term--from ons-u-vh">From:</dt>
      <dd class="ons-message-item__metadata-value ons-message-item__metadata-value--from ons-u-fs-r--b">Jacky Turner
      </dd>
      <dt class="ons-message-item__metadata-term ons-message-item__metadata-term--date ons-u-vh">Sent:</dt>
      <dd class="ons-message-item__metadata-value ons-message-item__metadata-value--date ons-u-fs-s">Mon 1 Oct 2019 at
        9:52</dd>
    </dl>
    <div class="ons-message-item__body" aria-label="Message preview"> Hi Jacky, Thank you for returning the Business
      Register and Employment Survey (BRES) 2016… </div>
    <div class="ons-message-item__link ons-u-vh"><a href="#0">Read the message: BRES 2015 Enquiry on data</a></div>
  </li>
</ul>

When to use this pattern

Use this pattern as a way to display an index list of conversations/threads between internal and external users of a service.

Messages - conversation thread

Example: Example Conversation contents

Nunjucks

{% from "components/message/_macro.njk" import onsMessage %}
{% from "components/metadata/_macro.njk" import onsMetadata %}
{% from "components/reply/_macro.njk" import onsReply %}

<div class="ons-grid">
    <div class="ons-grid__col ons-col-8@m">
        <section role="region" aria-label="Conversation: BRES 2017 clarification required for Bolts &amp; Ratchets Ltd">
            <h1 class="ons-u-fs-l"><span class="ons-u-vh">Subject: </span>BRES 2017 clarification required for Bolts &amp; Ratchets Ltd</h1>
            {{
                onsMetadata({
                    "metadataLabel": "Information about the survey and respondent",
                    "termCol": "3",
                    "descriptionCol": "9",
                    "itemsList": [
                        {
                            "term": "Survey:",
                            "descriptions": [
                                {
                                    "description": "Bricks & Blocks"
                                }
                            ]
                        },
                        {
                            "term": "RU Ref:",
                            "descriptions": [
                                {
                                    "description": "49900000118"
                                }
                            ]
                        },
                        {
                            "term": "Business:",
                            "descriptions": [
                                {
                                    "description": "Bolts & Ratchets Ltd."
                                }
                            ]
                        }
                    ]
                })
            }}
            {% call onsMessage({
                    "type": 'sent',
                    "fromLabel": 'From',
                    "fromValue": 'ONS surveys',
                    "sentLabel": 'Sent',
                    "sentValue": 'Today at 12:56'
                })
            %}
            <p>Dear Jacky<br><br>Thanks for returning the BRES 2017 spreadsheet for Bolts &amp; Ratchets. I wonder if I could clarify employee figures for two of the sites, as they’re very different to last year’s figures.
                The sites are:<br>Macclesfield<br>
                2015: 45 - 2017: 1<br>and Skipton<br>
                2015: 11 - 2017: 183<br>Are these figures correct?<br>
                <br>
                Many thanks<br>
                David Cleere<br>
                BRES Survey Team</p>
            {% endcall %}

            {% call onsMessage({
                    "type": 'received',
                    "fromLabel": 'From',
                    "fromValue": 'Jackie Turner',
                    "sentLabel": 'Sent',
                    "sentValue": 'Today at 13:15'
                })
            %}
                <p>Hi Dave<br>Thanks for your message. Yes, the figures are right - we had a big expansion last year when we bought The Widgets Group and moved staff to Skipton.
                <br><br>Thanks, Jacky</p>
            {% endcall %}

            {% call onsMessage({
                    "type": 'sent',
                    "fromLabel": 'From',
                    "fromValue": 'ONS surveys',
                    "sentLabel": 'Sent',
                    "sentValue": 'Today at 13:30'
                })
            %}
            <p>Dear Jacky<br><br>Thank you for clarifying. I will now process your data.<br>
                <br>
                Many thanks<br>
                David Cleere<br>
                BRES Survey Team</p>
            {% endcall %}

            {% call onsMessage({
                    "type": 'received',
                    "fromLabel": 'From',
                    "fromValue": 'Jackie Turner',
                    "sentLabel": 'Sent',
                    "sentValue": 'Today at 13:15',
                    "unreadLink": '#0',
                    "unreadLinkText": 'Mark unread'
                })
            %}
             <p>Hi Dave<br>Brilliant.
                <br><br>Thanks, Jacky</p>
            {% endcall %}

            {{
                onsReply({
                    "textarea": {
                        "id": "reply",
                        "name": "reply",
                        "label": {
                            "text": "Reply"
                        }
                    },
                    "button": {
                        "type": 'button',
                        "text": 'Send message'
                    },
                    "closeLinkText": 'Close conversation',
                    "closeLinkUrl": '#0'
                })
            }}
        </section>
    </div>
</div>

HTML

<div class="ons-grid">
  <div class="ons-grid__col ons-col-8@m">
    <section role="region" aria-label="Conversation: BRES 2017 clarification required for Bolts &amp; Ratchets Ltd">
      <h1 class="ons-u-fs-l"><span class="ons-u-vh">Subject: </span>BRES 2017 clarification required for Bolts &amp;
        Ratchets Ltd</h1>
      <dl class="ons-metadata ons-metadata__list ons-grid ons-grid--gutterless ons-u-cf"
        title="Information about the survey and respondent" aria-label="Information about the survey and respondent">
        <dt class="ons-metadata__term ons-grid__col ons-col-3@m">Survey:</dt>
        <dd class="ons-metadata__value ons-grid__col ons-col-9@m">Bricks &amp; Blocks</dd>
        <dt class="ons-metadata__term ons-grid__col ons-col-3@m">RU Ref:</dt>
        <dd class="ons-metadata__value ons-grid__col ons-col-9@m">49900000118</dd>
        <dt class="ons-metadata__term ons-grid__col ons-col-3@m">Business:</dt>
        <dd class="ons-metadata__value ons-grid__col ons-col-9@m">Bolts &amp; Ratchets Ltd.</dd>
      </dl>
      <div class="ons-message ons-message--sent">
        <div class="ons-message__head">
          <dl class="ons-message__metadata">
            <div class="ons-message__sender">
              <dt class="ons-message__term ons-u-fw-b">From:</dt>
              <dd class="ons-message__value ons-u-fw-b">ONS surveys</dd>
            </div>
            <div class="ons-message__timestamp">
              <dt class="ons-message__term ons-u-fs-s">Sent:</dt>
              <dd class="ons-message__value ons-u-fs-s">Today at 12:56</dd>
            </div>
          </dl>
        </div>
        <div class="ons-message__body">
          <p>Dear Jacky<br><br>Thanks for returning the BRES 2017 spreadsheet for Bolts &amp; Ratchets. I wonder if I
            could clarify employee figures for two of the sites, as they’re very different to last year’s figures. The
            sites are:<br>Macclesfield<br> 2015: 45 - 2017: 1<br>and Skipton<br> 2015: 11 - 2017: 183<br>Are these
            figures correct?<br>
            <br> Many thanks<br> David Cleere<br> BRES Survey Team
          </p>
        </div>
      </div>
      <div class="ons-message ons-message--received">
        <div class="ons-message__head">
          <dl class="ons-message__metadata">
            <div class="ons-message__sender">
              <dt class="ons-message__term ons-u-fw-b">From:</dt>
              <dd class="ons-message__value ons-u-fw-b">Jackie Turner</dd>
            </div>
            <div class="ons-message__timestamp">
              <dt class="ons-message__term ons-u-fs-s">Sent:</dt>
              <dd class="ons-message__value ons-u-fs-s">Today at 13:15</dd>
            </div>
          </dl>
        </div>
        <div class="ons-message__body">
          <p>Hi Dave<br>Thanks for your message. Yes, the figures are right - we had a big expansion last year when we
            bought The Widgets Group and moved staff to Skipton. <br><br>Thanks, Jacky</p>
        </div>
      </div>
      <div class="ons-message ons-message--sent">
        <div class="ons-message__head">
          <dl class="ons-message__metadata">
            <div class="ons-message__sender">
              <dt class="ons-message__term ons-u-fw-b">From:</dt>
              <dd class="ons-message__value ons-u-fw-b">ONS surveys</dd>
            </div>
            <div class="ons-message__timestamp">
              <dt class="ons-message__term ons-u-fs-s">Sent:</dt>
              <dd class="ons-message__value ons-u-fs-s">Today at 13:30</dd>
            </div>
          </dl>
        </div>
        <div class="ons-message__body">
          <p>Dear Jacky<br><br>Thank you for clarifying. I will now process your data.<br>
            <br> Many thanks<br> David Cleere<br> BRES Survey Team
          </p>
        </div>
      </div>
      <div class="ons-message ons-message--received">
        <div class="ons-message__head">
          <dl class="ons-message__metadata">
            <div class="ons-message__sender">
              <dt class="ons-message__term ons-u-fw-b">From:</dt>
              <dd class="ons-message__value ons-u-fw-b">Jackie Turner</dd>
            </div>
            <div class="ons-message__timestamp">
              <dt class="ons-message__term ons-u-fs-s">Sent:</dt>
              <dd class="ons-message__value ons-u-fs-s">Today at 13:15</dd>
            </div>
          </dl>
          <a class="ons-message__unread-link" href="#0">Mark unread</a>
        </div>
        <div class="ons-message__body">
          <p>Hi Dave<br>Brilliant. <br><br>Thanks, Jacky</p>
        </div>
      </div>
      <div class="ons-reply ons-js-reply">
        <div class="ons-field">
          <label class="ons-label" for="reply">Reply</label>
          <textarea id="reply" class="ons-input ons-input--textarea   " name="reply" rows="8"></textarea>
        </div>
        <div
          class="ons-grid ons-grid--flex ons-grid--gutterless ons-grid--vertical-center ons-grid--no-wrap@s ons-u-mt-m ons-u-mb-m">
          <div class="ons-grid__col ons-u-mr-m ons-u-mb-s">
            <button type="button" class="ons-btn">
              <span class="ons-btn__inner"><span class="ons-btn__text">Send message</span>
              </span>
            </button>
          </div>
          <div class="ons-grid__col ons-u-mb-s">
            <a class="ons-reply__link" href="#0">Close conversation</a>
          </div>
        </div>
      </div>
    </section>
  </div>
</div>

When to use this pattern

Use this pattern as a way to display conversations/threads between internal and external users of a service.

How to use this pattern

This pattern consists of the following elements/components:

  • Heading that displays the subject of the message thread
  • Metadata that provides information about the service or survey
  • A message thread
  • Optional "Mark as unread" link
  • Form field (textarea) to create a message
  • Submit button to send a message
  • Optional close button to end the conversation

The heading that displays the subject should contain a visually hidden span, for example, <span class="ons-u-vh">Subject: </span>. This helps to provide context to screen reader users about the page.

Each message in a thread is a separate message component. Set the type parameter as sent to display the sent message correctly. Set the type parameter as received to display the received message correctly. You can optionally set the unreadLink and unreadLinkText parameters on the last received message to allow the user to mark the message as unread.

Each message can be stacked to display the conversation/thread.

Help improve this page

Let us know how we could improve this page, or share your user research findings. Discuss the ‘Send and reply to messages’ pattern on GitHub (opens in a new tab)