Added Sliding Card which has content slide over the top of the main information

src/lib/components/Cards/Card.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+    import { createEventDispatcher } from 'svelte';
+
+    const dispatch = createEventDispatcher();
+
+    function onClick() {
+        dispatch('click');
+    }
+</script>
+
+<style>
+    .card {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        flex: 2 1 15em;
+        padding: .5em 2.5em 2em 2.5em;
+        background: var(--bg-secondary);
+        border-radius: .5em;
+        scroll-snap-align: start;
+		transition: all 0.2s;
+    }
+    .card:hover {
+        box-shadow: .5em .5em .5em var(--hover);
+    }
+
+    .card .card-header :global(div) {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 0em;
+        width: 100%;
+    }
+
+    .card .card-content :global(div) {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        max-width: 100%;
+    }
+
+    .card .card-footer :global(div){
+        margin-bottom: 1em;
+        display: flex;
+        gap: 1em;
+        max-width: 100%;
+        justify-content: space-between;
+    }
+</style>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div class="card" on:click={onClick}>
+    <div class="card-header">
+        <slot name="header"></slot>
+    </div>
+    <hr />
+    <div class="card-content">
+        <slot name="content"></slot>
+    </div>
+    <hr class="not-required"/>
+    <div class="card-footer">
+        <slot name="footer"></slot>
+    </div>
+</div>