PageSection

A responsive section for your pages.

Usage

The PageSection component wraps your content in a Container while maintaining full-width flexibility making it easy to add background colors, images or patterns. It provides a flexible way to display content with an illustration in the default slot.

Features

Beautiful Vue UI components

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

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

Use it after a PageHero component:

<template>
  <PPageHero />

  <PPageSection />
</template>

Title Soon

Use the title prop to set the title of the section.

title

Beautiful Vue UI components

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

The title is rendered as an h2 by default. Use the as prop with an object to change it, for example :as="{ title: 'h3' }". You can also set the root element this way: :as="{ root: 'div', title: 'h3' }".

Description

Use the description prop to set the description of the section.

description

Beautiful Vue UI components

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

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

Headline

Use the headline prop to set the headline of the section.

headline

Features

Beautiful Vue UI components

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

<template>
  <PPageSection
    title="Beautiful Vue UI components"
    description="Pohon 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>

Icon

Use the icon prop to set the icon of the section.

icon

Beautiful Vue UI components

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

<template>
  <PPageSection
    title="Beautiful Vue UI components"
    description="Pohon 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>

Features

Use the features prop to display a list of PageFeature under the description as an array of objects with the following properties:

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

You can pass any property from the Link component such as to, target, etc.

Beautiful Vue UI components

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

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

<script setup lang="ts">
import type { PageFeatureProps } from 'pohon-ui'

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

<template>
  <PPageSection
    title="Beautiful Vue UI components"
    description="Pohon 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 'pohon-ui'

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

<template>
  <PPageSection
    title="Beautiful Vue UI components"
    description="Pohon 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 the links prop to display a list of Button under the description.

Beautiful Vue UI components

Pohon 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 'pohon-ui'

const links = ref<ButtonProps[]>([
  {
    label: 'Get started',
    to: '/pohon/getting-started',
    icon: 'i-lucide-square-play',
    color: 'neutral'
  },
  {
    label: 'Explore components',
    to: '/pohon/components/app',
    color: 'neutral',
    variant: 'subtle',
    trailingIcon: 'i-lucide-arrow-right'
  }
])
</script>

<template>
  <PPageSection
    title="Beautiful Vue UI components"
    description="Pohon 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 'pohon-ui'

const links = ref<ButtonProps[]>([
  {
    label: 'Get started',
    to: '/pohon/getting-started',
    icon: 'i-lucide-square-play',
    color: 'neutral'
  },
  {
    label: 'Explore components',
    to: '/pohon/components/app',
    color: 'neutral',
    variant: 'subtle',
    trailingIcon: 'i-lucide-arrow-right'
  }
])
</script>

<template>
  <PPageSection
    title="Beautiful Vue UI components"
    description="Pohon 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>

Orientation

Use the orientation prop to change the orientation with the default slot. Defaults to vertical.

orientation

Beautiful Vue UI components

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

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

Explore components

<script setup lang="ts">
import type { PageFeatureProps, ButtonProps } from 'pohon-ui'

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

<template>
  <PPageSection
    title="Beautiful Vue UI components"
    description="Pohon 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"
    />
  </PPageSection>
</template>

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

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

<template>
  <PPageSection
    title="Beautiful Vue UI components"
    description="Pohon 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"
    />
  </PPageSection>
</template>

Reverse

Use the reverse prop to reverse the orientation of the default slot.

orientation

reverse

Beautiful Vue UI components

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

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

Explore components

<script setup lang="ts">
import type { PageFeatureProps, ButtonProps } from 'pohon-ui'

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

<template>
  <PPageSection
    title="Beautiful Vue UI components"
    description="Pohon 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"
    />
  </PPageSection>
</template>

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

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

<template>
  <PPageSection
    title="Beautiful Vue UI components"
    description="Pohon 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"
    />
  </PPageSection>
</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`	`{}`

Theme

app.config.ts

export default defineAppConfig({
  ui: {
    pageSection: {
      slots: {
        root: 'relative isolate',
        container: 'py-16 flex flex-col gap-8 lg:py-32 lg:grid sm:py-24 sm:gap-16',
        wrapper: '',
        header: '',
        leading: 'flex items-center mb-6',
        leadingIcon: 'size-10 shrink-0 color-primary',
        headline: 'mb-3',
        title: 'text-3xl sm:text-4xl lg:text-5xl text-pretty tracking-tight font-700 color-text-highlighted',
        description: 'text-base sm:text-lg color-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-600 color-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 'pohon-ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        pageSection: {
          slots: {
            root: 'relative isolate',
            container: 'py-16 flex flex-col gap-8 lg:py-32 lg:grid sm:py-24 sm:gap-16',
            wrapper: '',
            header: '',
            leading: 'flex items-center mb-6',
            leadingIcon: 'size-10 shrink-0 color-primary',
            headline: 'mb-3',
            title: 'text-3xl sm:text-4xl lg:text-5xl text-pretty tracking-tight font-700 color-text-highlighted',
            description: 'text-base sm:text-lg color-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-600 color-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

A list of logos or images to display on your pages.

PricingPlan

A customizable pricing plan to display in a pricing page.