PageCTA

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 UnoCSS and get started with Pohon UI.

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

<template>
  <PPageHero />

  <PPageCTA class="rounded-none" />

  <PPageSection />

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

  <PPageSection />
</template>

Use px-0 and rounded-none classes to make the CTA fill the edge of the page on mobile.

Title Soon

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

title

Trusted and supported by our amazing community

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

The title is rendered as an h2 by default. Use the as prop with an object to change it, for example :as="{ title: 'h3' }". You can also set the root element this way: :as="{ root: 'section', title: 'h3' }".

Description

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

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>
  <PPageCTA
    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">
import type { ButtonProps } from 'pohon-ui'

const links = ref<ButtonProps[]>([
  {
    label: 'Get started',
    color: 'neutral'
  },
  {
    label: 'Learn more',
    color: 'neutral',
    variant: 'subtle',
    trailingIcon: 'i-lucide-arrow-right'
  }
])
</script>

<template>
  <PPageCTA
    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>

<script setup lang="ts">
import { ref } from 'vue'
import type { ButtonProps } from 'pohon-ui'

const links = ref<ButtonProps[]>([
  {
    label: 'Get started',
    color: 'neutral'
  },
  {
    label: 'Learn more',
    color: 'neutral',
    variant: 'subtle',
    trailingIcon: 'i-lucide-arrow-right'
  }
])
</script>

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

variant

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">
import type { ButtonProps } from 'pohon-ui'

const links = ref<ButtonProps[]>([
  {
    label: 'Get started',
    color: 'neutral'
  },
  {
    label: 'Learn more',
    color: 'neutral',
    variant: 'subtle',
    trailingIcon: 'i-lucide-arrow-right'
  }
])
</script>

<template>
  <PPageCTA
    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>

<script setup lang="ts">
import { ref } from 'vue'
import type { ButtonProps } from 'pohon-ui'

const links = ref<ButtonProps[]>([
  {
    label: 'Get started',
    color: 'neutral'
  },
  {
    label: 'Learn more',
    color: 'neutral',
    variant: 'subtle',
    trailingIcon: 'i-lucide-arrow-right'
  }
])
</script>

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

orientation

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">
import type { ButtonProps } from 'pohon-ui'

const links = ref<ButtonProps[]>([
  {
    label: 'Get started',
    color: 'neutral'
  },
  {
    label: 'Learn more',
    color: 'neutral',
    variant: 'subtle',
    trailingIcon: 'i-lucide-arrow-right'
  }
])
</script>

<template>
  <PPageCTA
    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"
      loading="lazy"
    />
  </PPageCTA>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { ButtonProps } from 'pohon-ui'

const links = ref<ButtonProps[]>([
  {
    label: 'Get started',
    color: 'neutral'
  },
  {
    label: 'Learn more',
    color: 'neutral',
    variant: 'subtle',
    trailingIcon: 'i-lucide-arrow-right'
  }
])
</script>

<template>
  <PPageCTA
    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"
      loading="lazy"
    />
  </PPageCTA>
</template>

Reverse

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

orientation

reverse

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">
import type { ButtonProps } from 'pohon-ui'

const links = ref<ButtonProps[]>([
  {
    label: 'Get started',
    color: 'neutral'
  },
  {
    label: 'Learn more',
    color: 'neutral',
    variant: 'subtle',
    trailingIcon: 'i-lucide-arrow-right'
  }
])
</script>

<template>
  <PPageCTA
    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"
      loading="lazy"
    />
  </PPageCTA>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { ButtonProps } from 'pohon-ui'

const links = ref<ButtonProps[]>([
  {
    label: 'Get started',
    color: 'neutral'
  },
  {
    label: 'Learn more',
    color: 'neutral',
    variant: 'subtle',
    trailingIcon: 'i-lucide-arrow-right'
  }
])
</script>

<template>
  <PPageCTA
    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"
      loading="lazy"
    />
  </PPageCTA>
</template>

API

Props

Prop	Default	Type
`as`	`'div'`	`any` The element or component this component should render as.
`title`		`string`
`description`		`string`
`orientation`	`'vertical'`	`"horizontal" \| "vertical"` 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?: SlotClass; container?: SlotClass; wrapper?: SlotClass; header?: SlotClass; title?: SlotClass; description?: SlotClass; body?: SlotClass; footer?: SlotClass; links?: SlotClass; }`

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: 'px-6 py-12 flex flex-col gap-8 lg:px-16 lg:py-24 lg:grid sm:px-12 sm:py-24 sm:gap-16',
        wrapper: '',
        header: '',
        title: 'text-3xl sm:text-4xl text-pretty tracking-tight font-700 color-text-highlighted',
        description: 'text-base sm:text-lg color-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: 'order-last'
          }
        },
        variant: {
          solid: {
            root: 'bg-background-inverted color-text-inverted',
            title: 'color-text-inverted',
            description: 'pohon:color-text-dimmed'
          },
          outline: {
            root: 'bg-background ring ring-border',
            description: 'color-text-muted'
          },
          soft: {
            root: 'bg-background-elevated/50',
            description: 'color-text-toned'
          },
          subtle: {
            root: 'bg-background-elevated/50 ring ring-border',
            description: 'color-text-toned'
          },
          naked: {
            description: 'color-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 'pohon-ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        pageCTA: {
          slots: {
            root: 'relative isolate rounded-xl overflow-hidden',
            container: 'px-6 py-12 flex flex-col gap-8 lg:px-16 lg:py-24 lg:grid sm:px-12 sm:py-24 sm:gap-16',
            wrapper: '',
            header: '',
            title: 'text-3xl sm:text-4xl text-pretty tracking-tight font-700 color-text-highlighted',
            description: 'text-base sm:text-lg color-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: 'order-last'
              }
            },
            variant: {
              solid: {
                root: 'bg-background-inverted color-text-inverted',
                title: 'color-text-inverted',
                description: 'pohon:color-text-dimmed'
              },
              outline: {
                root: 'bg-background ring ring-border',
                description: 'color-text-muted'
              },
              soft: {
                root: 'bg-background-elevated/50',
                description: 'color-text-toned'
              },
              subtle: {
                root: 'bg-background-elevated/50 ring ring-border',
                description: 'color-text-toned'
              },
              naked: {
                description: 'color-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.