article styling adjustments

src/vue-components/Feature.vue

@@ -1,7 +1,6 @@
 <template>
     <div
-        class="flex flex-row space-x-3 items-center py-4 px-4 lg:p-4 rounded-lg"
-        :class="{ 'place-content-center': props.center }"
+        class="flex flex-row space-x-3 place-content-start md:place-content-center items-center py-4 px-4 lg:p-4 rounded-lg"
     >
         <div class="text-slate-700" v-if="props.icon">
             <font-awesome-icon :icon="props.icon" :size="props.size" class="text-indigo-600" />
@@ -24,6 +23,6 @@ const props = defineProps({
     target: { type: String, default: "" },
     icon: { type: Object },
     size: { type: String, default: "2x" },
-    center: { type: Boolean, default: true },
+    center: { type: Boolean },
 });
 </script>

src/vue-components/FeatureArticles.vue

@@ -15,7 +15,7 @@
 
         <div class="grid grid-flow-row-dense grid-cols-1 md:grid-cols-2 gap-1">
             <div v-for="article of displayedArticles">
-                <Feature :link="article.link" class="bg-blue-100 rounded-sm" :center="false">
+                <LeftAlignedFeature :link="article.link" class="bg-blue-100 rounded-sm">
                     <template #title>{{ article.title }}</template>
                     <template #content>
                         <div class="flex flex-col">
@@ -24,16 +24,16 @@
                             </div>
                         </div>
                     </template>
-                </Feature>
+                </LeftAlignedFeature>
             </div>
         </div>
     </div>
 </template>
 
 <script setup>
+import LeftAlignedFeature from "./LeftAlignedFeature.vue";
 import { faRefresh } from "@fortawesome/free-solid-svg-icons";
 import { ElRadioGroup, ElRadioButton, ElButton } from "element-plus";
-import Feature from "./Feature.vue";
 import { computed, ref } from "vue";
 import uniq from "lodash-es/uniq.js";
 import flattenDeep from "lodash-es/flattenDeep.js";

src/vue-components/LeftAlignedFeature.vue

@@ -0,0 +1,28 @@
+<template>
+    <div
+        class="flex flex-row space-x-3 place-content-start items-center py-4 px-4 lg:p-4 rounded-lg"
+    >
+        <div class="text-slate-700" v-if="props.icon">
+            <font-awesome-icon :icon="props.icon" :size="props.size" class="text-indigo-600" />
+        </div>
+        <div class="text-sm md:text-base flex flex-col space-y-2 place-content-center">
+            <LinkComponent :link="props.link" :target="props.target" v-if="props.link">
+                <slot name="title"></slot>
+            </LinkComponent>
+            <slot name="title" v-else></slot>
+            <div class="text-sm">
+                <slot name="content"></slot>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+const props = defineProps({
+    link: { type: String },
+    target: { type: String, default: "" },
+    icon: { type: Object },
+    size: { type: String, default: "2x" },
+    center: { type: Boolean },
+});
+</script>