PageHero

A responsive hero for your pages.

Usage

Use the PageHero component above a Page.

<template>
  <UContainer>
    <UPageHero />

    <UPage>
      <UPageHeader />

      <UPageBody />
    </UPage>
  </UContainer>
</template>

Use the title and description props to customize the hero.

<template>
  <UPageHero
    title="Official Support"
    description="Through NuxtLabs experts and agency networks, we have a solution for every need."
  />
</template>

Use the icon prop to add an icon on top of the title.

<template>
  <UPageHero
    icon="i-heroicons-lifebuoy"
    title="Official Support" 
    description="Through NuxtLabs experts and agency networks, we have a solution for every need."
  />
</template>

You can add anything you want in the default slot, an image or a code-block using the MDC component (when using @nuxt/content) for example.

You can change the align prop from left to center or right to position the slot differently.

<template>
  <UPageHero
    title="Official Support"
    description="Through NuxtLabs experts and agency networks, we have a solution for every need."
    align="left"
  >
    <img
      src="https://picsum.photos/640/360"
      class="w-full rounded-md shadow-xl ring-1 ring-gray-300 dark:ring-gray-700"
    />
  </UPageHero>
</template>

Use the links prop to add some Buttons below the description. Those will be rendered below the default slot when the align prop is set to center.

<template>
  <UPageHero
    title="Official Support"
    description="Through NuxtLabs experts and agency networks, we have a solution for every need."
    align="left"
    :links="[{ label: 'Get started', color: 'black', size: 'lg' }, { label: 'Learn more', color: 'gray', size: 'lg', trailingIcon: 'i-heroicons-arrow-right-20-solid' }]"
  >
    <img
      src="https://picsum.photos/360/640"
      class="w-full rounded-md shadow-xl ring-1 ring-gray-300 dark:ring-gray-700"
    />
  </UPageHero>
</template>

You can also use the #title, #description and #links slots to customize the content of the hero. This can be quite useful when using @nuxt/content if your content has HTML for example:

# content/newsletter.yml
title: The Nuxt Newsletter
head.title: Nuxt Newsletter
description: 'Get the latest releases and news about Nuxt and its ecosystem with our newsletter.'
navigation: false
hero:
  title: The <span class="text-primary">Nuxt</span> Newsletter
  align: 'center'

We’re using .yml files as an example here but you can use any format supported by @nuxt/content like .md or .json.

<script setup lang="ts">
const route = useRoute()

const { data: page } = await useAsyncData(route.path, () => queryContent(route.path).findOne())
</script>

<template>
  <UContainer>
    <UPageHero :description="page.description" :align="page.hero.align">
      <template #title>
        <span v-html="page.hero.title" />
      </template>
    </UPageHero>

    <UPage>
      <UPageBody>
        <ULandingCTA />
      </UPageBody>
    </UPage>
  </UContainer>
</template>

Slots

• icon
• title
• description
• links
• default

Props

• icon (string) - undefined
• title (string) - undefined
• description (string) - undefined
• ui (any) - {}
• links (Button & { click?: (…args: any[]) => void; })[] - []
• align (“left” | “center” | “right”) - “left”

Config

{
  wrapper: 'py-8 sm:py-16',
  container: 'gap-8 sm:gap-y-16',
  base: '',
  icon: {
    wrapper: 'flex mb-4',
    base: 'w-10 h-10 flex-shrink-0 text-primary'
  },
  title: 'text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl lg:text-5xl',
  description: 'mt-4 text-lg text-gray-500 dark:text-gray-400',
  links: 'mt-8 flex flex-wrap gap-x-3 gap-y-1.5'
}