resources/js/Components/Sections/CallToAction.vue

import CallToAction from "@/Components/Sections/CallToAction.vue";

​
Props

​
Container layout

This will define how container will be rendered.

You can select between three different layouts by passsing the prop containerLayout?: "default" | "full" | "boxed" to the component.

Default is default.

​
Container background

This will define the background color of container.

You can select between three different layouts by passsing the prop containerBackground?: "none" | "primary" | "inverted" to the component.

Default is inverted.

​
Layout

This will define the content alignment.

You can select between three different layouts by passsing the prop layout?: "centered" | "stacked" | "justified" to the component.

Default is centered.

​
Heading

Similar as in Heading component you can pass title, subtitle and description to render the heading.

All props are optional.

​
Content (slot)

Here you can define your call-to-action buttons or add any other content.

​
Examples

<CallToAction
	:title="$t('Consectetur adipisicing elit amet sit')"
	:subtitle="$t('Call To Action')"
	:description="$t('Sit amet consectetur adipisicing elit consectetur adipisicing elit.')"
>
	<Button type="button" variant="primary" size="lg">
		{{ $t("Just do it!") }}
	</Button>
	<Button type="button" variant="ghost" size="lg">
		{{ $t("Learn more") }}
		<ArrowRightIcon class="size-4" />
	</Button>
</CallToAction>