Vue PageFeature Component

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.

title

Theme

<template>
  <B24PageFeature title="Theme" />
</template>

Description

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

description

Theme

Customize Bitrix24 UI.

<template>
  <B24PageFeature title="Theme" description="Customize Bitrix24 UI." />
</template>

Icon

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

Theme

Customize Bitrix24 UI.

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>

<template>
  <B24PageFeature title="Theme" description="Customize Bitrix24 UI." :icon="RocketIcon" />
</template>

Link

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

Theme

Customize Bitrix24 UI.

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>

<template>
  <B24PageFeature
    title="Theme"
    description="Customize Bitrix24 UI."
    :icon="RocketIcon"
    to="/docs/getting-started/theme/design-system/"
    target="_blank"
  />
</template>

Orientation

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

orientation

Theme

Customize Bitrix24 UI.

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>

<template>
  <B24PageFeature
    orientation="vertical"
    title="Theme"
    description="Customize Bitrix24 UI."
    :icon="RocketIcon"
  />
</template>

API

Props

Prop	Default	Type
`as`	`'div'`	`any` The element or component this component should render as.
`icon`		`IconComponent` 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 \| kt \| Tt`
`target`		`null \| "_blank" \| "_parent" \| "_self" \| "_top" \| string & {}`
`b24ui`		`{ root?: ClassNameValue; wrapper?: ClassNameValue; leading?: ClassNameValue; leadingIcon?: ClassNameValue; title?: ClassNameValue; description?: ClassNameValue; }`

Slots

Slot	Type
`leading`	`{ b24ui: object; }`
`title`	`{}`
`description`	`{}`
`default`	`{}`

Theme

app.config.ts

export default defineAppConfig({
  b24ui: {
    pageFeature: {
      slots: {
        root: 'relative rounded-sm',
        wrapper: '',
        leading: 'inline-flex items-center justify-center',
        leadingIcon: 'size-5 shrink-0 text-(--ui-color-accent-main-primary)',
        title: 'text-(length:--ui-font-size-md) text-pretty font-(--ui-font-weight-semi-bold) text-(--b24ui-typography-legend-color)',
        description: 'text-(length:--ui-font-size-sm) text-pretty text-(--b24ui-typography-description-color)'
      },
      variants: {
        orientation: {
          horizontal: {
            root: 'flex items-start gap-2.5',
            leading: 'p-0.5'
          },
          vertical: {
            leading: 'mb-2.5'
          }
        },
        to: {
          true: {
            root: 'has-focus-visible:ring-2 has-focus-visible:ring-(--ui-color-accent-soft-element-blue) transition'
          }
        },
        title: {
          true: {
            description: 'mt-1'
          }
        }
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import bitrix24UIPluginVite from '@bitrix24/b24ui-nuxt/vite'

export default defineConfig({
  plugins: [
    vue(),
    bitrix24UIPluginVite({
      b24ui: {
        pageFeature: {
          slots: {
            root: 'relative rounded-sm',
            wrapper: '',
            leading: 'inline-flex items-center justify-center',
            leadingIcon: 'size-5 shrink-0 text-(--ui-color-accent-main-primary)',
            title: 'text-(length:--ui-font-size-md) text-pretty font-(--ui-font-weight-semi-bold) text-(--b24ui-typography-legend-color)',
            description: 'text-(length:--ui-font-size-sm) text-pretty text-(--b24ui-typography-description-color)'
          },
          variants: {
            orientation: {
              horizontal: {
                root: 'flex items-start gap-2.5',
                leading: 'p-0.5'
              },
              vertical: {
                leading: 'mb-2.5'
              }
            },
            to: {
              true: {
                root: 'has-focus-visible:ring-2 has-focus-visible:ring-(--ui-color-accent-soft-element-blue) transition'
              }
            },
            title: {
              true: {
                description: 'mt-1'
              }
            }
          }
        }
      }
    })
  ]
})

PageColumns

A responsive multi-column layout system for organizing content side-by-side.

PageGrid

A responsive grid system for creating flexible content layouts.

PageFeature New