ProComponentsPage

PageHero

GitHub

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.

Official Support

Through NuxtLabs experts and agency networks, we have a solution for every need.

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

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

Official Support

Through NuxtLabs experts and agency networks, we have a solution for every need.

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

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.

Official Support

Through NuxtLabs experts and agency networks, we have a solution for every need.

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

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.

Official Support

Through NuxtLabs experts and agency networks, we have a solution for every need.

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

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.
pages/newsletter.vue
<script setup>
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

title
{}
description
{}
links
{}
default
{}

Props

ui
{}
{}
icon
string
undefined
description
string
""
links
(Button & { click?: Function; })[]
[]
title
string
""
align
"left" | "right" | "center"
"left"

Page

A dynamic grid layout for your pages.

PageHeader

A responsive header for your pages.