PageCTA

GitHub
A call to action section to display in your pages.

Usage

The PageCTA component provides a flexible way to display a call to action in your pages with an illustration in the default slot.

Trusted and supported by our amazing community

Preview the latest Tailwind CSS v4 and get started with Nuxt UI.

Use it inside a PageSection component or directly in your page:

<template>
  <UPageHero />

  <UPageCTA class="rounded-none" />

  <UPageSection />

  <UPageSection :ui="{ container: 'px-0' }">
    <UPageCTA class="rounded-none sm:rounded-xl" />
  </UPageSection>

  <UPageSection />
</template>
Use px-0 and rounded-none classes to make the CTA fill the edge of the page on mobile.

Title

Use the title prop to set the title of the CTA.

Trusted and supported by our amazing community

<template>
  <UPageCTA title="Trusted and supported by our amazing community" />
</template>

Description

Use the description prop to set the description of the CTA.

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>
  <UPageCTA
    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."
  />
</template>

Links

Use the links prop to display a list of Button under 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.
<script setup lang="ts">
const links = ref([
  {
    label: 'Get started',
    color: 'neutral'
  },
  {
    label: 'Learn more',
    color: 'neutral',
    variant: 'subtle',
    trailingIcon: 'i-lucide-arrow-right'
  }
])
</script>

<template>
  <UPageCTA
    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="links"
  />
</template>

Variant

Use the variant prop to change the style of the CTA.

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.
<script setup lang="ts">
const links = ref([
  {
    label: 'Get started',
    color: 'neutral'
  },
  {
    label: 'Learn more',
    color: 'neutral',
    variant: 'subtle',
    trailingIcon: 'i-lucide-arrow-right'
  }
])
</script>

<template>
  <UPageCTA
    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."
    variant="soft"
    :links="links"
  />
</template>
You can apply the light or dark class to the links slot when using the solid variant to reverse the colors.

Orientation

Use the orientation prop to change the orientation with the default slot. Defaults to vertical.

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.
<script setup lang="ts">
const links = ref([
  {
    label: 'Get started',
    color: 'neutral'
  },
  {
    label: 'Learn more',
    color: 'neutral',
    variant: 'subtle',
    trailingIcon: 'i-lucide-arrow-right'
  }
])
</script>

<template>
  <UPageCTA
    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."
    orientation="horizontal"
    :links="links"
  >
    <img
      src="https://picsum.photos/640/728"
      width="320"
      height="364"
      alt="Illustration"
      class="w-full rounded-lg"
    />
  </UPageCTA>
</template>

Reverse

Use the reverse prop to reverse the orientation of the default slot.

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.
<script setup lang="ts">
const links = ref([
  {
    label: 'Get started',
    color: 'neutral'
  },
  {
    label: 'Learn more',
    color: 'neutral',
    variant: 'subtle',
    trailingIcon: 'i-lucide-arrow-right'
  }
])
</script>

<template>
  <UPageCTA
    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."
    orientation="horizontal"
    reverse
    :links="links"
  >
    <img
      src="https://picsum.photos/640/728"
      width="320"
      height="364"
      alt="Illustration"
      class="w-full rounded-lg"
    />
  </UPageCTA>
</template>

API

Props

Prop Default Type
as

'div'

any

The element or component this component should render as.

title

string

description

string

orientation

'vertical'

"vertical" | "horizontal"

The orientation of the page cta.

reverse

false

boolean

Reverse the order of the default slot.

variant

'outline'

"outline" | "solid" | "soft" | "subtle" | "naked"

links

ButtonProps[]

Display a list of Button under the description. { size: 'lg' }

ui

{ root?: ClassNameValue; container?: ClassNameValue; wrapper?: ClassNameValue; header?: ClassNameValue; title?: ClassNameValue; description?: ClassNameValue; body?: ClassNameValue; footer?: ClassNameValue; links?: ClassNameValue; }

Slots

Slot Type
top

{}

header

{}

title

{}

description

{}

body

{}

footer

{}

links

{}

default

{}

bottom

{}

Theme

app.config.ts
export default defineAppConfig({
  ui: {
    pageCTA: {
      slots: {
        root: 'relative isolate rounded-xl overflow-hidden',
        container: 'flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16',
        wrapper: '',
        header: '',
        title: 'text-3xl sm:text-4xl text-pretty tracking-tight font-bold text-highlighted',
        description: 'text-base sm:text-lg text-muted',
        body: 'mt-8',
        footer: 'mt-8',
        links: 'flex flex-wrap gap-x-6 gap-y-3'
      },
      variants: {
        orientation: {
          horizontal: {
            container: 'lg:grid-cols-2 lg:items-center',
            description: 'text-pretty'
          },
          vertical: {
            container: '',
            title: 'text-center',
            description: 'text-center text-balance',
            links: 'justify-center'
          }
        },
        reverse: {
          true: {
            wrapper: 'lg:order-last'
          }
        },
        variant: {
          solid: {
            root: 'bg-inverted text-inverted',
            title: 'text-inverted',
            description: 'text-dimmed'
          },
          outline: {
            root: 'bg-default ring ring-default',
            description: 'text-muted'
          },
          soft: {
            root: 'bg-elevated/50',
            description: 'text-toned'
          },
          subtle: {
            root: 'bg-elevated/50 ring ring-default',
            description: 'text-toned'
          },
          naked: {
            description: 'text-muted'
          }
        },
        title: {
          true: {
            description: 'mt-6'
          }
        }
      },
      defaultVariants: {
        variant: 'outline'
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        pageCTA: {
          slots: {
            root: 'relative isolate rounded-xl overflow-hidden',
            container: 'flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16',
            wrapper: '',
            header: '',
            title: 'text-3xl sm:text-4xl text-pretty tracking-tight font-bold text-highlighted',
            description: 'text-base sm:text-lg text-muted',
            body: 'mt-8',
            footer: 'mt-8',
            links: 'flex flex-wrap gap-x-6 gap-y-3'
          },
          variants: {
            orientation: {
              horizontal: {
                container: 'lg:grid-cols-2 lg:items-center',
                description: 'text-pretty'
              },
              vertical: {
                container: '',
                title: 'text-center',
                description: 'text-center text-balance',
                links: 'justify-center'
              }
            },
            reverse: {
              true: {
                wrapper: 'lg:order-last'
              }
            },
            variant: {
              solid: {
                root: 'bg-inverted text-inverted',
                title: 'text-inverted',
                description: 'text-dimmed'
              },
              outline: {
                root: 'bg-default ring ring-default',
                description: 'text-muted'
              },
              soft: {
                root: 'bg-elevated/50',
                description: 'text-toned'
              },
              subtle: {
                root: 'bg-elevated/50 ring ring-default',
                description: 'text-toned'
              },
              naked: {
                description: 'text-muted'
              }
            },
            title: {
              true: {
                description: 'mt-6'
              }
            }
          },
          defaultVariants: {
            variant: 'outline'
          }
        }
      }
    })
  ]
})

Changelog

No recent changes

PageColumns

A responsive multi-column layout system for organizing content side-by-side.

PageFeature

A component to showcase key features of your application.