PageSection

Uma seção responsiva para as suas páginas.

Uso

O componente PageSection 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.

Features

Belos componentes de UI para Vue

O Nitro UI oferece um conjunto completo de componentes e utilitários para ajudar você a construir aplicações web bonitas e acessíveis com Vue e Nuxt.

Icons
Nitro UI integrates with Nuxt Icon to access over 200,000+ icons from Iconify.
Fonts
Nitro UI integrates with Nuxt Fonts to provide plug-and-play font optimization.
Color Mode
Nitro UI integrates with Nuxt Color Mode to switch between light and dark.

Use-o após um componente PageHero:

<template>
  <NPageHero />

  <NPageSection />
</template>

Título

Use a prop title para definir o título da seção.

title

Beautiful Vue UI components

<template>
  <NPageSection title="Beautiful Vue UI components" />
</template>

Descrição

Use a prop description para definir a descrição da seção.

description

Beautiful Vue UI components

Nitro UI provides a comprehensive suite of components and utilities to help you build beautiful and accessible web applications with Vue and Nuxt.

<template>
  <NPageSection
    title="Beautiful Vue UI components"
    description="Nitro UI provides a comprehensive suite of components and utilities to help you build beautiful and accessible web applications with Vue and Nuxt."
  />
</template>

Título

Use a prop headline para definir a manchete da seção.

headline

Features

Beautiful Vue UI components

Nitro UI provides a comprehensive suite of components and utilities to help you build beautiful and accessible web applications with Vue and Nuxt.

<template>
  <NPageSection
    title="Beautiful Vue UI components"
    description="Nitro UI provides a comprehensive suite of components and utilities to help you build beautiful and accessible web applications with Vue and Nuxt."
    headline="Features"
  />
</template>

Ícone

Use a prop icon para definir o ícone da seção.

icon

Beautiful Vue UI components

Nitro UI provides a comprehensive suite of components and utilities to help you build beautiful and accessible web applications with Vue and Nuxt.

<template>
  <NPageSection
    title="Beautiful Vue UI components"
    description="Nitro UI provides a comprehensive suite of components and utilities to help you build beautiful and accessible web applications with Vue and Nuxt."
    icon="i-lucide-rocket"
  />
</template>

Recursos

Use a prop features para exibir uma lista de PageFeature abaixo da descrição como um array de objetos com as seguintes propriedades:

title?: string
description?: string
icon?: string
orientation?: 'horizontal' | 'vertical'

Você pode passar qualquer propriedade do componente Link, como to, target, etc.

Beautiful Vue UI components

Nitro UI provides a comprehensive suite of components and utilities to help you build beautiful and accessible web applications with Vue and Nuxt.

Icons
Nitro UI integrates with Nuxt Icon to access over 200,000+ icons from Iconify.
Fonts
Nitro UI integrates with Nuxt Fonts to provide plug-and-play font optimization.
Color Mode
Nitro UI integrates with Nuxt Color Mode to switch between light and dark.

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

const features = ref<PageFeatureProps[]>([
  {
    title: 'Icons',
    description: 'Nitro UI integrates with Nuxt Icon to access over 200,000+ icons from Iconify.',
    icon: 'i-lucide-smile',
    to: '/docs/getting-started/integrations/icons'
  },
  {
    title: 'Fonts',
    description: 'Nitro UI integrates with Nuxt Fonts to provide plug-and-play font optimization.',
    icon: 'i-lucide-a-large-small',
    to: '/docs/getting-started/integrations/fonts'
  },
  {
    title: 'Color Mode',
    description: 'Nitro UI integrates with Nuxt Color Mode to switch between light and dark.',
    icon: 'i-lucide-sun-moon',
    to: '/docs/getting-started/integrations/color-mode'
  }
])
</script>

<template>
  <NPageSection
    title="Beautiful Vue UI components"
    description="Nitro UI provides a comprehensive suite of components and utilities to help you build beautiful and accessible web applications with Vue and Nuxt."
    :features="features"
  />
</template>

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

const features = ref<PageFeatureProps[]>([
  {
    title: 'Icons',
    description: 'Nitro UI integrates with Nuxt Icon to access over 200,000+ icons from Iconify.',
    icon: 'i-lucide-smile',
    to: '/docs/getting-started/integrations/icons'
  },
  {
    title: 'Fonts',
    description: 'Nitro UI integrates with Nuxt Fonts to provide plug-and-play font optimization.',
    icon: 'i-lucide-a-large-small',
    to: '/docs/getting-started/integrations/fonts'
  },
  {
    title: 'Color Mode',
    description: 'Nitro UI integrates with Nuxt Color Mode to switch between light and dark.',
    icon: 'i-lucide-sun-moon',
    to: '/docs/getting-started/integrations/color-mode'
  }
])
</script>

<template>
  <NPageSection
    title="Beautiful Vue UI components"
    description="Nitro UI provides a comprehensive suite of components and utilities to help you build beautiful and accessible web applications with Vue and Nuxt."
    :features="features"
  />
</template>

Links

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

Beautiful Vue UI components

Nitro UI provides a comprehensive suite of components and utilities to help you build beautiful and accessible web applications with Vue and Nuxt.

Get started Explore components

<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',
    color: 'neutral'
  },
  {
    label: 'Explore components',
    to: '/docs/components/app',
    color: 'neutral',
    variant: 'subtle',
    trailingIcon: 'i-lucide-arrow-right'
  }
])
</script>

<template>
  <NPageSection
    title="Beautiful Vue UI components"
    description="Nitro UI provides a comprehensive suite of components and utilities to help you build beautiful and accessible web applications with Vue and Nuxt."
    :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',
    color: 'neutral'
  },
  {
    label: 'Explore components',
    to: '/docs/components/app',
    color: 'neutral',
    variant: 'subtle',
    trailingIcon: 'i-lucide-arrow-right'
  }
])
</script>

<template>
  <NPageSection
    title="Beautiful Vue UI components"
    description="Nitro UI provides a comprehensive suite of components and utilities to help you build beautiful and accessible web applications with Vue and Nuxt."
    :links="links"
  />
</template>

Orientação

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

orientation

Beautiful Vue UI components

Nitro UI provides a comprehensive suite of components and utilities to help you build beautiful and accessible web applications with Vue and Nuxt.

Icons
Nitro UI integrates with Nuxt Icon to access over 200,000+ icons from Iconify.
Fonts
Nitro UI integrates with Nuxt Fonts to provide plug-and-play font optimization.
Color Mode
Nitro UI integrates with Nuxt Color Mode to switch between light and dark.

Explore components

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

const features = ref<PageFeatureProps[]>([
  {
    title: 'Icons',
    description: 'Nitro UI integrates with Nuxt Icon to access over 200,000+ icons from Iconify.',
    icon: 'i-lucide-smile',
    to: '/docs/getting-started/integrations/icons'
  },
  {
    title: 'Fonts',
    description: 'Nitro UI integrates with Nuxt Fonts to provide plug-and-play font optimization.',
    icon: 'i-lucide-a-large-small',
    to: '/docs/getting-started/integrations/fonts'
  },
  {
    title: 'Color Mode',
    description: 'Nitro UI integrates with Nuxt Color Mode to switch between light and dark.',
    icon: 'i-lucide-sun-moon',
    to: '/docs/getting-started/integrations/color-mode'
  }
])
const links = ref<ButtonProps[]>([
  {
    label: 'Explore components',
    to: '/docs/components/app',
    color: 'neutral',
    variant: 'subtle',
    trailingIcon: 'i-lucide-arrow-right'
  }
])
</script>

<template>
  <NPageSection
    title="Beautiful Vue UI components"
    description="Nitro UI provides a comprehensive suite of components and utilities to help you build beautiful and accessible web applications with Vue and Nuxt."
    icon="i-lucide-rocket"
    orientation="horizontal"
    :features="features"
    :links="links"
  >
    <img
      src="https://picsum.photos/704/1294"
      width="352"
      height="647"
      alt="Illustration"
      class="w-full rounded-lg"
      loading="lazy"
    />
  </NPageSection>
</template>

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

const features = ref<PageFeatureProps[]>([
  {
    title: 'Icons',
    description: 'Nitro UI integrates with Nuxt Icon to access over 200,000+ icons from Iconify.',
    icon: 'i-lucide-smile',
    to: '/docs/getting-started/integrations/icons'
  },
  {
    title: 'Fonts',
    description: 'Nitro UI integrates with Nuxt Fonts to provide plug-and-play font optimization.',
    icon: 'i-lucide-a-large-small',
    to: '/docs/getting-started/integrations/fonts'
  },
  {
    title: 'Color Mode',
    description: 'Nitro UI integrates with Nuxt Color Mode to switch between light and dark.',
    icon: 'i-lucide-sun-moon',
    to: '/docs/getting-started/integrations/color-mode'
  }
])
const links = ref<ButtonProps[]>([
  {
    label: 'Explore components',
    to: '/docs/components/app',
    color: 'neutral',
    variant: 'subtle',
    trailingIcon: 'i-lucide-arrow-right'
  }
])
</script>

<template>
  <NPageSection
    title="Beautiful Vue UI components"
    description="Nitro UI provides a comprehensive suite of components and utilities to help you build beautiful and accessible web applications with Vue and Nuxt."
    icon="i-lucide-rocket"
    orientation="horizontal"
    :features="features"
    :links="links"
  >
    <img
      src="https://picsum.photos/704/1294"
      width="352"
      height="647"
      alt="Illustration"
      class="w-full rounded-lg"
      loading="lazy"
    />
  </NPageSection>
</template>

Invertido

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

orientation

reverse

Beautiful Vue UI components

Nitro UI provides a comprehensive suite of components and utilities to help you build beautiful and accessible web applications with Vue and Nuxt.

Icons
Nitro UI integrates with Nuxt Icon to access over 200,000+ icons from Iconify.
Fonts
Nitro UI integrates with Nuxt Fonts to provide plug-and-play font optimization.
Color Mode
Nitro UI integrates with Nuxt Color Mode to switch between light and dark.

Explore components

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

const features = ref<PageFeatureProps[]>([
  {
    title: 'Icons',
    description: 'Nitro UI integrates with Nuxt Icon to access over 200,000+ icons from Iconify.',
    icon: 'i-lucide-smile',
    to: '/docs/getting-started/integrations/icons'
  },
  {
    title: 'Fonts',
    description: 'Nitro UI integrates with Nuxt Fonts to provide plug-and-play font optimization.',
    icon: 'i-lucide-a-large-small',
    to: '/docs/getting-started/integrations/fonts'
  },
  {
    title: 'Color Mode',
    description: 'Nitro UI integrates with Nuxt Color Mode to switch between light and dark.',
    icon: 'i-lucide-sun-moon',
    to: '/docs/getting-started/integrations/color-mode'
  }
])
const links = ref<ButtonProps[]>([
  {
    label: 'Explore components',
    to: '/docs/components/app',
    color: 'neutral',
    variant: 'subtle',
    trailingIcon: 'i-lucide-arrow-right'
  }
])
</script>

<template>
  <NPageSection
    title="Beautiful Vue UI components"
    description="Nitro UI provides a comprehensive suite of components and utilities to help you build beautiful and accessible web applications with Vue and Nuxt."
    icon="i-lucide-rocket"
    orientation="horizontal"
    reverse
    :features="features"
    :links="links"
  >
    <img
      src="https://picsum.photos/704/1294"
      width="352"
      height="647"
      alt="Illustration"
      class="w-full rounded-lg"
      loading="lazy"
    />
  </NPageSection>
</template>

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

const features = ref<PageFeatureProps[]>([
  {
    title: 'Icons',
    description: 'Nitro UI integrates with Nuxt Icon to access over 200,000+ icons from Iconify.',
    icon: 'i-lucide-smile',
    to: '/docs/getting-started/integrations/icons'
  },
  {
    title: 'Fonts',
    description: 'Nitro UI integrates with Nuxt Fonts to provide plug-and-play font optimization.',
    icon: 'i-lucide-a-large-small',
    to: '/docs/getting-started/integrations/fonts'
  },
  {
    title: 'Color Mode',
    description: 'Nitro UI integrates with Nuxt Color Mode to switch between light and dark.',
    icon: 'i-lucide-sun-moon',
    to: '/docs/getting-started/integrations/color-mode'
  }
])
const links = ref<ButtonProps[]>([
  {
    label: 'Explore components',
    to: '/docs/components/app',
    color: 'neutral',
    variant: 'subtle',
    trailingIcon: 'i-lucide-arrow-right'
  }
])
</script>

<template>
  <NPageSection
    title="Beautiful Vue UI components"
    description="Nitro UI provides a comprehensive suite of components and utilities to help you build beautiful and accessible web applications with Vue and Nuxt."
    icon="i-lucide-rocket"
    orientation="horizontal"
    reverse
    :features="features"
    :links="links"
  >
    <img
      src="https://picsum.photos/704/1294"
      width="352"
      height="647"
      alt="Illustration"
      class="w-full rounded-lg"
      loading="lazy"
    />
  </NPageSection>
</template>

API

Props

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

Slots

Slot	Type
`top`	`{}`
`header`	`{}`
`leading`	`{ ui: object; }`
`headline`	`{}`
`title`	`{}`
`description`	`{}`
`body`	`{}`
`features`	`{}`
`footer`	`{}`
`links`	`{}`
`default`	`{}`
`bottom`	`{}`

Tema

app.config.ts

export default defineAppConfig({
  ui: {
    pageSection: {
      slots: {
        root: 'relative isolate',
        container: 'flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16',
        wrapper: '',
        header: '',
        leading: 'flex items-center mb-6',
        leadingIcon: 'size-10 shrink-0 text-primary',
        headline: 'mb-3',
        title: 'text-3xl sm:text-4xl lg:text-5xl text-pretty tracking-tight font-bold text-highlighted',
        description: 'text-base sm:text-lg text-muted',
        body: 'mt-8',
        features: 'grid',
        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',
            features: 'gap-4'
          },
          vertical: {
            container: '',
            headline: 'justify-center',
            leading: 'justify-center',
            title: 'text-center',
            description: 'text-center text-balance',
            links: 'justify-center',
            features: 'sm:grid-cols-2 lg:grid-cols-3 gap-8'
          }
        },
        reverse: {
          true: {
            wrapper: 'order-last'
          }
        },
        headline: {
          true: {
            headline: 'font-semibold text-primary flex items-center gap-1.5'
          }
        },
        title: {
          true: {
            description: 'mt-6'
          }
        },
        description: {
          true: ''
        },
        body: {
          true: ''
        }
      },
      compoundVariants: [
        {
          orientation: 'vertical',
          title: true,
          class: {
            body: 'mt-16'
          }
        },
        {
          orientation: 'vertical',
          description: true,
          class: {
            body: 'mt-16'
          }
        },
        {
          orientation: 'vertical',
          body: true,
          class: {
            footer: 'mt-16'
          }
        }
      ]
    }
  }
})

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: {
        pageSection: {
          slots: {
            root: 'relative isolate',
            container: 'flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16',
            wrapper: '',
            header: '',
            leading: 'flex items-center mb-6',
            leadingIcon: 'size-10 shrink-0 text-primary',
            headline: 'mb-3',
            title: 'text-3xl sm:text-4xl lg:text-5xl text-pretty tracking-tight font-bold text-highlighted',
            description: 'text-base sm:text-lg text-muted',
            body: 'mt-8',
            features: 'grid',
            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',
                features: 'gap-4'
              },
              vertical: {
                container: '',
                headline: 'justify-center',
                leading: 'justify-center',
                title: 'text-center',
                description: 'text-center text-balance',
                links: 'justify-center',
                features: 'sm:grid-cols-2 lg:grid-cols-3 gap-8'
              }
            },
            reverse: {
              true: {
                wrapper: 'order-last'
              }
            },
            headline: {
              true: {
                headline: 'font-semibold text-primary flex items-center gap-1.5'
              }
            },
            title: {
              true: {
                description: 'mt-6'
              }
            },
            description: {
              true: ''
            },
            body: {
              true: ''
            }
          },
          compoundVariants: [
            {
              orientation: 'vertical',
              title: true,
              class: {
                body: 'mt-16'
              }
            },
            {
              orientation: 'vertical',
              description: true,
              class: {
                body: 'mt-16'
              }
            },
            {
              orientation: 'vertical',
              body: true,
              class: {
                footer: 'mt-16'
              }
            }
          ]
        }
      }
    })
  ]
})

Changelog

No recent changes

PageLogos

Uma lista de logos ou imagens para exibir nas suas páginas.

PricingPlan

Um plano de preços personalizável para exibir em uma página de preços.