Added RichFigure Component

src/components/RichFigure.vue

@@ -0,0 +1,57 @@
+<template>
+  <figure :class="[{ float: imgPos }, imgPos]" :style="'width: ' + imgW">
+    <img :src="imgSrc" :alt="caption" />
+    <figcaption>{{ caption }}</figcaption>
+  </figure>
+</template>
+
+<script>
+export default {
+  name: "rich-figure",
+  props: {
+    imgSrc: { type: String, required: true },
+    imgPos: String,
+    imgW: String,
+    caption: { type: String, required: true }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+figure {
+  position: relative;
+
+  margin: 0;
+
+  line-height: 1;
+
+  figcaption {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+
+    line-height: 1.5;
+
+    background: rgba(#000, 0.5);
+    color: #fff;
+    text-align: center;
+  }
+
+  img {
+    width: 100%;
+  }
+}
+
+.float {
+  &.left {
+    float: left;
+    margin: 0 0.75em 0.375em 0;
+  }
+
+  &.right {
+    float: right;
+    margin: 0 0 1em 1em;
+  }
+}
+</style>