PageHero

Um hero responsivo para as suas páginas.

Uso

O componente PageHero envolve o seu conteúdo em um Container mantendo a flexibilidade de largura total, facilitando a adição de cores de fundo, imagens ou padrões. Ele oferece uma maneira flexível de exibir conteúdo com uma ilustração no slot padrão.

A melhor biblioteca de UI para Vue

Uma biblioteca de UI integrada ao Nuxt/Vue que oferece um rico conjunto de componentes totalmente estilizados, acessíveis e altamente personalizáveis para construir aplicações web modernas.

App screenshot

Título

Use a prop title para definir o título do hero.

title

Ultimate Vue UI library

<template>
  <NPageHero title="Ultimate Vue UI library" />
</template>

Descrição

Use a prop description para definir a descrição do hero.

description

Ultimate Vue UI library

A Nuxt/Vue-integrated UI library providing a rich set of fully-styled, accessible and highly customizable components for building modern web applications.

<template>
  <NPageHero
    title="Ultimate Vue UI library"
    description="A Nuxt/Vue-integrated UI library providing a rich set of fully-styled, accessible and highly customizable components for building modern web applications."
  />
</template>

Título

Use a prop headline para definir a manchete do hero.

headline

New release

Ultimate Vue UI library

A Nuxt/Vue-integrated UI library providing a rich set of fully-styled, accessible and highly customizable components for building modern web applications.

<template>
  <NPageHero
    title="Ultimate Vue UI library"
    description="A Nuxt/Vue-integrated UI library providing a rich set of fully-styled, accessible and highly customizable components for building modern web applications."
    headline="New release"
  />
</template>

Links

Use a prop links para exibir uma lista de Button abaixo da descrição.

Ultimate Vue UI library

A Nuxt/Vue-integrated UI library providing a rich set of fully-styled, accessible and highly customizable components for building modern web applications.

Get started Learn more

<script setup lang="ts">
import type { ButtonProps } from '@nitro/ui'

const links = ref<ButtonProps[]>([
  {
    label: 'Get started',
    to: '/docs/getting-started',
    icon: 'i-lucide-square-play'
  },
  {
    label: 'Learn more',
    to: '/docs/getting-started/theme/design-system',
    color: 'neutral',
    variant: 'subtle',
    trailingIcon: 'i-lucide-arrow-right'
  }
])
</script>

<template>
  <NPageHero
    title="Ultimate Vue UI library"
    description="A Nuxt/Vue-integrated UI library providing a rich set of fully-styled, accessible and highly customizable components for building modern web applications."
    :links="links"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { ButtonProps } from '@nitro/ui'

const links = ref<ButtonProps[]>([
  {
    label: 'Get started',
    to: '/docs/getting-started',
    icon: 'i-lucide-square-play'
  },
  {
    label: 'Learn more',
    to: '/docs/getting-started/theme/design-system',
    color: 'neutral',
    variant: 'subtle',
    trailingIcon: 'i-lucide-arrow-right'
  }
])
</script>

<template>
  <NPageHero
    title="Ultimate Vue UI library"
    description="A Nuxt/Vue-integrated UI library providing a rich set of fully-styled, accessible and highly customizable components for building modern web applications."
    :links="links"
  />
</template>

Orientação

Use a prop orientation para alterar a orientação com o slot padrão. O padrão é vertical.

orientation

New release

Ultimate Vue UI library

A Nuxt/Vue-integrated UI library providing a rich set of fully-styled, accessible and highly customizable components for building modern web applications.

Get started Learn more

<script setup lang="ts">
import type { ButtonProps } from '@nitro/ui'

const links = ref<ButtonProps[]>([
  {
    label: 'Get started',
    to: '/docs/getting-started',
    icon: 'i-lucide-square-play'
  },
  {
    label: 'Learn more',
    to: '/docs/getting-started/theme/design-system',
    color: 'neutral',
    variant: 'subtle',
    trailingIcon: 'i-lucide-arrow-right'
  }
])
</script>

<template>
  <NPageHero
    title="Ultimate Vue UI library"
    description="A Nuxt/Vue-integrated UI library providing a rich set of fully-styled, accessible and highly customizable components for building modern web applications."
    headline="New release"
    orientation="horizontal"
    :links="links"
  >
    <img
      src="/blocks/image4.png"
      alt="App screenshot"
      class="rounded-lg shadow-2xl ring ring-default"
    />
  </NPageHero>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { ButtonProps } from '@nitro/ui'

const links = ref<ButtonProps[]>([
  {
    label: 'Get started',
    to: '/docs/getting-started',
    icon: 'i-lucide-square-play'
  },
  {
    label: 'Learn more',
    to: '/docs/getting-started/theme/design-system',
    color: 'neutral',
    variant: 'subtle',
    trailingIcon: 'i-lucide-arrow-right'
  }
])
</script>

<template>
  <NPageHero
    title="Ultimate Vue UI library"
    description="A Nuxt/Vue-integrated UI library providing a rich set of fully-styled, accessible and highly customizable components for building modern web applications."
    headline="New release"
    orientation="horizontal"
    :links="links"
  >
    <img
      src="/blocks/image4.png"
      alt="App screenshot"
      class="rounded-lg shadow-2xl ring ring-default"
    />
  </NPageHero>
</template>

Invertido

Use a prop reverse para inverter a orientação do slot padrão.

orientation

reverse

New release

Ultimate Vue UI library

A Nuxt/Vue-integrated UI library providing a rich set of fully-styled, accessible and highly customizable components for building modern web applications.

Get started Learn more

<script setup lang="ts">
import type { ButtonProps } from '@nitro/ui'

const links = ref<ButtonProps[]>([
  {
    label: 'Get started',
    to: '/docs/getting-started',
    icon: 'i-lucide-square-play'
  },
  {
    label: 'Learn more',
    to: '/docs/getting-started/theme/design-system',
    color: 'neutral',
    variant: 'subtle',
    trailingIcon: 'i-lucide-arrow-right'
  }
])
</script>

<template>
  <NPageHero
    title="Ultimate Vue UI library"
    description="A Nuxt/Vue-integrated UI library providing a rich set of fully-styled, accessible and highly customizable components for building modern web applications."
    headline="New release"
    orientation="horizontal"
    reverse
    :links="links"
  >
    <img
      src="/blocks/image4.png"
      alt="App screenshot"
      class="rounded-lg shadow-2xl ring ring-default"
    />
  </NPageHero>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { ButtonProps } from '@nitro/ui'

const links = ref<ButtonProps[]>([
  {
    label: 'Get started',
    to: '/docs/getting-started',
    icon: 'i-lucide-square-play'
  },
  {
    label: 'Learn more',
    to: '/docs/getting-started/theme/design-system',
    color: 'neutral',
    variant: 'subtle',
    trailingIcon: 'i-lucide-arrow-right'
  }
])
</script>

<template>
  <NPageHero
    title="Ultimate Vue UI library"
    description="A Nuxt/Vue-integrated UI library providing a rich set of fully-styled, accessible and highly customizable components for building modern web applications."
    headline="New release"
    orientation="horizontal"
    reverse
    :links="links"
  >
    <img
      src="/blocks/image4.png"
      alt="App screenshot"
      class="rounded-lg shadow-2xl ring ring-default"
    />
  </NPageHero>
</template>

API

Props

Prop	Default	Type
`as`	`'div'`	`any` The element or component this component should render as.
`headline`		`string`
`title`		`string`
`description`		`string`
`links`		`ButtonProps[]` Display a list of Button under the description. `{ size: 'xl' }`
`orientation`	`'vertical'`	`"horizontal" \| "vertical"` The orientation of the page hero.
`reverse`	`false`	`boolean` Reverse the order of the default slot.
`ui`		`{ root?: SlotClass; container?: SlotClass; wrapper?: SlotClass; header?: SlotClass; headline?: SlotClass; title?: SlotClass; description?: SlotClass; body?: SlotClass; footer?: SlotClass; links?: SlotClass; }`

Slots

Slot	Type
`top`	`{}`
`header`	`{}`
`headline`	`{}`
`title`	`{}`
`description`	`{}`
`body`	`{}`
`footer`	`{}`
`links`	`{}`
`default`	`{}`
`bottom`	`{}`

Tema

app.config.ts

export default defineAppConfig({
  ui: {
    pageHero: {
      slots: {
        root: 'relative isolate',
        container: 'flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24',
        wrapper: '',
        header: '',
        headline: 'mb-4',
        title: 'text-5xl sm:text-7xl text-pretty tracking-tight font-bold text-highlighted',
        description: 'text-lg sm:text-xl/8 text-muted',
        body: 'mt-10',
        footer: 'mt-10',
        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: '',
            headline: 'justify-center',
            wrapper: 'text-center',
            description: 'text-balance',
            links: 'justify-center'
          }
        },
        reverse: {
          true: {
            wrapper: 'order-last'
          }
        },
        headline: {
          true: {
            headline: 'font-semibold text-primary flex items-center gap-1.5'
          }
        },
        title: {
          true: {
            description: 'mt-6'
          }
        }
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nitro/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        pageHero: {
          slots: {
            root: 'relative isolate',
            container: 'flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24',
            wrapper: '',
            header: '',
            headline: 'mb-4',
            title: 'text-5xl sm:text-7xl text-pretty tracking-tight font-bold text-highlighted',
            description: 'text-lg sm:text-xl/8 text-muted',
            body: 'mt-10',
            footer: 'mt-10',
            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: '',
                headline: 'justify-center',
                wrapper: 'text-center',
                description: 'text-balance',
                links: 'justify-center'
              }
            },
            reverse: {
              true: {
                wrapper: 'order-last'
              }
            },
            headline: {
              true: {
                headline: 'font-semibold text-primary flex items-center gap-1.5'
              }
            },
            title: {
              true: {
                description: 'mt-6'
              }
            }
          }
        }
      }
    })
  ]
})

Changelog

No recent changes

PageHeader

Um header responsivo para as suas páginas.

PageLinks

Uma lista de links para ser exibida na página.