Messages

This pattern displays messages sent to the user from an HMRC service.

When to use

Use this pattern when a service needs to send messages to users.

When not to use

Do not use this as the only way of sharing important or time-sensitive information with the user. Only display messages when the user signs in to a service.

How it works

Messages has 2 views. A message list and message details.

Message list

This should display a summary of the messages the user has received.

The messages are not deleted and the user can read them at any time.

Include:

  • the subject of the message
  • the date the message was sent
  • a link to the full message
  • a read and unread state

Messages

<div class="message-inbox">
  <h2 class="heading-medium">Messages</h2>
  <div class="message-inbox__list" role="list">
    <div class="message-inbox__list-item message-inbox__list-item--read" role="listitem"><span
      class="visually-hidden">read</span> <a class="message-inbox__block" href="#">Pay your tax bill by 1 January 2018</a>
      <span class="message-inbox__block">12 December 2017</span>
    </div>
    <div class="message-inbox__list-item" role="listitem"><span
      class="visually-hidden">unread</span> <a class="message-inbox__block" href="#">Send your Self Assessment tax return by 31 January 2018</a>
      <span class="message-inbox__block no-wrap">13 December 2017</span>
    </div>
    <div class="message-inbox__list-item" role="listitem"><span
      class="visually-hidden">unread</span> <a class="message-inbox__block" href="#">Your tax refund of £250.98</a>
      <span class="message-inbox__block no-wrap">24 February 2018</span>
    </div>
  </div>
</div>

Message details

This should display a complete message.

Include:

  • the subject of the message
  • the date the message was sent
  • the message content
  • a back link to the message list
Back

Send your Self Assessment tax return by 31 January 2018

This message was sent on 13 December 2018

You must send your Self Assessment tax return for the 2016 to 2017 tax year by 31 January 2018.

There may be penalties if your tax return is late.

<a href="#" class="link-back">Back</a>

<header class="page-heading">
  <h1 class="heading-xlarge">Send your Self Assessment tax return by 31&nbsp;January&nbsp;2018</h1>
  <p class="heading-secondary">
    <span class="visuallyhidden">This message was sent on  </span>
    13&nbsp;December&nbsp;2018
  </p>
</header>

<p>You must send your Self Assessment tax return for the 2016 to 2017 tax year by 31&nbsp;January&nbsp;2018.</p>

<p>There may be penalties if your tax return is late.</p>

Research

We need more research. If you have used messages, get in touch to share your research findings.

Discuss messages on GitHub

Help and support

Contact the Service Design Tools team in #team-sdt on HMRC Slack (open in app) or email us.