component for shaping container

components/02_ContentShape/shape/_shape.styl

@@ -0,0 +1,45 @@
+/**
+ * This mixins lets to shape elements to squares or circles.
+ * Note: Even if the class RV-Shape itself is not nessecary (at this point)
+ * you still should use it to maintain compatiblity:
+ * CSS: class="RV-Shape RV-Shape--square"
+ * Stylues: 
+ *	RV-Shape()
+ *	RV-Shape--square()
+ * You may want to combine this mixin with RV-FocalPoint.
+ */
+RV-Shape--square()
+	+RV-Block__Modifier--name('square')
+		padding-top 100%
+		width 100%
+		position relative
+		
+		*
+			position absolute
+			top 0
+			left 0
+			bottom 0
+			right 0
+
+RV-Shape--circle()
+	+RV-Block__Modifier--name('circle')	
+		padding-top 100%
+		width 100%
+		position relative
+
+		&, *
+			clip-path circle()
+		
+		*
+			position absolute
+			top 0
+			left 0
+			bottom 0
+			right 0
+
++RV-Block('RV-Shape')
+	+RV-Block__Modifier()
+		RV-Shape--square()
+		
+	+RV-Block__Modifier()
+		RV-Shape--circle()

components/02_ContentShape/shape/shape.config.json

@@ -0,0 +1,17 @@
+{
+	"name": "Shape",
+	"variants": [
+		{
+			"name": "Square",
+			"context": {
+				"modifier": "RV-Shape--square"
+			}
+		},
+		{
+			"name": "Circle",
+			"context": {
+				"modifier": "RV-Shape--circle"
+			}
+		}
+	]
+}

components/02_ContentShape/shape/shape.hbs

@@ -0,0 +1,3 @@
+<div class="RV-Shape {{#if modifier}}{{modifier}}{{/if}}">
+	<img class="RV-FocalPoint" style="--focalX: 50%; --focalY: 75%"  src="{{ path '/images/portrait_lowFocelPoint.jpeg'}}"/>
+</div>