57 lines
1.1 KiB
Vue
57 lines
1.1 KiB
Vue
<script setup>
|
|
import { VNodeRenderer } from '@layouts/components/VNodeRenderer'
|
|
|
|
const props = defineProps({
|
|
articles: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<VRow>
|
|
<VCol
|
|
v-for="article in props.articles"
|
|
:key="article.title"
|
|
cols="12"
|
|
md="4"
|
|
>
|
|
<VCard
|
|
flat
|
|
border
|
|
>
|
|
<VCardText class="text-center">
|
|
<VNodeRenderer :nodes="h('div', { class: 'help-center-article-icon', innerHTML: article.img })" />
|
|
<h5 class="text-h5 my-3">
|
|
{{ article.title }}
|
|
</h5>
|
|
<p class="clamp-text text-body-1 mb-3 mx-auto">
|
|
{{ article.subtitle }}
|
|
</p>
|
|
|
|
<VBtn
|
|
variant="outlined"
|
|
:to="{
|
|
name: 'front-pages-help-center-article-title',
|
|
params: {
|
|
title: 'how-to-add-product-in-cart',
|
|
},
|
|
|
|
}"
|
|
>
|
|
Read More
|
|
</VBtn>
|
|
</VCardText>
|
|
</VCard>
|
|
</VCol>
|
|
</VRow>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.help-center-article-icon svg {
|
|
block-size: 58px;
|
|
inline-size: 58px;
|
|
}
|
|
</style>
|