<template lang="pug">    
.c-card-fill.col.bg-white.m-2.relative.bg-no-repeat.bg-center.bg-cover.u-gradient-overlay(
	:style="{backgroundImage: `url(${imageSrc})`}"
)
    .c-card-fill__content.absolute.top-0.left-0.text-white.p-8
        h2.c-card__title.text-xl.mt-0.mb-2 {{ title }}
        p.c-card__content.text-base {{ content }}
        a(
            :href="link"
            v-if="link"
        ).no-underline.text-white.pr-4.py-2.font-700.text-lg
            | {{ linkText }}
            <!-- @slot Use this slot to add a different icon to the link -->
            slot(name="icon")
                Icon(name="chevron-right24" path="/spritemap.svg")

</template>

<script>
export default {
	components: {
		Icon: () => import(/* webpackChunkName: "Icon" */ '@/components/Icon'),
	},
	props: {
		/** Image for the card.
		 */
		imageSrc: {
			type: String,
			default: '',
		},
		/** Title for the card.
		 */
		title: {
			type: String,
			default: '',
		},
		/** Content for the card.
		 */
		content: {
			type: String,
			default: '',
		},
		/** Optional link at the bottom of the card. If no link is provided the link won't appear.
		 */
		link: {
			type: String,
			default: '',
		},
		/** Optional link text for the card.
		 */
		linkText: {
			type: String,
			default: 'Read more',
		},
	},
}
</script>

<style lang="scss">
</style>
<docs>
```jsx
<!-- Cards should be in a container such as row -->
<div class="row flex flex-row" style="height:530px">
<CardFill
    imageSrc="images/placeholder-image.png"
    title="Card title 1"
    content="Lorem enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
    link="/read-more/article-name"
>
<template>
	<Icon name="chevron-right24" path="/spritemap.svg" />
</template>
</CardFill>
<CardFill
    imageSrc="images/placeholder-image.png"
    title="Card title 2"
    content="Lorem enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
    link="/view-more/article-name"
    linkText="View more"
>
<template>
	<Icon name="chevron-right24" path="/spritemap.svg" />
</template>
</CardFill>
<CardFill
    imageSrc="images/placeholder-image.png"
    title="Card title 3"
    content="Lorem enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
>
</CardFill>
</div>
```
</docs>

