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.
nuxt.config.ts:export default defineNuxtConfig({
content: {
renderer: {
anchorLinks: false
}
}
})
nuxt.config.ts:export default defineNuxtConfig({
content: {
build: {
markdown: {
toc: {
depth: 3
}
}
}
}
})
Heading 1
Bitrix24 UI
# Bitrix24 UI
export default {
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-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 2
## What's new?
export default {
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-4.5 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
export default {
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-4.5 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
export default {
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-4.5 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
export default {
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
export default {
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.
export default {
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**
export default {
slots: {
base: ''
}
}
Emphasis
Emphasized text
*Emphasized text*
export default {
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)
export default {
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.
export default {
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.
---
export default {
slots: {
base: 'my-4 border-t border-(--ui-color-divider-default)'
}
}