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.
Official Support
Through NuxtLabs experts and agency networks, we have a solution for every need.
<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.
Official Support
Through NuxtLabs experts and agency networks, we have a solution for every need.
<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.
Official Support
Through NuxtLabs experts and agency networks, we have a solution for every need.
<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.
Official Support
Through NuxtLabs experts and agency networks, we have a solution for every need.
<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.pages/newsletter.vue
<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
undefinedtitle
string
undefineddescription
string
undefinedui
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'
}