50 lines
1.3 KiB
Vue
50 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import RichText from "@/components/ui/RichText.vue";
|
|
|
|
export interface Props {
|
|
title: string;
|
|
description: string;
|
|
call2Action: string;
|
|
link: string;
|
|
iconUrl?: string;
|
|
externalLink?: boolean;
|
|
}
|
|
|
|
withDefaults(defineProps<Props>(), {
|
|
iconUrl: "",
|
|
externalLink: false,
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-col justify-between bg-white p-8 pb-4 lg:flex-row lg:pb-8">
|
|
<div class="mb-4 lg:mb-0">
|
|
<h3 class="mb-4">{{ title }}</h3>
|
|
<RichText class="mb-4" :content="description" />
|
|
<a
|
|
v-if="externalLink"
|
|
:href="link"
|
|
target="_blank"
|
|
class="btn-text inline-flex items-center py-2 pl-0 pr-3"
|
|
>
|
|
<span class="inline">{{ call2Action }}</span>
|
|
<it-icon-arrow-right class="ml-1 h-5 w-5"></it-icon-arrow-right>
|
|
</a>
|
|
<router-link
|
|
v-else
|
|
:to="link"
|
|
class="btn-text inline-flex items-center py-2 pl-0 pr-3"
|
|
:data-cy="`${title}-link`"
|
|
>
|
|
<span class="inline">{{ call2Action }}</span>
|
|
<it-icon-arrow-right class="ml-1 h-5 w-5"></it-icon-arrow-right>
|
|
</router-link>
|
|
</div>
|
|
<div v-if="iconUrl" class="flex justify-end lg:w-2/6">
|
|
<img :src="iconUrl" class="w-full lg:w-48" alt="icon" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped></style>
|