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
Bitrix24. Your ultimate workspace.
An all-in-one free platform to manage your team and run your sales, Bitrix24 is designed to be seamlessly integrated into all your business processes and help you manage them with the highest precision and efficiency.
Title
Use the title prop to set the title of the section.
Bitrix24. Your ultimate workspace.
<template>
<B24PageSection title="Bitrix24. Your ultimate workspace." />
</template>
Description
Use the description prop to set the description of the section.
Bitrix24. Your ultimate workspace.
An all-in-one free platform to manage your team and run your sales, Bitrix24 is designed to be seamlessly integrated into all your business processes and help you manage them with the highest precision and efficiency.
<template>
<B24PageSection
title="Bitrix24. Your ultimate workspace."
description="An all-in-one free platform to manage your team and run your sales, Bitrix24 is designed to be seamlessly integrated into all your business processes and help you manage them with the highest precision and efficiency."
/>
</template>
Headline
Use the headline prop to set the headline of the section.
Features
Bitrix24. Your ultimate workspace.
An all-in-one free platform to manage your team and run your sales, Bitrix24 is designed to be seamlessly integrated into all your business processes and help you manage them with the highest precision and efficiency.
<template>
<B24PageSection
title="Bitrix24. Your ultimate workspace."
description="An all-in-one free platform to manage your team and run your sales, Bitrix24 is designed to be seamlessly integrated into all your business processes and help you manage them with the highest precision and efficiency."
headline="Features"
/>
</template>
Icon
Use the icon prop to set the icon of the section.
Bitrix24. Your ultimate workspace.
An all-in-one free platform to manage your team and run your sales, Bitrix24 is designed to be seamlessly integrated into all your business processes and help you manage them with the highest precision and efficiency.
<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>
<template>
<B24PageSection
title="Bitrix24. Your ultimate workspace."
description="An all-in-one free platform to manage your team and run your sales, Bitrix24 is designed to be seamlessly integrated into all your business processes and help you manage them with the highest precision and efficiency."
:icon="RocketIcon"
/>
</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?: stringdescription?: stringicon?: IconComponentorientation?: 'horizontal' | 'vertical'
You can pass any property from the Link component such as to, target, etc.
Features
Bitrix24. Your ultimate workspace.
An all-in-one free platform to manage your team and run your sales, Bitrix24 is designed to be seamlessly integrated into all your business processes and help you manage them with the highest precision and efficiency.
Links
Use the links prop to display a list of Button under the description.
<script setup lang="ts">
import type { ButtonProps } from '@bitrix24/b24ui-nuxt'
const links = ref<ButtonProps[]>([
{
label: 'Get started',
to: '/docs/getting-started/',
color: 'air-secondary-accent-2'
},
{
label: 'Explore',
to: '/docs/components/',
color: 'air-primary'
}
])
</script>
<template>
<B24PageSection
title="Bitrix24. Your ultimate workspace."
description="An all-in-one free platform to manage your team and run your sales, Bitrix24 is designed to be seamlessly integrated into all your business processes and help you manage them with the highest precision and efficiency."
:links="links"
/>
</template>
Orientation
Use the orientation prop to change the orientation with the default slot. Defaults to vertical.
Bitrix24. Your ultimate workspace.
An all-in-one free platform to manage your team and run your sales, Bitrix24 is designed to be seamlessly integrated into all your business processes and help you manage them with the highest precision and efficiency.
<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
import type { PageFeatureProps, ButtonProps } from '@bitrix24/b24ui-nuxt'
const features = ref<PageFeatureProps[]>([
{
title: 'Online workspace for the whole team',
description:
'Through its wide variety of communication and collaboration tools, Bitrix24 enables teams to work efficiently and smoothly wherever they are – at home, in the office, or on the go.',
to: 'https://www.bitrix24.com/tools/communications/'
},
{
title: 'Free CRM software for your business',
description:
'Sell more. Sell better. Sell faster with Bitrix24 a single platform to cover all your needs.',
to: 'https://www.bitrix24.com/tools/crm/'
},
{
title: 'Free task management software for your business',
description:
'Set tasks, manage deadlines, collect reports, track KPIs, and run projects from wherever you are.',
to: 'https://www.bitrix24.com/tools/tasks_and_projects/'
}
])
const links = ref<ButtonProps[]>([
{
label: 'Explore',
to: '/docs/components/',
color: 'air-primary'
}
])
</script>
<template>
<B24PageSection
title="Bitrix24. Your ultimate workspace."
description="An all-in-one free platform to manage your team and run your sales, Bitrix24 is designed to be seamlessly integrated into all your business processes and help you manage them with the highest precision and efficiency."
:icon="RocketIcon"
orientation="horizontal"
:features="features"
:links="links"
>
<img
src="/b24ui/assets/demo/communications-main.png.webp"
width="352"
height="647"
alt="Illustration"
class="w-full rounded-lg"
/>
</B24PageSection>
</template>
Reverse
Use the reverse prop to reverse the orientation of the default slot.
Bitrix24. Your ultimate workspace.
An all-in-one free platform to manage your team and run your sales, Bitrix24 is designed to be seamlessly integrated into all your business processes and help you manage them with the highest precision and efficiency.
<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
import type { PageFeatureProps, ButtonProps } from '@bitrix24/b24ui-nuxt'
const features = ref<PageFeatureProps[]>([
{
title: 'Online workspace for the whole team',
description:
'Through its wide variety of communication and collaboration tools, Bitrix24 enables teams to work efficiently and smoothly wherever they are – at home, in the office, or on the go.',
to: 'https://www.bitrix24.com/tools/communications/'
},
{
title: 'Free CRM software for your business',
description:
'Sell more. Sell better. Sell faster with Bitrix24 a single platform to cover all your needs.',
to: 'https://www.bitrix24.com/tools/crm/'
},
{
title: 'Free task management software for your business',
description:
'Set tasks, manage deadlines, collect reports, track KPIs, and run projects from wherever you are.',
to: 'https://www.bitrix24.com/tools/tasks_and_projects/'
}
])
const links = ref<ButtonProps[]>([
{
label: 'Explore',
to: '/docs/components/',
color: 'air-primary'
}
])
</script>
<template>
<B24PageSection
reverse
title="Bitrix24. Your ultimate workspace."
description="An all-in-one free platform to manage your team and run your sales, Bitrix24 is designed to be seamlessly integrated into all your business processes and help you manage them with the highest precision and efficiency."
:icon="RocketIcon"
orientation="horizontal"
:features="features"
:links="links"
>
<img
src="/b24ui/assets/demo/communications-main.png.webp"
width="352"
height="647"
alt="Illustration"
class="w-full rounded-lg"
/>
</B24PageSection>
</template>
API
Props
Slots
Theme
app.config.ts
export default defineAppConfig({
b24ui: {
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-(--ui-color-accent-main-primary)',
headline: 'mb-3',
title: 'text-(length:--ui-font-size-3xl) sm:text-(length:--ui-font-size-4xl) lg:text-(length:--ui-font-size-5xl) text-pretty tracking-tight font-(--ui-font-weight-bold) text-(--b24ui-typography-label-color)',
description: 'text-(length:--ui-font-size-md) sm:text-(length:--ui-font-size-lg) text-(--b24ui-typography-description-color)',
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-(--ui-font-weight-semi-bold) text-(--ui-color-accent-main-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 bitrix24UIPluginVite from '@bitrix24/b24ui-nuxt/vite'
export default defineConfig({
plugins: [
vue(),
bitrix24UIPluginVite({
b24ui: {
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-(--ui-color-accent-main-primary)',
headline: 'mb-3',
title: 'text-(length:--ui-font-size-3xl) sm:text-(length:--ui-font-size-4xl) lg:text-(length:--ui-font-size-5xl) text-pretty tracking-tight font-(--ui-font-weight-bold) text-(--b24ui-typography-label-color)',
description: 'text-(length:--ui-font-size-md) sm:text-(length:--ui-font-size-lg) text-(--b24ui-typography-description-color)',
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-(--ui-font-weight-semi-bold) text-(--ui-color-accent-main-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'
}
}
]
}
}
})
]
})