Ahem...

src/components/Message/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import style from './style.css';
+
+const Message = ({ icon, heading, children }) => {
+  const IconComponent = icon;
+  return <div className={ style.message }>
+    <h2>{ IconComponent ? <IconComponent/> : '' }{ heading }</h2>
+    { children }
+  </div>;
+};
+
+export default Message;

src/components/Message/style.css

@@ -0,0 +1,20 @@
+.message {
+  background: var(--color-tan);
+  padding: var(--spacing-margin);
+  margin: var(--spacing-margin) 0;
+}
+
+.message h2 {
+  margin: var(--spacing-margin) 0;
+}
+
+.message h2 svg {
+  margin-right: 0.5rem;
+  height: 3rem;
+  width: 3rem;
+  vertical-align: bottom;
+}
+
+.message p {
+  margin: var(--spacing-margin) 0;
+}