diff options
Diffstat (limited to 'fe/src/lib/Card.svelte')
-rw-r--r-- | fe/src/lib/Card.svelte | 30 |
1 files changed, 16 insertions, 14 deletions
diff --git a/fe/src/lib/Card.svelte b/fe/src/lib/Card.svelte index 0835940..d7cd900 100644 --- a/fe/src/lib/Card.svelte +++ b/fe/src/lib/Card.svelte | |||
@@ -1,22 +1,24 @@ | |||
1 | <script lang="ts"> | 1 | <script lang="ts"> |
2 | export let title = ""; | 2 | export let title = ""; |
3 | export let height: number | undefined = undefined; | ||
3 | </script> | 4 | </script> |
4 | 5 | ||
5 | <div class="card"> | 6 | <div class="card"> |
6 | {#if title} | 7 | {#if title} |
7 | <h2>{title}</h2> | 8 | <h2>{title}</h2> |
8 | {/if} | 9 | {/if} |
9 | <slot /> | 10 | <slot /> |
10 | </div> | 11 | </div> |
11 | 12 | ||
12 | <style> | 13 | <style> |
13 | .card { | 14 | .card { |
14 | background: #fff; | 15 | background: #fff; |
15 | width: 16rem; | 16 | display: flex; |
16 | display: flex; | 17 | flex-direction: column; |
17 | flex-direction: column; | 18 | align-items: flex-start; |
18 | align-items: left; | 19 | border: solid 2px #00000066; |
19 | border: solid 2px #00000066; | 20 | border-radius: 0.25em; |
20 | border-radius: 0.25em; | 21 | height: var(--height, fit-content); |
21 | } | 22 | overflow-y: var(--overflow, initial); |
23 | } | ||
22 | </style> | 24 | </style> |