<template lang="pug">
BaseContentBlock
	template(v-slot:top)
		//@slot contains `stat` element
		slot(name="top")
			.lead.mb-3(v-html="stat", v-if="stat")

	template(v-slot:default)
		//@slot contains `content` element
		slot
			.small.my-3(v-html="content", v-if="content")

	template(v-slot:bottom)
		//@slot contains `link` element
		slot(name="bottom")
			Button(
				tag="a"
				:href="link"
				isTextOnly
				v-if="!!link"
			)
				|Learn More

	template(v-slot:right)
		//@slot right hand side section (e.g. for media, etc)
		slot(name="right")
</template>

<script>
import BaseContentBlock from '@/components/BaseContentBlock'
export default {
	components: {
		BaseContentBlock,
		Button: () => import(/* webpackChunkName: "Button" */ '@/components/Button'),
	},
	props: {
		/** (string | html): fact title / number / stat */
		stat: {
			type: String,
			default: '',
		},
		/** (string | html): content text */
		content: {
			type: String,
			default: '',
		},
		/** (string): url of the fact */
		link: {
			type: String,
			default: '',
		},
	},
}
</script>

<style lang="scss" module>
</style>

<docs>
```jsx
import Icon from '@/components/Icon'

<FactBlock
	stat="66%"
	content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at risus vel lacus imperdiet sollicitudin. Lorem ipsum dolor sit amet, consectetur adipiscing elit."
	link="#"
>
<template v-slot:bottom>
	<Button tag="a" href="#" isTextOnly>
		Learn more
		<template v-slot:icon-element>
			<Icon name="chevron-right24" path="/spritemap.svg" />
		</template>
	</Button>
</template>
</FactBlock>

<hr/>

<FactBlock>
<template v-slot:top>
	<div>42,000+</div>
</template>
<div class="small my-3">This uses slot.</div>
<template v-slot:bottom>
	<Button tag="a" href="#" isTextOnly>
		Learn more
		<template v-slot:icon-element>
			<Icon name="chevron-right24" path="/spritemap.svg" />
		</template>
	</Button>
</template>
<template v-slot:right>
	<div class="pr-6">
		<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
			<path
				d="M4.92668 70.0003C1.64223 60.6176 0 51.3131 0 42.0867C0 31.453 2.81525 22.9304 8.44575 16.5189C14.0762 9.95095 22.2874 6.66699 33.0792 6.66699V21.4448C24.7898 21.4448 20.6452 26.7616 20.6452 37.3954V40.9139H35.6598V70.0003H4.92668ZM49.2669 70.0003C46.1388 60.4612 44.5748 51.1567 44.5748 42.0867C44.5748 31.453 47.3118 22.9304 52.7859 16.5189C58.4164 9.95095 66.6276 6.66699 77.4194 6.66699V21.4448C69.2864 21.4448 65.2199 26.7616 65.2199 37.3954V40.9139H80V70.0003H49.2669Z"
				fill="#231F20"
			/>
		</svg>
	</div>
</template>
</FactBlock>

```
</docs>
