Some Tweaks

components/01_Atoms/message/_message.scss

@@ -1,11 +1,14 @@
 .LP-Message{
 	display: flex;
 	flex-direction: row;
-	align-items: center;
+	justify-content: center; 
+	align-items: stretch; 
 	background-color: $-almost-white;
 	font-family: $-primary-sans-serif-font;
 	border-radius: 3px;
 	font-weight: bold;
+	box-shadow: 0 0 2px $-grey;
+	overflow: hidden;
 
 	&--error{
 		.LP-Message__Icon{
@@ -47,12 +50,19 @@
 		background-size: 40px 40px;
 		background-repeat: no-repeat;
 		background-position: center; 
-		height: 50px;
+		height: 100%;
+		min-height: 50px;
 		width: 50px;
 		filter: invert(1);
+		flex-shrink: 0;
+		flex-grow: 0;
 	}
 
 	.LP-Message__Text{
 		padding: 0 15px;
+		flex-grow: 1;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
 	}
 }

components/01_Atoms/message/message.hbs

@@ -1,5 +1,8 @@
 <div class="LP-Message {{#if modifier}}LP-Message{{modifier}}{{/if}}">
-	<div class="LP-Message__Icon">
+	<div>
+		<div class="LP-Message__Icon">
+		
+		</div>
 	</div>
 	<div class="LP-Message__Text">
 		{{messageText}}

components/02_Molecules/_molecules.scss

@@ -1,4 +1,5 @@
 @import 'textSection/textSection';
 @import 'placeTeaser/placeTeaser';
 @import 'tagList/tagList';
-@import 'navigation/navigation';
+@import 'navigation/navigation';
+@import 'messageList/messageList';

public/main.css

@@ -208,11 +208,14 @@ body {
 .LP-Message {
   display: flex;
   flex-direction: row;
-  align-items: center;
+  justify-content: center;
+  align-items: stretch;
   background-color: #f9f9f9;
   font-family: Montserrat, Helvetica, sans-serif;
   border-radius: 3px;
-  font-weight: bold; }
+  font-weight: bold;
+  box-shadow: 0 0 2px #565656;
+  overflow: hidden; }
   .LP-Message--error .LP-Message__Icon {
     background-color: #02979e;
     background-image: url("/icons/error.png"); }
@@ -232,11 +235,18 @@ body {
     background-size: 40px 40px;
     background-repeat: no-repeat;
     background-position: center;
-    height: 50px;
+    height: 100%;
+    min-height: 50px;
     width: 50px;
-    filter: invert(1); }
+    filter: invert(1);
+    flex-shrink: 0;
+    flex-grow: 0; }
   .LP-Message .LP-Message__Text {
-    padding: 0 15px; }
+    padding: 0 15px;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center; }
 
 .LP-Content {
   padding: 35px; }
@@ -382,6 +392,18 @@ body {
   .LP-Menu .LP-Menu__List {
     justify-content: space-between; } }
 
+.LP-MessageList {
+  padding: 25px; }
+  .LP-MessageList .LP-MessageList__List {
+    padding: 0;
+    margin: 0;
+    list-style-type: none;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between; }
+  .LP-MessageList .LP-MessageList__Item {
+    margin: 5px 0; }
+
 .LP-Header {
   display: flex;
   align-items: center;