Ja...

components/02_Molecules/_molecules.scss

@@ -0,0 +1,4 @@
+@import 'logo/logo';
+@import 'textSection/textSection';
+@import 'place/place';
+@import 'securityMeasureList/securityMeasureList';

components/02_Molecules/logo/_logo.scss

@@ -0,0 +1,6 @@
+.LP-Logo {
+    max-width: 100%;
+    max-height: 100%;
+    width: auto;
+    object-fit: contain;
+}

components/02_Molecules/logo/logo.config.json

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

components/02_Molecules/logo/logo.hbs

@@ -0,0 +1,3 @@
+<a href="LP-Link" href="#">
+    <img class="LP-Logo" src="https://99designs-blog.imgix.net/blog/wp-content/uploads/2016/07/logo-2.png?auto=format&q=60&fit=max&w=930"/>
+</a>

components/02_Molecules/place/_place.scss

@@ -0,0 +1,38 @@
+.LP-Place{
+    width: 280px;
+    height: 235px;
+    .LP-Place__Image{
+        width: 100%;
+        height: 165px;
+        object-fit: fill;
+    }
+
+    .LP-Place__Assets{
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-top: 0.8rem;
+        
+        padding: 0 10px;
+    }
+
+    .LP-Place__Info{
+
+        .LP-Place__Title{
+            font-family: $-primary-sans-serif-font;
+            color: $-secondary-color;
+            font-size: 1rem;
+            padding: 0px;
+            margin: 0px;
+        }
+
+        .LP-Place__Detail{
+            font-family: $-primary-sans-serif-font;
+            padding: 0;
+            margin: 0;
+            margin-top: 5px;
+            font-size: 0.9rem;
+        }
+    }
+
+}

components/02_Molecules/place/place.config.json

@@ -0,0 +1,7 @@
+{
+    "context": {
+        "image": "/images/photo_2020-05-02_18-11-21.jpg",
+        "title": "Kokerei Wiescherhöfen",
+        "location": "Hamm (Westfalen)"
+    }
+}

components/02_Molecules/place/place.hbs

@@ -0,0 +1,14 @@
+<article class="LP-Place">
+    <img class="LP-Place__Image" src="{{image}}"/>
+    <div class="LP-Place__Assets">
+        <div class="LP-Place__Info">
+            <h3 class="LP-Place__Title">{{title}}</h3>
+            <p class="LP-Place__Detail" >{{location}}</p>
+        </div>
+        <ul class="LP-Icon__List">
+            <li class="LP-Icon__Item"><img class="LP-Icon" src="/icons/favourite.svg"/></li>
+            <li class="LP-Icon__Item"><img class="LP-Icon" src="/icons/location.svg"/></li>
+            <li class="LP-Icon__Item"><img class="LP-Icon" src="/icons/flag.svg"/></li>
+        </ul>
+    </div>
+</article>

components/02_Molecules/securityMeasureList/_securityMeasureList.scss

@@ -0,0 +1,16 @@
+.LP-SecurityMeasure__List{
+    list-style-type: none;
+    display: flex;
+    padding:0;
+    margin: 0;
+
+    .LP-SecurityMeasure__Item{
+        margin: 0 5px;
+        padding: 5px 8px;
+        background-color: #D7CEC7;
+        .LP-Text{
+            font-family: $-primary-sans-serif-font;
+            font-size: 1.2rem;
+        }
+    }
+}

components/02_Molecules/securityMeasureList/securityMeasureList.config.json

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

components/02_Molecules/securityMeasureList/securityMeasureList.hbs

@@ -0,0 +1,7 @@
+<ul class="LP-SecurityMeasure__List">
+    <li class="LP-SecurityMeasure__Item"><span class="LP-Text">Kameras</span></li>
+    <li class="LP-SecurityMeasure__Item"><span class="LP-Text">Zaun</span></li>
+    <li class="LP-SecurityMeasure__Item"><span class="LP-Text">Wachhund</span></li>
+    <li class="LP-SecurityMeasure__Item"><span class="LP-Text">Alarmanlage</span></li>
+    <li class="LP-SecurityMeasure__Item"><span class="LP-Text">Selbstschussanlage</span></li>
+</ul>

components/02_Molecules/textSection/_textSection.scss

@@ -0,0 +1,10 @@
+.LP-Content{
+    padding: 15px;
+}
+
+.LP-TextSection{
+
+    .LP-Text {
+        line-height: 1.4rem;
+    }
+}

components/02_Molecules/textSection/textSection.config.json

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

components/02_Molecules/textSection/textSection.hbs

@@ -0,0 +1,4 @@
+<article class="LP-TextSection LP-Content">
+    {{> @headline headline=headline}}
+    {{> @text text=text}}
+</article>