Component to rotation

components/02_ContentShape/_contentShape.styl

@@ -4,3 +4,4 @@
 @import 'shape/_shape'
 @import 'truncation/_truncation'
 @import 'alignment/_alignment'
+@import 'rotation/_rotation'

components/02_ContentShape/rotation/_rotation.styl

@@ -0,0 +1,19 @@
+RV-Rotation--left()
+    +RV-Block--modifier()
+        transform rotate(-90deg)
+
+RV-Rotation--right()
+    +RV-Block--modifier()
+        transform rotate(90deg)
+
+RV-Rotation--upsideDown()
+    +RV-Block--modifier()
+        transform rotate(180deg)
+
+RV-Rotation()
+    +RV-Block()
+        RV-Rotation--left()
+        RV-Rotation--right()
+        RV-Rotation--upsideDown()
+
+RV-Rotation()

components/02_ContentShape/rotation/rotation.config.json

@@ -0,0 +1,25 @@
+{
+	"name": "rotation",
+	"title": "Rotation",
+	"variants": [
+		{
+			"name": "Left",
+			"context": {
+				"modifier": "RV-Rotation--left"
+			}
+        },
+        {
+			"name": "Reft",
+			"context": {
+				"modifier": "RV-Rotation--right"
+			}
+        },
+        {
+			"name": "UpsideDown",
+			"context": {
+				"modifier": "RV-Rotation--upsideDown"
+			}
+		}
+		
+	]
+}

components/02_ContentShape/rotation/rotation.hbs

@@ -0,0 +1,7 @@
+<div class="RV-Rotation {{modifier}} RV-Dummy RV-Dummy--landscape">
+    Im a content text.
+</div>
+
+<div class="RV-Rotation {{modifier}} RV-Dummy RV-Dummy--square">
+    Im a square text.
+</div>