Headings
Use headings to organize your content and make it easier to read.
H1 to H3 headings get anchor links and show up in the table of contents for easy navigation.
You can control anchor links generation (for example, for AI chat interfaces) in your
nuxt.config.ts:nuxt.config.ts
export default defineNuxtConfig({
content: {
renderer: {
anchorLinks: false
}
}
})
You can control behavior of toc generation in your
nuxt.config.ts:nuxt.config.ts
export default defineNuxtConfig({
content: {
build: {
markdown: {
toc: {
depth: 3
}
}
}
}
})
Heading 1
Bitrix24 UI
# Bitrix24 UI
app.config.ts
export default defineAppConfig({
b24ui: {
prose: {
h1: {
slots: {
base: 'relative mb-2 scroll-mt-[calc(45px+24px+var(--topbar-height))] lg:scroll-mt-[calc(22px+15px+var(--topbar-height))] text-(length:--ui-font-size-5xl) [&>code]:text-(length:--ui-font-size-4xl)/7',
link: 'inline-flex items-center gap-[8px]'
},
variants: {
accent: {
default: 'text-(--b24ui-typography-label-color)',
accent: 'text-(--ui-color-accent-brand-blue)',
'accent-more': 'text-(--ui-color-accent-soft-element-blue)',
less: 'text-(--b24ui-typography-description-color)',
'less-more': 'text-(--ui-color-design-plain-na-content-secondary)'
}
},
defaultVariants: {
accent: 'default'
}
}
}
}
})
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: {
prose: {
h1: {
slots: {
base: 'relative mb-2 scroll-mt-[calc(45px+24px+var(--topbar-height))] lg:scroll-mt-[calc(22px+15px+var(--topbar-height))] text-(length:--ui-font-size-5xl) [&>code]:text-(length:--ui-font-size-4xl)/7',
link: 'inline-flex items-center gap-[8px]'
},
variants: {
accent: {
default: 'text-(--b24ui-typography-label-color)',
accent: 'text-(--ui-color-accent-brand-blue)',
'accent-more': 'text-(--ui-color-accent-soft-element-blue)',
less: 'text-(--b24ui-typography-description-color)',
'less-more': 'text-(--ui-color-design-plain-na-content-secondary)'
}
},
defaultVariants: {
accent: 'default'
}
}
}
}
})
]
})
Heading 2
## What's new?
app.config.ts
export default defineAppConfig({
b24ui: {
prose: {
h2: {
slots: {
base: 'relative mb-2 scroll-mt-[calc(48px+45px+24px+var(--topbar-height))] lg:scroll-mt-[calc(48px+22px+15px+var(--topbar-height))] text-(length:--ui-font-size-4xl) [&>a>code]:text-(length:--ui-font-size-3xl)/7 [&>a]:focus-visible:outline-(--ui-color-accent-main-primary) hover:[&>a>code]:text-(--ui-color-accent-main-primary-alt-2) hover:[&>a>code]:bg-(--ui-color-design-selection-bg) hover:[&>a>code]:ring-(--ui-color-design-selection-stroke)',
leading: 'absolute style-tinted-no-accent-1 -ms-[18px] top-[12px] opacity-0 group-hover:opacity-100 group-focus:opacity-100 p-[1px] bg-(--b24ui-background) ring-(length:--b24ui-border-width) ring-(--b24ui-border-color) text-(--b24ui-color) hover:text-(--ui-color-accent-main-primary-alt-2) rounded-(--ui-border-radius-2xs) hidden lg:flex transition',
leadingIcon: 'size-[14px] shrink-0',
link: 'group lg:ps-2 lg:-ms-2'
},
variants: {
accent: {
default: 'text-(--b24ui-typography-label-color)',
accent: 'text-(--ui-color-accent-brand-blue)',
'accent-more': 'text-(--ui-color-accent-soft-element-blue)',
less: 'text-(--b24ui-typography-description-color)',
'less-more': 'text-(--ui-color-design-plain-na-content-secondary)'
}
},
defaultVariants: {
accent: 'default'
}
}
}
}
})
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: {
prose: {
h2: {
slots: {
base: 'relative mb-2 scroll-mt-[calc(48px+45px+24px+var(--topbar-height))] lg:scroll-mt-[calc(48px+22px+15px+var(--topbar-height))] text-(length:--ui-font-size-4xl) [&>a>code]:text-(length:--ui-font-size-3xl)/7 [&>a]:focus-visible:outline-(--ui-color-accent-main-primary) hover:[&>a>code]:text-(--ui-color-accent-main-primary-alt-2) hover:[&>a>code]:bg-(--ui-color-design-selection-bg) hover:[&>a>code]:ring-(--ui-color-design-selection-stroke)',
leading: 'absolute style-tinted-no-accent-1 -ms-[18px] top-[12px] opacity-0 group-hover:opacity-100 group-focus:opacity-100 p-[1px] bg-(--b24ui-background) ring-(length:--b24ui-border-width) ring-(--b24ui-border-color) text-(--b24ui-color) hover:text-(--ui-color-accent-main-primary-alt-2) rounded-(--ui-border-radius-2xs) hidden lg:flex transition',
leadingIcon: 'size-[14px] shrink-0',
link: 'group lg:ps-2 lg:-ms-2'
},
variants: {
accent: {
default: 'text-(--b24ui-typography-label-color)',
accent: 'text-(--ui-color-accent-brand-blue)',
'accent-more': 'text-(--ui-color-accent-soft-element-blue)',
less: 'text-(--b24ui-typography-description-color)',
'less-more': 'text-(--ui-color-design-plain-na-content-secondary)'
}
},
defaultVariants: {
accent: 'default'
}
}
}
}
})
]
})
Heading 3
### Enhanced components
app.config.ts
export default defineAppConfig({
b24ui: {
prose: {
h3: {
slots: {
base: 'relative mb-2 scroll-mt-[calc(32px+45px+24px+var(--topbar-height))] lg:scroll-mt-[calc(32px+22px+15px+var(--topbar-height))] text-(length:--ui-font-size-3xl) [&>a>code]:text-(length:--ui-font-size-2xl)/6 [&>a]:focus-visible:outline-(--ui-color-accent-main-primary) hover:[&>a>code]:text-(--ui-color-accent-main-primary-alt-2) hover:[&>a>code]:bg-(--ui-color-design-selection-bg) hover:[&>a>code]:ring-(--ui-color-design-selection-stroke)',
leading: 'absolute style-tinted-no-accent-1 -ms-[18px] top-[9px] opacity-0 group-hover:opacity-100 group-focus:opacity-100 p-[1px] bg-(--b24ui-background) ring-(length:--b24ui-border-width) ring-(--b24ui-border-color) text-(--b24ui-color) hover:text-(--ui-color-accent-main-primary-alt-2) rounded-(--ui-border-radius-2xs) hidden lg:flex transition',
leadingIcon: 'size-[14px] shrink-0',
link: 'group lg:ps-2 lg:-ms-2'
},
variants: {
accent: {
default: 'text-(--b24ui-typography-label-color)',
accent: 'text-(--ui-color-accent-brand-blue)',
'accent-more': 'text-(--ui-color-accent-soft-element-blue)',
less: 'text-(--b24ui-typography-description-color)',
'less-more': 'text-(--ui-color-design-plain-na-content-secondary)'
}
},
defaultVariants: {
accent: 'default'
}
}
}
}
})
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: {
prose: {
h3: {
slots: {
base: 'relative mb-2 scroll-mt-[calc(32px+45px+24px+var(--topbar-height))] lg:scroll-mt-[calc(32px+22px+15px+var(--topbar-height))] text-(length:--ui-font-size-3xl) [&>a>code]:text-(length:--ui-font-size-2xl)/6 [&>a]:focus-visible:outline-(--ui-color-accent-main-primary) hover:[&>a>code]:text-(--ui-color-accent-main-primary-alt-2) hover:[&>a>code]:bg-(--ui-color-design-selection-bg) hover:[&>a>code]:ring-(--ui-color-design-selection-stroke)',
leading: 'absolute style-tinted-no-accent-1 -ms-[18px] top-[9px] opacity-0 group-hover:opacity-100 group-focus:opacity-100 p-[1px] bg-(--b24ui-background) ring-(length:--b24ui-border-width) ring-(--b24ui-border-color) text-(--b24ui-color) hover:text-(--ui-color-accent-main-primary-alt-2) rounded-(--ui-border-radius-2xs) hidden lg:flex transition',
leadingIcon: 'size-[14px] shrink-0',
link: 'group lg:ps-2 lg:-ms-2'
},
variants: {
accent: {
default: 'text-(--b24ui-typography-label-color)',
accent: 'text-(--ui-color-accent-brand-blue)',
'accent-more': 'text-(--ui-color-accent-soft-element-blue)',
less: 'text-(--b24ui-typography-description-color)',
'less-more': 'text-(--ui-color-design-plain-na-content-secondary)'
}
},
defaultVariants: {
accent: 'default'
}
}
}
}
})
]
})
Heading 4
#### Getting started
app.config.ts
export default defineAppConfig({
b24ui: {
prose: {
h4: {
slots: {
base: 'relative mb-2 scroll-mt-[calc(24px+45px+24px+var(--topbar-height))] lg:scroll-mt-[calc(24px+22px+15px+var(--topbar-height))] text-(length:--ui-font-size-2xl) [&>a>code]:text-(length:--ui-font-size-xl)/5 [&>a]:focus-visible:outline-(--ui-color-accent-main-primary) hover:[&>a>code]:text-(--ui-color-accent-main-primary-alt-2) hover:[&>a>code]:bg-(--ui-color-design-selection-bg) hover:[&>a>code]:ring-(--ui-color-design-selection-stroke)',
leading: 'absolute style-tinted-no-accent-1 -ms-[18px] top-[6px] opacity-0 group-hover:opacity-100 group-focus:opacity-100 p-[1px] bg-(--b24ui-background) ring-(length:--b24ui-border-width) ring-(--b24ui-border-color) text-(--b24ui-color) hover:text-(--ui-color-accent-main-primary-alt-2) rounded-(--ui-border-radius-2xs) hidden lg:flex transition',
leadingIcon: 'size-[14px] shrink-0',
link: 'group lg:ps-2 lg:-ms-2'
},
variants: {
accent: {
default: 'text-(--b24ui-typography-label-color)',
accent: 'text-(--ui-color-accent-brand-blue)',
'accent-more': 'text-(--ui-color-accent-soft-element-blue)',
less: 'text-(--b24ui-typography-description-color)',
'less-more': 'text-(--ui-color-design-plain-na-content-secondary)'
}
},
defaultVariants: {
accent: 'default'
}
}
}
}
})
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: {
prose: {
h4: {
slots: {
base: 'relative mb-2 scroll-mt-[calc(24px+45px+24px+var(--topbar-height))] lg:scroll-mt-[calc(24px+22px+15px+var(--topbar-height))] text-(length:--ui-font-size-2xl) [&>a>code]:text-(length:--ui-font-size-xl)/5 [&>a]:focus-visible:outline-(--ui-color-accent-main-primary) hover:[&>a>code]:text-(--ui-color-accent-main-primary-alt-2) hover:[&>a>code]:bg-(--ui-color-design-selection-bg) hover:[&>a>code]:ring-(--ui-color-design-selection-stroke)',
leading: 'absolute style-tinted-no-accent-1 -ms-[18px] top-[6px] opacity-0 group-hover:opacity-100 group-focus:opacity-100 p-[1px] bg-(--b24ui-background) ring-(length:--b24ui-border-width) ring-(--b24ui-border-color) text-(--b24ui-color) hover:text-(--ui-color-accent-main-primary-alt-2) rounded-(--ui-border-radius-2xs) hidden lg:flex transition',
leadingIcon: 'size-[14px] shrink-0',
link: 'group lg:ps-2 lg:-ms-2'
},
variants: {
accent: {
default: 'text-(--b24ui-typography-label-color)',
accent: 'text-(--ui-color-accent-brand-blue)',
'accent-more': 'text-(--ui-color-accent-soft-element-blue)',
less: 'text-(--b24ui-typography-description-color)',
'less-more': 'text-(--ui-color-design-plain-na-content-secondary)'
}
},
defaultVariants: {
accent: 'default'
}
}
}
}
})
]
})
Heading 5
Comprehensive Tools for Customer Relationship Management
##### Comprehensive Tools for Customer Relationship Management
app.config.ts
export default defineAppConfig({
b24ui: {
prose: {
h5: {
slots: {
base: 'relative mb-2 scroll-mt-[calc(24px+45px+24px+var(--topbar-height))] lg:scroll-mt-[calc(24px+22px+15px+var(--topbar-height))] text-(length:--ui-font-size-xl)'
},
variants: {
accent: {
default: 'text-(--b24ui-typography-label-color)',
accent: 'text-(--ui-color-accent-brand-blue)',
'accent-more': 'text-(--ui-color-accent-soft-element-blue)',
less: 'text-(--b24ui-typography-description-color)',
'less-more': 'text-(--ui-color-design-plain-na-content-secondary)'
}
},
defaultVariants: {
accent: 'default'
}
}
}
}
})
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: {
prose: {
h5: {
slots: {
base: 'relative mb-2 scroll-mt-[calc(24px+45px+24px+var(--topbar-height))] lg:scroll-mt-[calc(24px+22px+15px+var(--topbar-height))] text-(length:--ui-font-size-xl)'
},
variants: {
accent: {
default: 'text-(--b24ui-typography-label-color)',
accent: 'text-(--ui-color-accent-brand-blue)',
'accent-more': 'text-(--ui-color-accent-soft-element-blue)',
less: 'text-(--b24ui-typography-description-color)',
'less-more': 'text-(--ui-color-design-plain-na-content-secondary)'
}
},
defaultVariants: {
accent: 'default'
}
}
}
}
})
]
})
Heading 6
In-Depth Reporting and Sales Campaign Analysis
###### In-Depth Reporting and Sales Campaign Analysis
app.config.ts
export default defineAppConfig({
b24ui: {
prose: {
h6: {
slots: {
base: 'relative mb-2 scroll-mt-[calc(24px+45px+24px+var(--topbar-height))] lg:scroll-mt-[calc(24px+22px+15px+var(--topbar-height))] text-(length:--ui-font-size-md)'
},
variants: {
accent: {
default: 'text-(--b24ui-typography-label-color)',
accent: 'text-(--ui-color-accent-brand-blue)',
'accent-more': 'text-(--ui-color-accent-soft-element-blue)',
less: 'text-(--b24ui-typography-description-color)',
'less-more': 'text-(--ui-color-design-plain-na-content-secondary)'
}
},
defaultVariants: {
accent: 'default'
}
}
}
}
})
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: {
prose: {
h6: {
slots: {
base: 'relative mb-2 scroll-mt-[calc(24px+45px+24px+var(--topbar-height))] lg:scroll-mt-[calc(24px+22px+15px+var(--topbar-height))] text-(length:--ui-font-size-md)'
},
variants: {
accent: {
default: 'text-(--b24ui-typography-label-color)',
accent: 'text-(--ui-color-accent-brand-blue)',
'accent-more': 'text-(--ui-color-accent-soft-element-blue)',
less: 'text-(--b24ui-typography-description-color)',
'less-more': 'text-(--ui-color-design-plain-na-content-secondary)'
}
},
defaultVariants: {
accent: 'default'
}
}
}
}
})
]
})
Text formatting
Structure your content with clear paragraphs and consistent text formatting for better readability.
Paragraph
Bitrix24 UI provides a comprehensive collection of Vue components, composables and utilities for building modern, accessible applications with consistent design and enhanced user experience.
Bitrix24 UI provides a comprehensive collection of Vue components, composables and utilities for building modern, accessible applications with consistent design and enhanced user experience.
app.config.ts
export default defineAppConfig({
b24ui: {
prose: {
p: {
slots: {
base: 'mb-2 last:mb-0 leading-relaxed text-pretty'
},
variants: {
small: {
true: 'text-(length:--ui-font-size-3xs) leading-(--ui-font-line-height-2xs)',
false: 'text-(length:--ui-font-size-xl) leading-(--ui-font-line-height-lg)'
},
accent: {
default: 'text-(--b24ui-typography-label-color)',
accent: 'text-(--ui-color-accent-brand-blue)',
'accent-more': 'text-(--ui-color-accent-soft-element-blue)',
less: 'text-(--b24ui-typography-description-color)',
'less-more': 'text-(--ui-color-design-plain-na-content-secondary)'
}
},
defaultVariants: {
small: false,
accent: 'default'
}
}
}
}
})
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: {
prose: {
p: {
slots: {
base: 'mb-2 last:mb-0 leading-relaxed text-pretty'
},
variants: {
small: {
true: 'text-(length:--ui-font-size-3xs) leading-(--ui-font-line-height-2xs)',
false: 'text-(length:--ui-font-size-xl) leading-(--ui-font-line-height-lg)'
},
accent: {
default: 'text-(--b24ui-typography-label-color)',
accent: 'text-(--ui-color-accent-brand-blue)',
'accent-more': 'text-(--ui-color-accent-soft-element-blue)',
less: 'text-(--b24ui-typography-description-color)',
'less-more': 'text-(--ui-color-design-plain-na-content-secondary)'
}
},
defaultVariants: {
small: false,
accent: 'default'
}
}
}
}
})
]
})
Strong
Strong text
**Strong text**
app.config.ts
export default defineAppConfig({
b24ui: {
prose: {
strong: {
slots: {
base: ''
}
}
}
}
})
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: {
prose: {
strong: {
slots: {
base: ''
}
}
}
}
})
]
})
Emphasis
Emphasized text
*Emphasized text*
app.config.ts
export default defineAppConfig({
b24ui: {
prose: {
em: {
slots: {
base: ''
}
}
}
}
})
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: {
prose: {
em: {
slots: {
base: ''
}
}
}
}
})
]
})
Links
To create a link, wrap the link text in brackets followed by the URL in parentheses. Works for both external and internal links.
[Bitrix24 documentation](https://bitrix24.com)
app.config.ts
export default defineAppConfig({
b24ui: {
prose: {
a: {
slots: {
base: 'cursor-pointer text-(--ui-color-accent-main-link) dark:text-(--ui-color-blue-40) hover:underline underline-offset-2 hover:text-(--ui-color-accent-main-primary-alt) dark:hover:text-(--ui-color-blue-50) focus-visible:outline-info-text focus-visible:has-[>code]:outline-0 transition-colors [&>code]:transition-colors hover:[&>code]:text-(--ui-color-accent-main-primary-alt-2) hover:[&>code]:bg-(--ui-color-design-selection-bg) hover:[&>code]:ring-(--ui-color-design-selection-stroke) focus-visible:[&>code]:ring-(--ui-color-design-selection-stroke) focus-visible:[&>code]:text-(--ui-color-accent-main-primary-alt-2)'
}
}
}
}
})
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: {
prose: {
a: {
slots: {
base: 'cursor-pointer text-(--ui-color-accent-main-link) dark:text-(--ui-color-blue-40) hover:underline underline-offset-2 hover:text-(--ui-color-accent-main-primary-alt) dark:hover:text-(--ui-color-blue-50) focus-visible:outline-info-text focus-visible:has-[>code]:outline-0 transition-colors [&>code]:transition-colors hover:[&>code]:text-(--ui-color-accent-main-primary-alt-2) hover:[&>code]:bg-(--ui-color-design-selection-bg) hover:[&>code]:ring-(--ui-color-design-selection-stroke) focus-visible:[&>code]:ring-(--ui-color-design-selection-stroke) focus-visible:[&>code]:text-(--ui-color-accent-main-primary-alt-2)'
}
}
}
}
})
]
})
Blockquotes
Use blockquotes to highlight important information or quotes.
Bitrix24 UI automatically adapts to your theme settings, ensuring consistent typography across your entire application.
> Bitrix24 UI automatically adapts to your theme settings, ensuring consistent typography across your entire application.
app.config.ts
export default defineAppConfig({
b24ui: {
prose: {
blockquote: {
slots: {
base: 'mb-2 border-s-4 border-(--ui-color-accent-soft-element-blue) ps-4 italic'
}
}
}
}
})
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: {
prose: {
blockquote: {
slots: {
base: 'mb-2 border-s-4 border-(--ui-color-accent-soft-element-blue) ps-4 italic'
}
}
}
}
})
]
})
Horizontal rules
Use horizontal rules to visually separate content sections.
---
app.config.ts
export default defineAppConfig({
b24ui: {
prose: {
hr: {
slots: {
base: 'my-4 border-t border-(--ui-color-divider-default)'
}
}
}
}
})
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: {
prose: {
hr: {
slots: {
base: 'my-4 border-t border-(--ui-color-divider-default)'
}
}
}
}
})
]
})