Added Image Paragraph Component

src/components/ImageParagraph.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="image-paragraph" :class="imgPos">
+      <div class="image">
+        <img :src="imgSrc" alt="Image" />
+      </div>
+      <div class="text">
+        <slot></slot>
+      </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ImageParagraph",
+  props: {
+    imgSrc: String,
+    imgPos: String
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.image-paragraph {
+  margin: 1em 0;
+
+  display: flex;
+  flex-flow: row;
+
+  &.left .text {
+    @media (min-width: 35em) {
+      padding-left: 1em;
+    }
+  }
+
+  &.right .text {
+    @media (min-width: 35em) {
+      padding-right: 1em;
+    }
+  }
+
+  &.left,
+  &.right {
+    flex-wrap: wrap;
+
+    @media (min-width: 35em) {
+      flex-wrap: nowrap;
+    }
+
+    .image {
+      flex: 0 1 100%;
+
+      @media (min-width: 35em) {
+        flex: 0 1 50%;
+      }
+    }
+
+    .text {
+      flex: 0 1 100%;
+    }
+  }
+
+  &.top,
+  &.bottom {
+    flex-wrap: wrap;
+    justify-content: center;
+
+    .image {
+      flex: 0 1 auto;
+    }
+
+    .text {
+      flex: 0 1 100%;
+    }
+  }
+
+  &.top .text {
+    margin-top: 1em;
+  }
+
+  &.bottom .text {
+    margin-bottom: 1em;
+  }
+
+  @media (min-width: 35em) {
+    &.bottom .image,
+    &.right .image {
+      order: 2;
+    }
+  }
+
+  img {
+    max-width: 100%;
+  }
+}
+</style>