feat: element property on message object for more custom notifications (

#2)

main.js

@@ -87,6 +87,10 @@ module.exports = function (opts) {
   }
 
   function getMessageBody (notification) {
+    if (notification.element) {
+      notification.element.className = 'notification-message'
+      return notification.element
+    }
     if (opts.repo && notification.type === 'error') {
       return yo`
       <div class="notification-message">

notifications.css

@@ -106,10 +106,11 @@
   position: relative;
   color: #fff;
   background-color: #ba2c1d;
-  margin-top: 5px;
   display: inline-block;
   padding: 6px 8px 7px;
+  margin-top: 5px;
   margin-bottom: 0;
+  margin-right: 10px;
   font-size: 12px;
   font-weight: 400;
   line-height: 1;
@@ -119,6 +120,7 @@
   cursor: pointer;
   border-radius: 3px;
   text-decoration: none;
+  border: 0px;
 }
 
 // Show keyframes

readme.md

@@ -46,6 +46,19 @@ Have a look at the options to replace them with your own icon classes.
 Setting the `options.repo` to a GitHub repository will add an `Create an issue for this error`
 button to the error notifications.
 
+If you need more customization, instead of using the `message` property, you
+can also specify an `element` property and set it to `DOMElement` that will be the content.
+
+For example with [yo-yo](https://github.com/maxogden/yo-yo):
+```js
+notifications.add({
+  type: 'error',
+  element: yo`<div>
+    <strong>My super custom <em>message</em>!</strong>
+  </div>`
+})
+```
+
 
 ### `notifications.element()`