From dad0ac733e7a61aba0b6e767f3162599404cd278 Mon Sep 17 00:00:00 2001
From: reverend <reverend@reverend2048.de>
Date: Mon, 18 Jan 2021 21:58:38 +0100
Subject: [PATCH] Showing alingments using FlexGrid and BoxShadow

---
 components/01_Layouts/alignment/alignment.hbs | 62 +++++++++++++------
 1 file changed, 44 insertions(+), 18 deletions(-)

diff --git a/components/01_Layouts/alignment/alignment.hbs b/components/01_Layouts/alignment/alignment.hbs
index 28c03c0..ecef8b9 100644
--- a/components/01_Layouts/alignment/alignment.hbs
+++ b/components/01_Layouts/alignment/alignment.hbs
@@ -1,20 +1,46 @@
-<div class="RV-Alignment__Container RV-Alignment__Container--verticalCenter RV-Spacing__Outer--medium">
-	<div class="RV-FlexRow__Container">
-		<div class="RV-FlexRow__Item">Im a text</div>
-		<div class="RV-FlexRow__Item RV-FlexRow__Item--fixedSize"><span class="RV-Iconized__Container">
-						<svg class="RV-Iconized__Icon--small" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 482.136 482.135" style="enable-background:new 0 0 482.136 482.135;"
-	 xml:space="preserve">
-<g>
-	<path d="M455.482,198.184L326.829,326.832c-35.535,35.54-93.108,35.54-128.646,0l-42.881-42.886l42.881-42.876l42.884,42.876
-		c11.845,11.822,31.064,11.846,42.886,0l128.644-128.643c11.816-11.831,11.816-31.066,0-42.9l-42.881-42.881
-		c-11.822-11.814-31.064-11.814-42.887,0l-45.928,45.936c-21.292-12.531-45.491-17.905-69.449-16.291l72.501-72.526
-		c35.535-35.521,93.136-35.521,128.644,0l42.886,42.881C491.018,105.045,491.018,162.663,455.482,198.184z M201.206,366.698
-		l-45.903,45.9c-11.845,11.846-31.064,11.817-42.881,0l-42.884-42.881c-11.845-11.821-11.845-31.041,0-42.886l128.646-128.648
-		c11.819-11.814,31.069-11.814,42.884,0l42.886,42.886l42.876-42.886l-42.876-42.881c-35.54-35.521-93.113-35.521-128.65,0
-		L26.655,283.946c-35.538,35.545-35.538,93.146,0,128.652l42.883,42.882c35.51,35.54,93.11,35.54,128.646,0l72.496-72.499
-		C246.724,384.578,222.588,379.197,201.206,366.698z"/>
-</g>
-</svg>
-		</span></div>
+<style>
+	.RV-FlexGrid {
+		--item-height: 150px;
+		--item-width: 150px;
+	}
+</style>
+<div class="RV-FlexGrid RV-FlexGrid--fixedSize RV-Spacing__Inner--medium">
+		
+	<div class="RV-FlexGrid__Item RV-BoxShadow RV-BoxShadow--solid">
+		<div class="RV-Alignment RV-Alignment--top">
+			<p>Aligned Top</p>
+		</div>
+	</div>
+	
+	<div class="RV-FlexGrid__Item RV-BoxShadow RV-BoxShadow--solid">
+		<div class="RV-Alignment RV-Alignment--left">
+			<p>Aligned Left</p>
+		</div>
+	</div>
+	
+	<div class="RV-FlexGrid__Item RV-BoxShadow RV-BoxShadow--solid">
+		<div class="RV-Alignment RV-Alignment--bottom">
+			<p>Aligned Bottom</p>
+		</div>
+	</div>
+	
+	<div class="RV-FlexGrid__Item RV-BoxShadow RV-BoxShadow--solid">
+		<div class="RV-Alignment RV-Alignment--right">
+			<p>Aligned Right</p>
+		</div>
+	</div>
+	
+	<div class="RV-FlexGrid__Item RV-BoxShadow RV-BoxShadow--solid">
+		<div class="RV-Alignment RV-Alignment--verticalCenter">
+			<p>Aligned v center</p>
+		</div>
+	</div>
+	
+	<div class="RV-FlexGrid__Item RV-BoxShadow RV-BoxShadow--solid">
+		<div class="RV-Alignment RV-Alignment--horizontalCenter">
+			<p>Aligned</p>
+			<p>h</p>
+			<p>center</p>
+		</div>
 	</div>
 </div>
\ No newline at end of file