Vinicunca

PageFeature

GitHub
A component to showcase key features of your application.

Usage

The PageFeature component is used by the PageSection component to display features.

Title

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

Theme
<template>
  <PPageFeature title="Theme" />
</template>
The title is rendered as a div by default. Use the as prop with an object to render it as a heading, for example :as="{ title: 'h3' }". You can also set the root element this way: :as="{ root: 'section', title: 'h3' }".

Description

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

Theme
Customize Pohon UI with your own colors, fonts, and more.
<template>
  <PPageFeature
    title="Theme"
    description="Customize Pohon UI with your own colors, fonts, and more."
  />
</template>

Icon

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

Theme
Customize Pohon UI with your own colors, fonts, and more.
<template>
  <PPageFeature
    title="Theme"
    description="Customize Pohon UI with your own colors, fonts, and more."
    icon="i-lucide-swatch-book"
  />
</template>

Link

You can pass any property from the <NuxtLink> component such as to, target, rel, etc.

Theme
Customize Pohon UI with your own colors, fonts, and more.
<template>
  <PPageFeature
    title="Theme"
    description="Customize Pohon UI with your own colors, fonts, and more."
    icon="i-lucide-swatch-book"
    to="/pohon/getting-started/theme/design-system"
    target="_blank"
  />
</template>

Orientation

Use the orientation prop to change the orientation of the feature. Defaults to horizontal.

Theme
Customize Pohon UI with your own colors, fonts, and more.
<template>
  <PPageFeature
    orientation="vertical"
    title="Theme"
    description="Customize Pohon UI with your own colors, fonts, and more."
    icon="i-lucide-swatch-book"
  />
</template>

API

Props

Prop Default Type
as
'div'
any

The element or component this component should render as.

icon
any

The icon displayed next to the title when orientation is horizontal and above the title when orientation is vertical.

title
string
description
string
orientation
'horizontal'
"horizontal" | "vertical"

The orientation of the page feature.

to
string | et | X
target
null | "_blank" | "_parent" | "_self" | "_top" | string
ui
{ root?: SlotClass; wrapper?: SlotClass; leading?: SlotClass; leadingIcon?: SlotClass; title?: SlotClass; description?: SlotClass; }

Slots

Slot Type
leading
{ ui: object; }
title
{}
description
{}
default
{}

Theme

app.config.ts
export default defineAppConfig({
  ui: {
    pageFeature: {
      slots: {
        root: 'relative rounded-sm',
        wrapper: '',
        leading: 'inline-flex items-center justify-center',
        leadingIcon: 'size-5 shrink-0 color-primary',
        title: 'text-base text-pretty font-600 color-text-highlighted',
        description: 'text-[15px] text-pretty color-text-muted'
      },
      variants: {
        orientation: {
          horizontal: {
            root: 'flex items-start gap-2.5',
            leading: 'p-0.5'
          },
          vertical: {
            leading: 'mb-2.5'
          }
        },
        to: {
          true: {
            root: [
              'outline-primary/25 has-focus-visible:outline-3',
              'transition'
            ]
          }
        },
        title: {
          true: {
            description: 'mt-1'
          }
        }
      }
    }
  }
})
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: {
        pageFeature: {
          slots: {
            root: 'relative rounded-sm',
            wrapper: '',
            leading: 'inline-flex items-center justify-center',
            leadingIcon: 'size-5 shrink-0 color-primary',
            title: 'text-base text-pretty font-600 color-text-highlighted',
            description: 'text-[15px] text-pretty color-text-muted'
          },
          variants: {
            orientation: {
              horizontal: {
                root: 'flex items-start gap-2.5',
                leading: 'p-0.5'
              },
              vertical: {
                leading: 'mb-2.5'
              }
            },
            to: {
              true: {
                root: [
                  'outline-primary/25 has-focus-visible:outline-3',
                  'transition'
                ]
              }
            },
            title: {
              true: {
                description: 'mt-1'
              }
            }
          }
        }
      }
    })
  ]
})

Changelog

No recent changes

PageCTA

A call to action section to display in your pages.

PageGrid

A responsive grid system for displaying content in a flexible layout.