Chaning Folder structure

components/05_Molecules/teaser/_teaser.styl

@@ -0,0 +1,47 @@
++RV-Block('RV-Teaser')
+	RV-CSSParameter({
+		image-height: 300px,
+		image-width: 300px,
+		shadow-color: #6b5690
+		
+	})
+
+	RV-Fan(--image-height, --image-width)
+	RV-BoxShadow()
+	RV-BoxShadow--drop(--shadow-color)
+	
+	+RV-Element('Image')
+		RV-Fan__Base(--image-height, --image-width)
+		
+	+RV-Element('Preview')
+		RV-FlexRow()
+		RV-FlexRow--vertical()
+		RV-Fan__Surface(--image-height, --image-width)
+		RV-Spacing__Inner--medium()
+	
+	+RV-Element('Text')
+		color text-color
+		flex 1
+		RV-ContentCrop()
+		RV-ContentCrop__Text()
+		RV-ContentCrop__Text--fade()
+		
+		.RV-Text
+			height 100%
+			
+
+	+RV-Element('Headline')		
+		font-family sans-serif
+		color primary-color
+		justify-self center
+
+	+RV-Element('Buttons')
+		RV-FlexRow__Item()
+		RV-FlexRow__Item--content()
+		RV-Spacing__Inner--small()
+
+		RV-FlexRow()
+		RV-FlexRow--horizontal()
+		padding 0
+		
+	RV-Fan--auto(--image-height, --image-width)

components/05_Molecules/teaser/teaser.config.json

@@ -0,0 +1 @@
+{}

components/05_Molecules/teaser/teaser.hbs

@@ -0,0 +1,46 @@
+<div class="RV-Teaser">
+	<div class="RV-Teaser__Image">
+		<div class="RV-ContentCrop">
+			<img class="RV-Image RV-FocalPoint" style="--focalX: 50%; --focalY: 16.66%" src="{{ path '/images/landscape.jpeg' }}"/>
+		</div>
+
+	</div>
+	<div class="RV-Teaser__Preview">
+		<div class="RV-Teaser__Headline">
+			<h2>This is a headline for a teaser it is indeed dear reader</h2>
+		</div>
+		<div class="RV-Teaser__Text">
+			<div class="RV-Text">
+				Qui sequi et et nostrum esse quae. Quasi voluptas aut adipisci ad quo at. Reiciendis sed vitae vero eaque aliquid ea dolorem. Qui consequatur temporibus quod eius natus ut et. Qui at necessitatibus incidunt et pariatur rem vel. Consequatur voluptas saepe odit voluptate magni possimus iure.
+				
+				Qui sequi et et nostrum esse quae. Quasi voluptas aut adipisci ad quo at. Reiciendis sed vitae vero eaque aliquid ea dolorem. Qui consequatur temporibus quod eius natus ut et. Qui at necessitatibus incidunt et pariatur rem vel. Consequatur voluptas saepe odit voluptate magni possimus iure.
+			</div>
+		</div>
+		<div class="RV-Teaser__Buttons">
+			<a href="#"class="RV-Button RV-Button--small RV-Button--link">
+				<div class="RV-Button__Icon">
+					<img class="RV-Image" src="{{path '/icons/plus.svg'}}"/>
+				</div>
+				<div class="RV-Button__Text">
+					More
+				</div>
+			</a>
+			<a href="#" class="RV-Button RV-Button--small RV-Button--link">
+				<div class="RV-Button__Icon">
+					<img class="RV-Image" src="{{path '/icons/favourite.svg'}}"/>
+				</div>
+				<div class="RV-Button__Text">
+					Favorite
+				</div>
+			</a>
+			<a href="#" class="RV-Button RV-Button--small RV-Button--link">
+				<div class="RV-Button__Icon">
+					<img class="RV-Image" src="{{path '/icons/information.svg'}}"/>
+				</div>
+				<div class="RV-Button__Text">
+					Details
+				</div>
+			</a>
+		</div>
+	</div>
+</div>