<template lang="pug">
.md-flex.justify-between.p-8.border
	.flex-100
		//@slot top slot (comes before default slot)
		slot(name="top")
		//@slot default slot
		slot
		//@slot bottom slot (comes after default slot)
		slot(name="bottom")
	//@slot right hand side slot
	slot(name="right")
</template>
<docs>
```jsx
import Icon from '@/components/Icon'
import Button from '@/components/Button'

<BaseContentBlock>
<template v-slot:top>
	<div class="lead">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>
</BaseContentBlock>
```
</docs>
