Create BoxCTA atom
This commit is contained in:
14
src/components/atoms/BoxCTA.svelte
Normal file
14
src/components/atoms/BoxCTA.svelte
Normal 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>
|
||||||
29
src/style/atoms/_box-cta.scss
Normal file
29
src/style/atoms/_box-cta.scss
Normal 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user