98 lines
1.4 KiB
Vue
98 lines
1.4 KiB
Vue
<template>
|
|
<div class="info-block">
|
|
<div class="d-flex justify-content-between mb-16">
|
|
<p class="info-block__title">
|
|
{{ title }}
|
|
</p>
|
|
<UiBadge v-if="badge" type="marketing">
|
|
{{ badge }}
|
|
</UiBadge>
|
|
</div>
|
|
|
|
<slot name="info" />
|
|
|
|
<span class="info-block__text">{{ text }}</span>
|
|
|
|
<UiButton
|
|
class="info-block__action"
|
|
type="outlined"
|
|
:href="link"
|
|
right-icon="s-chevron-right"
|
|
size="small"
|
|
>
|
|
{{ action }}
|
|
</UiButton>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
title: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
text: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
badge: {
|
|
type: String,
|
|
},
|
|
action: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
link: {
|
|
type: String,
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.info-block {
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
width: 270px;
|
|
min-height: 179px;
|
|
border-radius: 12px;
|
|
padding: 16px;
|
|
|
|
background-color: $clr-grey-100;
|
|
|
|
&__title {
|
|
@include txt-m-sb;
|
|
}
|
|
|
|
&__text {
|
|
@include txt-s;
|
|
margin-bottom: 16px;
|
|
color: $clr-grey-500;
|
|
}
|
|
|
|
&__action {
|
|
margin-top: auto;
|
|
align-self: flex-start;
|
|
}
|
|
}
|
|
|
|
.info-block-addInfo {
|
|
@include txt-s;
|
|
margin-bottom: 16px;
|
|
|
|
&__title {
|
|
margin-bottom: 4px;
|
|
color: $clr-grey-500;
|
|
}
|
|
|
|
&__sum {
|
|
@include txt-m-sb;
|
|
}
|
|
|
|
&__text {
|
|
@include txt-r;
|
|
color: $clr-grey-400;
|
|
}
|
|
}
|
|
</style>
|