Usage
The LandingCTA component will wrap your content in a Card.
Use the title, description and icon props to customize the content of card.
<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
/>
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.
<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>
Use the links prop to add some Buttons below the description.
<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' }]"
/>
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>
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
ui
any
{}links
(Button & { click?: Function; })[]
[]title
string
""description
string
undefinedalign
"left" | "right" | "center"
"center"card
boolean
true