diff --git a/CHANGELOG.md b/CHANGELOG.md
index 22242f058..222749a8c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -28,6 +28,11 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
- Run tests in desktop viewport instead of phantom's default 400 [#927](https://github.com/hmrc/assets-frontend/pull/927)
- Fixed broken link on "errors and validation" styles page [#937](https://github.com/hmrc/assets-frontend/pull/937)
+### Added
+- Documentation for page title [#928](https://github.com/hmrc/assets-frontend/pull/928)
+- Documentation for open links in a new window or tab component [#926](https://github.com/hmrc/assets-frontend/pull/926)
+- Documentation for messages pattern [#932](https://github.com/hmrc/assets-frontend/pull/932)
+
### Updated
- Documentation and examples for page not found, service unavailable and there is a problem with the service [#936](https://github.com/hmrc/assets-frontend/pull/936)
- Updated notification badge CSS, code and examples [#934](https://github.com/hmrc/assets-frontend/pull/934)
@@ -289,13 +294,11 @@ This entire version is covered by a single pull request. [#867](https://github.c
- Changes to nginx error pages not being build and deployed [#734]
[Unreleased]: https://github.com/hmrc/assets-frontend/compare/release/4.2.0...master
-[4.2.4]: https://github.com/hmrc/assets-frontend/compare/release/4.2.3...release/4.2.4
[4.2.3]: https://github.com/hmrc/assets-frontend/compare/release/4.2.2...release/4.2.3
[4.2.2]: https://github.com/hmrc/assets-frontend/compare/release/4.2.1...release/4.2.2
[4.2.1]: https://github.com/hmrc/assets-frontend/compare/release/4.2.0...release/4.2.1
[4.2.0]: https://github.com/hmrc/assets-frontend/compare/release/4.1.0...release/4.2.0
[4.1.0]: https://github.com/hmrc/assets-frontend/compare/release/3.0.2...release/4.1.0
-[3.2.4]: https://github.com/hmrc/assets-frontend/compare/release/3.2.4...release/3.2.4
[3.2.3]: https://github.com/hmrc/assets-frontend/compare/release/3.2.2...release/3.2.3
[3.2.2]: https://github.com/hmrc/assets-frontend/compare/release/3.2.1...release/3.2.2
[3.2.1]: https://github.com/hmrc/assets-frontend/compare/release/3.2.0...release/3.2.1
diff --git a/assets/application.scss b/assets/application.scss
index 1588dddb3..c1411965f 100644
--- a/assets/application.scss
+++ b/assets/application.scss
@@ -16,4 +16,5 @@ $path: "../images/";
@import "scss/backward-compatibility";
// HMRC Design System
-@import "components/all-components"
+@import "components/all-components";
+@import "patterns/all-patterns";
diff --git a/assets/patterns/_all-patterns.scss b/assets/patterns/_all-patterns.scss
new file mode 100644
index 000000000..1c75ec17d
--- /dev/null
+++ b/assets/patterns/_all-patterns.scss
@@ -0,0 +1,2 @@
+// HMRC Design System - patterns
+@import "messages/messages";
diff --git a/assets/patterns/messages/README.md b/assets/patterns/messages/README.md
new file mode 100644
index 000000000..d02a67a8d
--- /dev/null
+++ b/assets/patterns/messages/README.md
@@ -0,0 +1,50 @@
+# Messages
+
+This pattern is used to display messages sent to a user from an HMRC service.
+
+## When to use this pattern
+
+Use this pattern when a service needs to send messages to users. The messages are not deleted and can be referred back to at any time.
+
+### When not to use this pattern
+
+Do not use this as the only way of sharing important or time-sensitive information with a user. Only display messages when users are signed in to a service.
+
+## How it works
+
+This patterns has 2 views:
+
+* message list
+* message details
+
+### Message list
+
+Display a summary of messages the user has received. The list has:
+
+- subject of the message
+- date the message was sent
+- a link to the full message
+- a read and unread state
+
+#### Unread messages
+
+{{ example("messages-unread.html") }}
+{{ markup("messages-unread.html") }}
+
+#### Read messages
+
+{{ example("messages-read.html") }}
+{{ markup("messages-read.html") }}
+
+### Message details
+
+Display a complete message. Include:
+
+- subject of the message
+- date the message was sent
+- message content
+- back link that takes you to the message list
+
+## Research on this pattern
+
+{{ research(44) }}
diff --git a/assets/patterns/messages/_messages.scss b/assets/patterns/messages/_messages.scss
new file mode 100644
index 000000000..83b9e283b
--- /dev/null
+++ b/assets/patterns/messages/_messages.scss
@@ -0,0 +1,25 @@
+.message-inbox__list {
+ display: table;
+ width: 100%;
+ border-top: 1px solid #a1acb2;
+
+ .message-inbox__list-item {
+ font-weight: bold;
+ a:link{
+ text-decoration: none;
+ }
+ &.message-inbox__list-item--read {
+ background-color: #f8f8f8;
+ font-weight: normal;
+ }
+ }
+
+ .message-inbox__block {
+ display: table-cell;
+ padding: 20px 10px;
+ border-bottom: 1px solid #a1acb2;
+ &.no-wrap {
+ white-space: nowrap;
+ }
+ }
+}
diff --git a/assets/patterns/messages/messages-read.html b/assets/patterns/messages/messages-read.html
new file mode 100644
index 000000000..4b6b1b9fb
--- /dev/null
+++ b/assets/patterns/messages/messages-read.html
@@ -0,0 +1,17 @@
+
diff --git a/assets/patterns/messages/messages-unread.html b/assets/patterns/messages/messages-unread.html
new file mode 100644
index 000000000..286548cb1
--- /dev/null
+++ b/assets/patterns/messages/messages-unread.html
@@ -0,0 +1,17 @@
+
diff --git a/component-library-template b/component-library-template
new file mode 160000
index 000000000..e359f0573
--- /dev/null
+++ b/component-library-template
@@ -0,0 +1 @@
+Subproject commit e359f0573947465f9184b4fe20718570052b2945