Colors
We are still updating this page. Some data may be missing here — we will complete it shortly.
Text
Bitrix24 UI provides Tailwind CSS utility classes for text colors, allowing you to use class names like text-legend or text-description:
DimmedMutedDescriptionLegendLabel
<template>
<span class="text-dimmed">Dimmed</span>
<span class="text-muted">Muted</span>
<span class="text-description">Description</span>
<span class="text-legend">Legend</span>
<span class="text-label">Label</span>
</template>
Background
We are still updating this page. Some data may be missing here — we will complete it shortly.
Border
We are still updating this page. Some data may be missing here — we will complete it shortly.
Radius
We are still updating this page. Some data may be missing here — we will complete it shortly.
Container
We are still updating this page. Some data may be missing here — we will complete it shortly.
Header
Nuxt UI provides a --b24ui-header-height CSS variable that controls the height of the Header component.
:root {
--b24ui-header-height: --spacing(14.5); /* 58px */
}
You can customize this value in your
main.css to adjust header height consistently throughout your application:app/assets/css/main.css
@import "tailwindcss";
@import "@bitrix24/b24ui-nuxt";
:root {
--b24ui-header-height: 96px; /* --spacing(24) */
}
Body
Bitrix24 UI applies default classes on the <body> element of your app for consistent theming across light, edge-light, edge-dark and dark modes:
body {
scrollbar-gutter: stable;
background: var(--air-theme-background);
@apply antialiased font-(family-name:--ui-font-family-system) text-(--b24ui-typography-legend-color) scheme-light dark:scheme-dark edge-light:scheme-light edge-dark:scheme-light
}