Create BoxCTA atom

This commit is contained in:
2021-09-30 18:48:15 +02:00
parent 3ec6dbda16
commit 0cde65c0b1
3 changed files with 44 additions and 0 deletions

View File

@@ -0,0 +1,14 @@
<script lang="ts">
export let image: string
export let text: string
export let url: string = undefined
</script>
<a href={url} class="box-cta">
<div class="box-cta__content">
<div class="image">
<img src="{image}" alt="">
</div>
<span class="text-label">{text}</span>
</div>
</a>

View File

@@ -0,0 +1,29 @@
.box-cta {
display: flex;
align-items: center;
background-color: #633185;
width: 144px;
height: 176px;
border-radius: 12px;
&__content {
.image {
width: 48px;
height: 48px;
margin: 0 auto;
img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
}
span {
display: block;
color: $color-secondary-light;
margin: 28px 20px 0;
}
}
}

View File

@@ -28,6 +28,7 @@
@import "atoms/button"; @import "atoms/button";
@import "atoms/badge"; @import "atoms/badge";
@import "atoms/arrow"; @import "atoms/arrow";
@import "atoms/box-cta";
@import "atoms/site-title"; @import "atoms/site-title";
// Molecules // Molecules