ProComponentsLanding

LandingCTA

CardGitHub

A pre-built Card to display a call to action panel in your landing pages.

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.

<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.

Join us

Incididunt fugiat duis in.

<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.

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.

<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
undefined
align
"left" | "right" | "center"
"center"
card
boolean
true

LandingLogos

A list of logos or images to put on your landing pages.

LandingFAQ

A pre-styled Accordion to display an FAQ on your landing pages.