diff options
Diffstat (limited to 'src/components/card-v4.svelte')
| -rw-r--r-- | src/components/card-v4.svelte | 25 |
1 files changed, 25 insertions, 0 deletions
diff --git a/src/components/card-v4.svelte b/src/components/card-v4.svelte new file mode 100644 index 0000000..d067357 --- /dev/null +++ b/src/components/card-v4.svelte @@ -0,0 +1,25 @@ +<script lang="ts"> + export let title; + export let description; +</script> + +<div class="card"> + <div class="p-6"> + <h3 class="mt-0">I have a dream</h3> + <p class="text-contrast-medium mt-3 mx-0 mb-4"> + Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia minus culpa commodi. + </p> + <div class="flex flex-wrap gap-3"> + <a href="#0" class="btn btn--subtle">Learn more</a> + <a href="#0" class="btn btn--primary">Buy</a> + </div> + </div> +</div> + +<style lang="postcss"> + .card { + @apply flex flex-col bg-floor rounded-xl overflow-hidden; + box-shadow: 0 0 0 1px hsla(230, 13%, 9%, 0.05), 0 0.3px 0.4px hsla(230, 13%, 9%, 0.02), + 0 0.9px 1.5px hsla(230, 13%, 9%, 0.045), 0 3.5px 6px hsla(230, 13%, 9%, 0.09); + } +</style> |