diff --git a/content/websites/patterns/cards-notification/cards-notifcation.png b/content/websites/patterns/cards-notification/cards-notifcation.png
new file mode 100644
index 0000000000000000000000000000000000000000..be0264a242c28e224f4614e5d0d93cfcabe50ca0
Binary files /dev/null and b/content/websites/patterns/cards-notification/cards-notifcation.png differ
diff --git a/content/websites/patterns/cards-notification/cards-notification.html b/content/websites/patterns/cards-notification/cards-notification.html
new file mode 100644
index 0000000000000000000000000000000000000000..92fca8b8360779c55017f3b43c03f7a36769ffbc
--- /dev/null
+++ b/content/websites/patterns/cards-notification/cards-notification.html
@@ -0,0 +1,62 @@
+<ul class="no-bullet columns medium-4 medium-push-4">
+  <li class="notifications-card">
+    <div class="row callout collapse">
+      <div class="columns medium-12">
+        <span class="secondary-color small float-right">
+          Started 14:14
+        </span>
+        <span class="label elixir-color">
+          Failed
+          <span class=""><i class="icon icon-common icon-clock"></i> 10 s.</span>
+        </span>
+        <h6>
+          My test request job
+        </h6>
+        <div class="small">
+          <a href="#" class="margin-right-medium readmore">Results</a>
+          <a href="#" class="margin-right-medium readmore">Parameters</a>
+        </div>
+      </div>
+    </div>
+  </li>
+  <li class="notifications-card">
+    <div class="row callout collapse">
+      <div class="columns medium-12">
+        <span class="secondary-color small float-right">
+          Started 14:14
+        </span>
+        <span class="label training-color">
+          Processing
+          <span class=""><i class="icon icon-common icon-clock"></i> 33 s.</span>
+        </span>
+        <h6>
+          My test request job
+        </h6>
+        <div class="small">
+          <a href="#" class="margin-right-medium readmore">Results</a>
+          <a href="#" class="margin-right-medium readmore">Parameters</a>
+        </div>
+      </div>
+    </div>
+  </li>
+  <li class="notifications-card">
+    <div class="row callout collapse">
+      <div class="columns medium-12">
+        <span class="secondary-color small float-right">
+          Started 14:14
+        </span>
+        <span class="label">
+          Finished
+          <span class=""><i class="icon icon-common icon-clock"></i> 1:35 m.</span>
+        </span>
+        <h6>
+          My test request job
+        </h6>
+        <div class="small">
+          <a href="#" class="margin-right-medium readmore">Results</a>
+          <a href="#" class="margin-right-medium readmore">Parameters</a>
+        </div>
+      </div>
+    </div>
+  </li>
+</ul>
diff --git a/content/websites/patterns/cards-notification/cards-notification.yml b/content/websites/patterns/cards-notification/cards-notification.yml
new file mode 100644
index 0000000000000000000000000000000000000000..9a24ec6de8dc81462f758862e5c7c51b0888df84
--- /dev/null
+++ b/content/websites/patterns/cards-notification/cards-notification.yml
@@ -0,0 +1,12 @@
+name: 'Notification cards'
+tags:
+  - lists
+  - built-in
+category: containers
+description: Present a running list of time-based notifications with status.
+versions:
+  - 1.2.0, 1.3.0
+author:
+  name: Ken Hawkins
+  github: khawkins98
+  twitter: khawkins98
diff --git a/content/websites/patterns/cards-notification/layout.html b/content/websites/patterns/cards-notification/layout.html
new file mode 100644
index 0000000000000000000000000000000000000000..2b5b9977fc94e6dd114c8271f51507453d0bacfa
--- /dev/null
+++ b/content/websites/patterns/cards-notification/layout.html
@@ -0,0 +1,7 @@
+{{#markdown}}
+
+
+
+{{/markdown}}
+
+{{> cards-notification}}