Add Section component instead of Card

2025-01-17 12:24:48 +01:00
parent 1dfa95d457
commit 7907d05847
6 changed files with 104 additions and 57 deletions
@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <h1 class="section-header">
+      {{ title }}
+      <slot name="header-buttons"></slot>
+    </h1>
+    <hr class="section-divider"/>
+    <div class="section-body">
+      <slot name="body"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'Section',
+  props: {
+    title: String,
+  }
+};
+
+</script>
+
+<style scoped>
+
+.section-header {
+}
+
+.section-divider {
+  border-color: #d8dee4;
+  border-width: 1px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+.section-body {
+  position: relative;
+  margin-bottom: 15px;
+  padding: 10px 15px;
+  border-radius: 10px;
+}
+
+</style>