Usage
The LandingCTA component will wrap your content in a Card.
Use the title, description and icon props to customize the content of card.
Trusted and supported by our amazing community
We've built a strong, lasting partnership. Their trust is our driving force, propelling us towards shared success.
<template>
<ULandingCTA
title="Trusted and supported by our amazing community"
description="We've built a strong, lasting partnership. Their trust is our driving force, propelling us towards shared success."
card
/>
</template>
You can disable its border and card style by setting the
card prop to false.You can add anything you want in the default slot, a gradient or an image for example (this will render better on full-screen).
You can change the align prop from center to left or right to position the slot horizontaly.
Join us
Incididunt fugiat duis in.
<template>
<ULandingCTA
title="Join us"
description="Incididunt fugiat duis in."
align="left"
card
>
<img
src="https://picsum.photos/640/360"
class="w-full rounded-md shadow-xl ring-1 ring-gray-300 dark:ring-gray-700"
/>
</ULandingCTA>
</template>
Use the links prop to add some Buttons below the description.
Trusted and supported by our amazing community
We've built a strong, lasting partnership. Their trust is our driving force, propelling us towards shared success.
<template>
<ULandingCTA
title="Trusted and supported by our amazing community"
description="We've built a strong, lasting partnership. Their trust is our driving force, propelling us towards shared success."
card
:links="[{ label: 'Get started', color: 'gray', size: 'md' }, { label: 'Learn more', variant: 'link', color: 'gray', size: 'md', trailingIcon: 'i-heroicons-arrow-right-20-solid' }]"
/>
</template>
This component can be put directly inside a LandingSection or a Container directly with its content fetched from @nuxt/content easily:
content/index.yml
cta:
title: Trusted and supported by our amazing community
description: We've built a strong, lasting partnership. Their trust is our driving force, propelling us towards shared success.
links:
- label: 'Get started'
color: 'gray'
size: 'md'
- label: 'Learn more'
variant: 'link'
color: 'gray'
size: 'md'
trailingIcon: 'i-heroicons-arrow-right-20-solid'
We're using
.yml files as an example here but you can use any format supported by @nuxt/content like .md or .json.pages/index.vue
<script setup lang="ts">
const { data: page } = await useAsyncData('index', () => queryContent('/').findOne())
</script>
<template>
<ULandingSection>
<ULandingCTA v-bind="page.cta" card />
</ULandingSection>
</template>
Slots
title
{}
description
{}
links
{}
default
{}
Props
description
string
undefinedtitle
string
undefinedlinks
(Button & { click?: Function; })[]
[]ui
{}
{}align
"left" | "center" | "right"
"center"card
boolean
trueConfig
{
wrapper: 'relative',
container: 'text-center',
body: {
base: 'flex flex-col gap-16 sm:gap-y-24',
padding: 'py-24 sm:py-32 sm:px-16'
},
title: 'text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl',
description: 'mt-6 text-lg/8 text-gray-600 dark:text-gray-300',
links: 'mt-10 flex items-center justify-center gap-x-6'
}