New list component

No great name ideas came for this one

src/components/skills/factList.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="fact">
+    <img :src="picture">
+    <article><p>{{ text }}</p></article>
+    <RouterLink v-if="link!='#'" class="router" :to="link"><button class="button">{{ buttonText }}</button></RouterLink>
+  </div>
+</template>
+
+<script setup>
+import { RouterLink } from 'vue-router';
+
+const props = defineProps({
+        text:{
+            type:String,
+            required:true
+        },
+        buttonText:{
+            type:String,
+            required:false,
+            default:undefined
+        },
+        link:{
+            type:String,
+            required:false,
+            default: "#"
+        },
+        picture:{
+            type:String,
+            required:true
+        }
+    });
+</script>
+
+<style scoped>
+    .fact{
+        background-color: #302c2c;
+        border: 2px solid #EAEAEA;
+        border-radius: 16px;
+        display: flex;
+        flex-direction: row;
+        flex-basis: content;
+        height: 200px;
+        /*justify-content: space-between;*/
+        justify-content: flex-start;
+        align-items: center;
+        flex-wrap: wrap;
+    }
+
+    img{
+        height: 150px;
+        width: 30%;
+        min-width: 100px;
+        margin-left: 20px;
+    }
+
+    article {
+        color: white;
+        padding: 0 20px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        max-width: 50%;
+    }
+
+    .router{
+        margin-right: 20px;
+        min-width: 50px;
+    }
+
+    .router button{
+        background-color: aqua;
+        font-size: 1.3em;
+        width: fit-content;
+    }
+
+</style>