v2.4.1

PageCard

A pre-styled card component featuring a title, description, and optional link.
GitHub
Demo
Nuxt UI

Usage

The PageCard component provides a flexible way to display content in a card with an illustration in the default slot.

Online workspace for the whole team
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.
Online workspace for the whole team
<script setup lang="ts">
import CopilotIcon from '@bitrix24/b24icons-vue/outline/CopilotIcon'
</script>

<template>
  <B24PageCard
    class="w-96"
    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."
    :icon="CopilotIcon"
  >
    <img
      src="/b24ui/assets/demo/communications-main.png.webp"
      alt="Online workspace for the whole team"
      class="w-full"
    >
  </B24PageCard>
</template>
Use the PageGrid, PageColumns or PageList components to display multiple PageCard.

Title

Use the title prop to set the title of the card.

Online workspace for the whole team
<template>
  <B24PageCard title="Online workspace for the whole team" />
</template>

Description

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

Online workspace for the whole team
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.
<template>
  <B24PageCard
    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."
  />
</template>

Icon

Use the icon prop to set the Icon of the card.

Online workspace for the whole team
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.
<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>

<template>
  <B24PageCard
    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."
    :icon="RocketIcon"
  />
</template>

Link

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

Online workspace for the whole team
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.
<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>

<template>
  <B24PageCard
    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."
    :icon="RocketIcon"
    to="https://www.bitrix24.com/tools/communications/"
    target="_blank"
  />
</template>

Variant

Use the variant prop to change the style of the card.

Online workspace for the whole team
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.
<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>

<template>
  <B24PageCard
    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."
    :icon="RocketIcon"
    to="https://www.bitrix24.com/tools/communications/"
    target="_blank"
    variant="outline-no-accent"
  />
</template>

Orientation

Use the orientation prop to change the orientation with the default slot. Defaults to vertical.

Online workspace for the whole team
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.
<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>

<template>
  <B24PageCard
    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."
    :icon="RocketIcon"
    orientation="horizontal"
  >
    <img
      src="/b24ui/assets/demo/communications-main.png.webp"
      alt="Online workspace for the whole team"
      class="aspect-3/2 object-cover"
    />
  </B24PageCard>
</template>

Reverse

Use the reverse prop to reverse the orientation of the default slot.

Online workspace for the whole team
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.
<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>

<template>
  <B24PageCard
    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."
    :icon="RocketIcon"
    orientation="horizontal"
    reverse
  >
    <img
      src="/b24ui/assets/demo/communications-main.png.webp"
      alt="Online workspace for the whole team"
      class="aspect-3/2 object-cover"
    />
  </B24PageCard>
</template>

Highlight

Use the highlight and highlight-color props to display a highlighted border around the card.

Online workspace for the whole team
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.
<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>

<template>
  <B24PageCard
    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."
    :icon="RocketIcon"
    orientation="horizontal"
    highlight
    highlight-color="air-primary"
  >
    <img
      src="/b24ui/assets/demo/communications-main.png.webp"
      alt="Online workspace for the whole team"
      class="aspect-3/2 object-cover"
    />
  </B24PageCard>
</template>

Examples

As a testimonial

Use the User component in the header or footer slot to make the card look like a testimonial.

“Nuxt on Cloudflare infra with minimal effort - this is huge!”
Evan You

Evan You

Author of Vue.js and Vite

<script setup lang="ts">
const testimonial = ref({
  user: {
    name: 'Evan You',
    description: 'Author of Vue.js and Vite',
    avatar: {
      src: 'https://avatars.githubusercontent.com/u/499550?v=4',
      alt: 'Evan You'
    }
  },
  quote: '“Nuxt on Cloudflare infra with minimal effort - this is huge!”'
})
</script>

<template>
  <B24PageCard :description="testimonial.quote" class="w-60">
    <template #footer>
      <B24User v-bind="testimonial.user" />
    </template>
  </B24PageCard>
</template>
You can use the PageColumns component to display multiple PageCard in a multi-column layout.

API

Props

Prop Default Type
as'div'any

The element or component this component should render as.

iconIconComponent

The icon displayed above the title.

title string
description string
orientation'vertical' "vertical" | "horizontal"

The orientation of the page card.

reversefalseboolean

Reverse the order of the default slot.

highlightboolean

Display a line around the page card.

highlightColor'air-primary'"air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-warning" | "air-primary-copilot"
variant'outline' "filled" | "filled-success" | "filled-alert" | "filled-warning" | "filled-copilot" | "filled-no-accent" | "filled-black" | "tinted" | "tinted-alt" | "tinted-accent-1" | "tinted-success" | "tinted-alert" | "tinted-warning" | "tinted-no-accent" | "outline" | "outline-alt" | "outline-accent" | "outline-accent-2" | "outline-success" | "outline-alert" | "outline-warning" | "outline-copilot" | "outline-no-accent" | "plain" | "plain-accent" | "plain-no-accent" | "selection"
to string | kt | Tt
target null | "_blank" | "_parent" | "_self" | "_top" | string & {}
b24ui { root?: ClassNameValue; container?: ClassNameValue; wrapper?: ClassNameValue; header?: ClassNameValue; body?: ClassNameValue; footer?: ClassNameValue; leading?: ClassNameValue; leadingIcon?: ClassNameValue; title?: ClassNameValue; description?: ClassNameValue; }

Slots

Slot Type
header{}
body{}
leading{ b24ui: object; }
title{}
description{}
footer{}
default{}

Theme

app.config.ts
export default defineAppConfig({
  b24ui: {
    pageCard: {
      slots: {
        root: 'relative flex rounded-lg',
        container: 'relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6',
        wrapper: 'flex flex-col flex-1 items-start',
        header: 'mb-4',
        body: 'flex-1',
        footer: 'pt-4 mt-auto',
        leading: 'inline-flex items-center mb-2.5',
        leadingIcon: 'size-5 shrink-0',
        title: 'text-(length:--ui-font-size-2xl)/[normal] text-pretty font-(--ui-font-weight-semi-bold)',
        description: 'text-(length:--ui-font-size-lg)/[normal] text-pretty'
      },
      variants: {
        orientation: {
          horizontal: {
            container: 'lg:grid-cols-2 lg:items-center'
          },
          vertical: {
            container: ''
          }
        },
        reverse: {
          true: {
            wrapper: 'order-last'
          }
        },
        variant: {
          filled: {
            root: 'bg-(--ui-color-design-filled-bg) border border-(--ui-color-design-filled-stroke) border-(length:--ui-design-filled-stroke-weight) text-(--ui-color-design-filled-content)',
            leadingIcon: 'text-(--ui-color-design-filled-content-icon)',
            title: 'text-(--ui-color-design-filled-content)',
            description: 'text-(--ui-color-design-filled-content-secondary)'
          },
          'filled-success': {
            root: 'bg-(--ui-color-design-filled-success-bg) border border-(--ui-color-design-filled-success-stroke) border-(length:--ui-design-filled-success-stroke-weight) text-(--ui-color-design-filled-success-content)',
            leadingIcon: 'text-(--ui-color-design-filled-success-content-icon)',
            title: 'text-(--ui-color-design-filled-success-content)',
            description: 'text-(--ui-color-design-filled-success-content)'
          },
          'filled-alert': {
            root: 'bg-(--ui-color-design-filled-alert-bg) border border-(--ui-color-design-filled-alert-stroke) border-(length:--ui-design-filled-alert-stroke-weight) text-(--ui-color-design-filled-alert-content)',
            leadingIcon: 'text-(--ui-color-design-filled-alert-content-icon)',
            title: 'text-(--ui-color-design-filled-alert-content)',
            description: 'text-(--ui-color-design-filled-alert-content-secondary)'
          },
          'filled-warning': {
            root: 'bg-(--ui-color-design-filled-warning-bg) border border-(--ui-color-design-filled-warning-stroke) border-(length:--ui-design-filled-warning-stroke-weight) text-(--ui-color-design-filled-warning-content)',
            leadingIcon: 'text-(--ui-color-design-filled-warning-content-icon)',
            title: 'text-(--ui-color-design-filled-warning-content)',
            description: 'text-(--ui-color-design-filled-warning-content)'
          },
          'filled-copilot': {
            root: 'bg-(--ui-color-design-filled-copilot-bg) border border-(--ui-color-design-filled-copilot-stroke) border-(length:--ui-design-filled-copilot-stroke-weight) text-(--ui-color-design-filled-copilot-content)',
            leadingIcon: 'text-(--ui-color-design-filled-copilot-content-icon)',
            title: 'text-(--ui-color-design-filled-copilot-content)',
            description: 'text-(--ui-color-design-filled-copilot-content)'
          },
          'filled-no-accent': {
            root: 'bg-(--ui-color-design-filled-na-bg) border border-(--ui-color-design-filled-na-stroke) border-(length:--ui-design-filled-na-stroke-weight) text-(--ui-color-design-filled-na-content)',
            leadingIcon: 'text-(--ui-color-design-filled-na-content-icon)',
            title: 'text-(--ui-color-design-filled-na-content)',
            description: 'text-(--ui-color-design-filled-na-content)'
          },
          'filled-black': {
            root: 'bg-(--ui-color-design-filled-black-bg) border border-(--ui-color-design-filled-black-stroke) border-(length:--ui-design-filled-black-stroke-weight) text-(--ui-color-design-filled-black-content)',
            leadingIcon: 'text-(--ui-color-design-filled-black-content-icon)',
            title: 'text-(--ui-color-design-filled-black-content)',
            description: 'text-(--ui-color-design-filled-black-content)'
          },
          tinted: {
            root: 'bg-(--ui-color-design-tinted-bg) border border-(--ui-color-design-tinted-stroke) border-(length:--ui-design-tinted-stroke-weight) text-(--ui-color-design-tinted-content)',
            leadingIcon: 'text-(--ui-color-design-tinted-content-icon)',
            title: 'text-(--ui-color-design-tinted-content)',
            description: 'text-(--ui-color-design-tinted-content)'
          },
          'tinted-alt': {
            root: 'bg-(--ui-color-design-tinted-bg-alt) border border-(--ui-color-design-tinted-stroke) border-(length:--ui-design-tinted-stroke-weight) text-(--ui-color-design-tinted-content)',
            leadingIcon: 'text-(--ui-color-design-tinted-content-icon)',
            title: 'text-(--ui-color-design-tinted-content)',
            description: 'text-(--ui-color-design-tinted-content)'
          },
          'tinted-accent-1': {
            root: 'bg-(--ui-color-design-tinted-a1-bg) border border-(--ui-color-design-tinted-a1-stroke) border-(length:--ui-design-tinted-a1-stroke-weight) text-(--ui-color-design-tinted-a1-content)',
            leadingIcon: 'text-(--ui-color-design-tinted-a1-content-icon)',
            title: 'text-(--ui-color-design-tinted-a1-content)',
            description: 'text-(--ui-color-design-tinted-a1-content)'
          },
          'tinted-success': {
            root: 'bg-(--ui-color-design-tinted-success-bg) border border-(--ui-color-design-tinted-success-stroke) border-(length:--ui-design-tinted-success-stroke-weight) text-(--ui-color-design-tinted-success-content)',
            leadingIcon: 'text-(--ui-color-design-tinted-success-content-icon)',
            title: 'text-(--ui-color-design-tinted-success-content)',
            description: 'text-(--ui-color-design-tinted-success-content)'
          },
          'tinted-alert': {
            root: 'bg-(--ui-color-design-tinted-alert-bg) border border-(--ui-color-design-tinted-alert-stroke) border-(length:--ui-design-tinted-alert-stroke-weight) text-(--ui-color-design-tinted-alert-content)',
            leadingIcon: 'text-(--ui-color-design-tinted-alert-content-icon)',
            title: 'text-(--ui-color-design-tinted-alert-content)',
            description: 'text-(--ui-color-design-tinted-alert-content)'
          },
          'tinted-warning': {
            root: 'bg-(--ui-color-design-tinted-warning-bg) border border-(--ui-color-design-tinted-warning-stroke) border-(length:--ui-design-tinted-warning-stroke-weight) text-(--ui-color-design-tinted-warning-content)',
            leadingIcon: 'text-(--ui-color-design-tinted-warning-content-icon)',
            title: 'text-(--ui-color-design-tinted-warning-content)',
            description: 'text-(--ui-color-design-tinted-warning-content)'
          },
          'tinted-no-accent': {
            root: 'bg-(--ui-color-design-tinted-na-bg) border border-(--ui-color-design-tinted-na-stroke) border-(length:--ui-design-tinted-na-stroke-weight) text-(--ui-color-design-tinted-na-content)',
            leadingIcon: 'text-(--ui-color-design-tinted-na-content-icon)',
            title: 'text-(--ui-color-design-tinted-na-content)',
            description: 'text-(--ui-color-design-tinted-na-content)'
          },
          outline: {
            root: 'bg-(--ui-color-design-outline-bg) border border-(--ui-color-design-outline-stroke) border-(length:--ui-design-outline-stroke-weight) text-(--ui-color-design-outline-content)',
            leadingIcon: 'text-(--ui-color-design-outline-content-icon)',
            title: 'text-(--ui-color-design-outline-content)',
            description: 'text-(--ui-color-design-outline-content-secondary)'
          },
          'outline-alt': {
            root: 'bg-(--ui-color-design-outline-bg-alt) border border-(--ui-color-design-outline-content-divider) border-(length:--ui-design-outline-stroke-weight-alt) text-(--ui-color-design-outline-content)',
            leadingIcon: 'text-(--ui-color-design-outline-content-icon)',
            title: 'text-(--ui-color-design-outline-content)',
            description: 'text-(--ui-color-design-outline-content-secondary)'
          },
          'outline-accent': {
            root: 'bg-(--ui-color-design-outline-a1-bg) border border-(--ui-color-design-outline-a1-stroke) border-(length:--ui-design-outline-a1-stroke-weight) text-(--ui-color-design-outline-a1-content)',
            leadingIcon: 'text-(--ui-color-design-outline-a1-content-icon)',
            title: 'text-(--ui-color-design-outline-a1-content)',
            description: 'text-(--ui-color-design-outline-a1-content)'
          },
          'outline-accent-2': {
            root: 'bg-(--ui-color-design-outline-a2-bg) border border-(--ui-color-design-outline-a2-stroke) border-(length:--ui-design-outline-a2-stroke-weight) text-(--ui-color-design-outline-a2-content)',
            leadingIcon: 'text-(--ui-color-design-outline-a2-content-icon)',
            title: 'text-(--ui-color-design-outline-a2-content)',
            description: 'text-(--ui-color-design-outline-a2-content)'
          },
          'outline-success': {
            root: 'bg-(--ui-color-design-outline-success-bg) border border-(--ui-color-design-outline-success-stroke) border-(length:--ui-design-outline-success-stroke-weight) text-(--ui-color-design-outline-success-content)',
            leadingIcon: 'text-(--ui-color-design-outline-success-content-icon)',
            title: 'text-(--ui-color-design-outline-success-content)',
            description: 'text-(--ui-color-design-outline-success-content)'
          },
          'outline-alert': {
            root: 'bg-(--ui-color-design-outline-alert-bg) border border-(--ui-color-design-outline-alert-stroke) border-(length:--ui-design-outline-alert-stroke-weight) text-(--ui-color-design-outline-alert-content)',
            leadingIcon: 'text-(--ui-color-design-outline-alert-content-icon)',
            title: 'text-(--ui-color-design-outline-alert-content)',
            description: 'text-(--ui-color-design-outline-alert-content)'
          },
          'outline-warning': {
            root: 'bg-(--ui-color-design-outline-warning-bg) border border-(--ui-color-design-outline-warning-stroke) border-(length:--ui-design-outline-warning-stroke-weight) text-(--ui-color-design-outline-warning-content)',
            leadingIcon: 'text-(--ui-color-design-outline-warning-content-icon)',
            title: 'text-(--ui-color-design-outline-warning-content)',
            description: 'text-(--ui-color-design-outline-warning-content)'
          },
          'outline-copilot': {
            root: 'bg-(--ui-color-design-outline-copilot-bg) border border-(--ui-color-design-outline-copilot-stroke) border-(length:--ui-design-outline-copilot-stroke-weight) text-(--ui-color-design-outline-copilot-content)',
            leadingIcon: 'text-(--ui-color-design-outline-copilot-content-icon)',
            title: 'text-(--ui-color-design-outline-copilot-content)',
            description: 'text-(--ui-color-design-outline-copilot-content)'
          },
          'outline-no-accent': {
            root: 'bg-(--ui-color-design-outline-na-bg) border border-(--ui-color-design-outline-na-stroke) border-(length:--ui-design-outline-na-stroke-weight) text-(--ui-color-design-outline-na-content)',
            leadingIcon: 'text-(--ui-color-design-outline-na-content-icon)',
            title: 'text-(--ui-color-design-outline-na-content)',
            description: 'text-(--ui-color-design-outline-na-content)'
          },
          plain: {
            root: 'bg-(--ui-color-design-plain-bg) border border-(--ui-color-design-plain-stroke) border-(length:--ui-design-plain-stroke-weight) text-(--ui-color-design-plain-content)',
            leadingIcon: 'text-(--ui-color-design-plain-content-icon)',
            title: 'text-(--ui-color-design-plain-content)',
            description: 'text-(--ui-color-design-plain-content)'
          },
          'plain-accent': {
            root: 'bg-(--ui-color-design-plain-a-bg) border border-(--ui-color-design-plain-a-stroke) border-(length:--ui-design-plain-a-stroke-weight) text-(--ui-color-design-plain-a-content)',
            leadingIcon: 'text-(--ui-color-design-plain-a-content-icon)',
            title: 'text-(--ui-color-design-plain-a-content)',
            description: 'text-(--ui-color-design-plain-a-content)'
          },
          'plain-no-accent': {
            root: 'bg-(--ui-color-design-plain-na-bg) border border-(--ui-color-design-plain-na-stroke) border-(length:--ui-design-plain-na-stroke-weight) text-(--ui-color-design-plain-na-content)',
            leadingIcon: 'text-(--ui-color-design-plain-na-content-icon)',
            title: 'text-(--ui-color-design-plain-na-content)',
            description: 'text-(--ui-color-design-plain-na-content)'
          },
          selection: {
            root: 'bg-(--ui-color-design-selection-bg) border border-(--ui-color-design-selection-stroke) border-(length:--ui-design-selection-stroke-weight) text-(--ui-color-design-selection-content)',
            leadingIcon: 'text-(--ui-color-design-selection-content-icon)',
            title: 'text-(--ui-color-design-selection-content)',
            description: 'text-(--ui-color-design-selection-content)'
          }
        },
        to: {
          true: {
            root: 'has-focus-visible:ring-2 has-focus-visible:ring-(--ui-color-design-filled-stroke) transition'
          }
        },
        title: {
          true: {
            description: 'mt-1'
          }
        },
        highlight: {
          true: {
            root: 'ring-2'
          }
        },
        highlightColor: {
          'air-primary': '',
          'air-primary-success': '',
          'air-primary-alert': '',
          'air-primary-copilot': '',
          'air-primary-warning': ''
        }
      },
      compoundVariants: [
        {
          variant: 'filled',
          to: true,
          class: {
            root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-filled-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
          }
        },
        {
          variant: 'filled-success',
          to: true,
          class: {
            root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-filled-success-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
          }
        },
        {
          variant: 'filled-alert',
          to: true,
          class: {
            root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-filled-alert-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
          }
        },
        {
          variant: 'filled-warning',
          to: true,
          class: {
            root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-filled-warning-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
          }
        },
        {
          variant: 'filled-copilot',
          to: true,
          class: {
            root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-filled-copilot-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
          }
        },
        {
          variant: 'filled-no-accent',
          to: true,
          class: {
            root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-filled-na-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
          }
        },
        {
          variant: 'filled-black',
          to: true,
          class: {
            root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-filled-black-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
          }
        },
        {
          variant: 'tinted',
          to: true,
          class: {
            root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-tinted-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
          }
        },
        {
          variant: 'tinted-alt',
          to: true,
          class: {
            root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-tinted-bg-alt)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
          }
        },
        {
          variant: 'tinted-accent-1',
          to: true,
          class: {
            root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-tinted-a1-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
          }
        },
        {
          variant: 'tinted-success',
          to: true,
          class: {
            root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-tinted-success-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
          }
        },
        {
          variant: 'tinted-alert',
          to: true,
          class: {
            root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-tinted-alert-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
          }
        },
        {
          variant: 'tinted-warning',
          to: true,
          class: {
            root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-tinted-warning-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
          }
        },
        {
          variant: 'tinted-no-accent',
          to: true,
          class: {
            root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-tinted-na-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
          }
        },
        {
          variant: 'outline',
          to: true,
          class: {
            root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-outline-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
          }
        },
        {
          variant: 'outline-alt',
          to: true,
          class: {
            root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-outline-bg-alt)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
          }
        },
        {
          variant: 'outline-accent',
          to: true,
          class: {
            root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-outline-a1-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
          }
        },
        {
          variant: 'outline-accent-2',
          to: true,
          class: {
            root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-outline-a2-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
          }
        },
        {
          variant: 'outline-success',
          to: true,
          class: {
            root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-outline-success-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
          }
        },
        {
          variant: 'outline-alert',
          to: true,
          class: {
            root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-outline-alert-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
          }
        },
        {
          variant: 'outline-warning',
          to: true,
          class: {
            root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-outline-warning-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
          }
        },
        {
          variant: 'outline-copilot',
          to: true,
          class: {
            root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-outline-copilot-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
          }
        },
        {
          variant: 'outline-no-accent',
          to: true,
          class: {
            root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-outline-na-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
          }
        },
        {
          variant: 'plain',
          to: true,
          class: {
            root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-plain-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
          }
        },
        {
          variant: 'plain-accent',
          to: true,
          class: {
            root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-plain-a-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
          }
        },
        {
          variant: 'plain-no-accent',
          to: true,
          class: {
            root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-plain-na-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
          }
        },
        {
          variant: 'selection',
          to: true,
          class: {
            root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-selection-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
          }
        },
        {
          highlightColor: 'air-primary',
          highlight: true,
          class: {
            root: 'ring-(--ui-color-design-filled-stroke)'
          }
        }
      ],
      defaultVariants: {
        variant: 'outline',
        highlightColor: 'air-primary'
      }
    }
  }
})
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: {
        pageCard: {
          slots: {
            root: 'relative flex rounded-lg',
            container: 'relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6',
            wrapper: 'flex flex-col flex-1 items-start',
            header: 'mb-4',
            body: 'flex-1',
            footer: 'pt-4 mt-auto',
            leading: 'inline-flex items-center mb-2.5',
            leadingIcon: 'size-5 shrink-0',
            title: 'text-(length:--ui-font-size-2xl)/[normal] text-pretty font-(--ui-font-weight-semi-bold)',
            description: 'text-(length:--ui-font-size-lg)/[normal] text-pretty'
          },
          variants: {
            orientation: {
              horizontal: {
                container: 'lg:grid-cols-2 lg:items-center'
              },
              vertical: {
                container: ''
              }
            },
            reverse: {
              true: {
                wrapper: 'order-last'
              }
            },
            variant: {
              filled: {
                root: 'bg-(--ui-color-design-filled-bg) border border-(--ui-color-design-filled-stroke) border-(length:--ui-design-filled-stroke-weight) text-(--ui-color-design-filled-content)',
                leadingIcon: 'text-(--ui-color-design-filled-content-icon)',
                title: 'text-(--ui-color-design-filled-content)',
                description: 'text-(--ui-color-design-filled-content-secondary)'
              },
              'filled-success': {
                root: 'bg-(--ui-color-design-filled-success-bg) border border-(--ui-color-design-filled-success-stroke) border-(length:--ui-design-filled-success-stroke-weight) text-(--ui-color-design-filled-success-content)',
                leadingIcon: 'text-(--ui-color-design-filled-success-content-icon)',
                title: 'text-(--ui-color-design-filled-success-content)',
                description: 'text-(--ui-color-design-filled-success-content)'
              },
              'filled-alert': {
                root: 'bg-(--ui-color-design-filled-alert-bg) border border-(--ui-color-design-filled-alert-stroke) border-(length:--ui-design-filled-alert-stroke-weight) text-(--ui-color-design-filled-alert-content)',
                leadingIcon: 'text-(--ui-color-design-filled-alert-content-icon)',
                title: 'text-(--ui-color-design-filled-alert-content)',
                description: 'text-(--ui-color-design-filled-alert-content-secondary)'
              },
              'filled-warning': {
                root: 'bg-(--ui-color-design-filled-warning-bg) border border-(--ui-color-design-filled-warning-stroke) border-(length:--ui-design-filled-warning-stroke-weight) text-(--ui-color-design-filled-warning-content)',
                leadingIcon: 'text-(--ui-color-design-filled-warning-content-icon)',
                title: 'text-(--ui-color-design-filled-warning-content)',
                description: 'text-(--ui-color-design-filled-warning-content)'
              },
              'filled-copilot': {
                root: 'bg-(--ui-color-design-filled-copilot-bg) border border-(--ui-color-design-filled-copilot-stroke) border-(length:--ui-design-filled-copilot-stroke-weight) text-(--ui-color-design-filled-copilot-content)',
                leadingIcon: 'text-(--ui-color-design-filled-copilot-content-icon)',
                title: 'text-(--ui-color-design-filled-copilot-content)',
                description: 'text-(--ui-color-design-filled-copilot-content)'
              },
              'filled-no-accent': {
                root: 'bg-(--ui-color-design-filled-na-bg) border border-(--ui-color-design-filled-na-stroke) border-(length:--ui-design-filled-na-stroke-weight) text-(--ui-color-design-filled-na-content)',
                leadingIcon: 'text-(--ui-color-design-filled-na-content-icon)',
                title: 'text-(--ui-color-design-filled-na-content)',
                description: 'text-(--ui-color-design-filled-na-content)'
              },
              'filled-black': {
                root: 'bg-(--ui-color-design-filled-black-bg) border border-(--ui-color-design-filled-black-stroke) border-(length:--ui-design-filled-black-stroke-weight) text-(--ui-color-design-filled-black-content)',
                leadingIcon: 'text-(--ui-color-design-filled-black-content-icon)',
                title: 'text-(--ui-color-design-filled-black-content)',
                description: 'text-(--ui-color-design-filled-black-content)'
              },
              tinted: {
                root: 'bg-(--ui-color-design-tinted-bg) border border-(--ui-color-design-tinted-stroke) border-(length:--ui-design-tinted-stroke-weight) text-(--ui-color-design-tinted-content)',
                leadingIcon: 'text-(--ui-color-design-tinted-content-icon)',
                title: 'text-(--ui-color-design-tinted-content)',
                description: 'text-(--ui-color-design-tinted-content)'
              },
              'tinted-alt': {
                root: 'bg-(--ui-color-design-tinted-bg-alt) border border-(--ui-color-design-tinted-stroke) border-(length:--ui-design-tinted-stroke-weight) text-(--ui-color-design-tinted-content)',
                leadingIcon: 'text-(--ui-color-design-tinted-content-icon)',
                title: 'text-(--ui-color-design-tinted-content)',
                description: 'text-(--ui-color-design-tinted-content)'
              },
              'tinted-accent-1': {
                root: 'bg-(--ui-color-design-tinted-a1-bg) border border-(--ui-color-design-tinted-a1-stroke) border-(length:--ui-design-tinted-a1-stroke-weight) text-(--ui-color-design-tinted-a1-content)',
                leadingIcon: 'text-(--ui-color-design-tinted-a1-content-icon)',
                title: 'text-(--ui-color-design-tinted-a1-content)',
                description: 'text-(--ui-color-design-tinted-a1-content)'
              },
              'tinted-success': {
                root: 'bg-(--ui-color-design-tinted-success-bg) border border-(--ui-color-design-tinted-success-stroke) border-(length:--ui-design-tinted-success-stroke-weight) text-(--ui-color-design-tinted-success-content)',
                leadingIcon: 'text-(--ui-color-design-tinted-success-content-icon)',
                title: 'text-(--ui-color-design-tinted-success-content)',
                description: 'text-(--ui-color-design-tinted-success-content)'
              },
              'tinted-alert': {
                root: 'bg-(--ui-color-design-tinted-alert-bg) border border-(--ui-color-design-tinted-alert-stroke) border-(length:--ui-design-tinted-alert-stroke-weight) text-(--ui-color-design-tinted-alert-content)',
                leadingIcon: 'text-(--ui-color-design-tinted-alert-content-icon)',
                title: 'text-(--ui-color-design-tinted-alert-content)',
                description: 'text-(--ui-color-design-tinted-alert-content)'
              },
              'tinted-warning': {
                root: 'bg-(--ui-color-design-tinted-warning-bg) border border-(--ui-color-design-tinted-warning-stroke) border-(length:--ui-design-tinted-warning-stroke-weight) text-(--ui-color-design-tinted-warning-content)',
                leadingIcon: 'text-(--ui-color-design-tinted-warning-content-icon)',
                title: 'text-(--ui-color-design-tinted-warning-content)',
                description: 'text-(--ui-color-design-tinted-warning-content)'
              },
              'tinted-no-accent': {
                root: 'bg-(--ui-color-design-tinted-na-bg) border border-(--ui-color-design-tinted-na-stroke) border-(length:--ui-design-tinted-na-stroke-weight) text-(--ui-color-design-tinted-na-content)',
                leadingIcon: 'text-(--ui-color-design-tinted-na-content-icon)',
                title: 'text-(--ui-color-design-tinted-na-content)',
                description: 'text-(--ui-color-design-tinted-na-content)'
              },
              outline: {
                root: 'bg-(--ui-color-design-outline-bg) border border-(--ui-color-design-outline-stroke) border-(length:--ui-design-outline-stroke-weight) text-(--ui-color-design-outline-content)',
                leadingIcon: 'text-(--ui-color-design-outline-content-icon)',
                title: 'text-(--ui-color-design-outline-content)',
                description: 'text-(--ui-color-design-outline-content-secondary)'
              },
              'outline-alt': {
                root: 'bg-(--ui-color-design-outline-bg-alt) border border-(--ui-color-design-outline-content-divider) border-(length:--ui-design-outline-stroke-weight-alt) text-(--ui-color-design-outline-content)',
                leadingIcon: 'text-(--ui-color-design-outline-content-icon)',
                title: 'text-(--ui-color-design-outline-content)',
                description: 'text-(--ui-color-design-outline-content-secondary)'
              },
              'outline-accent': {
                root: 'bg-(--ui-color-design-outline-a1-bg) border border-(--ui-color-design-outline-a1-stroke) border-(length:--ui-design-outline-a1-stroke-weight) text-(--ui-color-design-outline-a1-content)',
                leadingIcon: 'text-(--ui-color-design-outline-a1-content-icon)',
                title: 'text-(--ui-color-design-outline-a1-content)',
                description: 'text-(--ui-color-design-outline-a1-content)'
              },
              'outline-accent-2': {
                root: 'bg-(--ui-color-design-outline-a2-bg) border border-(--ui-color-design-outline-a2-stroke) border-(length:--ui-design-outline-a2-stroke-weight) text-(--ui-color-design-outline-a2-content)',
                leadingIcon: 'text-(--ui-color-design-outline-a2-content-icon)',
                title: 'text-(--ui-color-design-outline-a2-content)',
                description: 'text-(--ui-color-design-outline-a2-content)'
              },
              'outline-success': {
                root: 'bg-(--ui-color-design-outline-success-bg) border border-(--ui-color-design-outline-success-stroke) border-(length:--ui-design-outline-success-stroke-weight) text-(--ui-color-design-outline-success-content)',
                leadingIcon: 'text-(--ui-color-design-outline-success-content-icon)',
                title: 'text-(--ui-color-design-outline-success-content)',
                description: 'text-(--ui-color-design-outline-success-content)'
              },
              'outline-alert': {
                root: 'bg-(--ui-color-design-outline-alert-bg) border border-(--ui-color-design-outline-alert-stroke) border-(length:--ui-design-outline-alert-stroke-weight) text-(--ui-color-design-outline-alert-content)',
                leadingIcon: 'text-(--ui-color-design-outline-alert-content-icon)',
                title: 'text-(--ui-color-design-outline-alert-content)',
                description: 'text-(--ui-color-design-outline-alert-content)'
              },
              'outline-warning': {
                root: 'bg-(--ui-color-design-outline-warning-bg) border border-(--ui-color-design-outline-warning-stroke) border-(length:--ui-design-outline-warning-stroke-weight) text-(--ui-color-design-outline-warning-content)',
                leadingIcon: 'text-(--ui-color-design-outline-warning-content-icon)',
                title: 'text-(--ui-color-design-outline-warning-content)',
                description: 'text-(--ui-color-design-outline-warning-content)'
              },
              'outline-copilot': {
                root: 'bg-(--ui-color-design-outline-copilot-bg) border border-(--ui-color-design-outline-copilot-stroke) border-(length:--ui-design-outline-copilot-stroke-weight) text-(--ui-color-design-outline-copilot-content)',
                leadingIcon: 'text-(--ui-color-design-outline-copilot-content-icon)',
                title: 'text-(--ui-color-design-outline-copilot-content)',
                description: 'text-(--ui-color-design-outline-copilot-content)'
              },
              'outline-no-accent': {
                root: 'bg-(--ui-color-design-outline-na-bg) border border-(--ui-color-design-outline-na-stroke) border-(length:--ui-design-outline-na-stroke-weight) text-(--ui-color-design-outline-na-content)',
                leadingIcon: 'text-(--ui-color-design-outline-na-content-icon)',
                title: 'text-(--ui-color-design-outline-na-content)',
                description: 'text-(--ui-color-design-outline-na-content)'
              },
              plain: {
                root: 'bg-(--ui-color-design-plain-bg) border border-(--ui-color-design-plain-stroke) border-(length:--ui-design-plain-stroke-weight) text-(--ui-color-design-plain-content)',
                leadingIcon: 'text-(--ui-color-design-plain-content-icon)',
                title: 'text-(--ui-color-design-plain-content)',
                description: 'text-(--ui-color-design-plain-content)'
              },
              'plain-accent': {
                root: 'bg-(--ui-color-design-plain-a-bg) border border-(--ui-color-design-plain-a-stroke) border-(length:--ui-design-plain-a-stroke-weight) text-(--ui-color-design-plain-a-content)',
                leadingIcon: 'text-(--ui-color-design-plain-a-content-icon)',
                title: 'text-(--ui-color-design-plain-a-content)',
                description: 'text-(--ui-color-design-plain-a-content)'
              },
              'plain-no-accent': {
                root: 'bg-(--ui-color-design-plain-na-bg) border border-(--ui-color-design-plain-na-stroke) border-(length:--ui-design-plain-na-stroke-weight) text-(--ui-color-design-plain-na-content)',
                leadingIcon: 'text-(--ui-color-design-plain-na-content-icon)',
                title: 'text-(--ui-color-design-plain-na-content)',
                description: 'text-(--ui-color-design-plain-na-content)'
              },
              selection: {
                root: 'bg-(--ui-color-design-selection-bg) border border-(--ui-color-design-selection-stroke) border-(length:--ui-design-selection-stroke-weight) text-(--ui-color-design-selection-content)',
                leadingIcon: 'text-(--ui-color-design-selection-content-icon)',
                title: 'text-(--ui-color-design-selection-content)',
                description: 'text-(--ui-color-design-selection-content)'
              }
            },
            to: {
              true: {
                root: 'has-focus-visible:ring-2 has-focus-visible:ring-(--ui-color-design-filled-stroke) transition'
              }
            },
            title: {
              true: {
                description: 'mt-1'
              }
            },
            highlight: {
              true: {
                root: 'ring-2'
              }
            },
            highlightColor: {
              'air-primary': '',
              'air-primary-success': '',
              'air-primary-alert': '',
              'air-primary-copilot': '',
              'air-primary-warning': ''
            }
          },
          compoundVariants: [
            {
              variant: 'filled',
              to: true,
              class: {
                root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-filled-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
              }
            },
            {
              variant: 'filled-success',
              to: true,
              class: {
                root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-filled-success-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
              }
            },
            {
              variant: 'filled-alert',
              to: true,
              class: {
                root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-filled-alert-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
              }
            },
            {
              variant: 'filled-warning',
              to: true,
              class: {
                root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-filled-warning-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
              }
            },
            {
              variant: 'filled-copilot',
              to: true,
              class: {
                root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-filled-copilot-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
              }
            },
            {
              variant: 'filled-no-accent',
              to: true,
              class: {
                root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-filled-na-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
              }
            },
            {
              variant: 'filled-black',
              to: true,
              class: {
                root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-filled-black-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
              }
            },
            {
              variant: 'tinted',
              to: true,
              class: {
                root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-tinted-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
              }
            },
            {
              variant: 'tinted-alt',
              to: true,
              class: {
                root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-tinted-bg-alt)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
              }
            },
            {
              variant: 'tinted-accent-1',
              to: true,
              class: {
                root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-tinted-a1-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
              }
            },
            {
              variant: 'tinted-success',
              to: true,
              class: {
                root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-tinted-success-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
              }
            },
            {
              variant: 'tinted-alert',
              to: true,
              class: {
                root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-tinted-alert-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
              }
            },
            {
              variant: 'tinted-warning',
              to: true,
              class: {
                root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-tinted-warning-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
              }
            },
            {
              variant: 'tinted-no-accent',
              to: true,
              class: {
                root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-tinted-na-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
              }
            },
            {
              variant: 'outline',
              to: true,
              class: {
                root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-outline-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
              }
            },
            {
              variant: 'outline-alt',
              to: true,
              class: {
                root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-outline-bg-alt)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
              }
            },
            {
              variant: 'outline-accent',
              to: true,
              class: {
                root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-outline-a1-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
              }
            },
            {
              variant: 'outline-accent-2',
              to: true,
              class: {
                root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-outline-a2-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
              }
            },
            {
              variant: 'outline-success',
              to: true,
              class: {
                root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-outline-success-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
              }
            },
            {
              variant: 'outline-alert',
              to: true,
              class: {
                root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-outline-alert-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
              }
            },
            {
              variant: 'outline-warning',
              to: true,
              class: {
                root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-outline-warning-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
              }
            },
            {
              variant: 'outline-copilot',
              to: true,
              class: {
                root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-outline-copilot-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
              }
            },
            {
              variant: 'outline-no-accent',
              to: true,
              class: {
                root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-outline-na-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
              }
            },
            {
              variant: 'plain',
              to: true,
              class: {
                root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-plain-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
              }
            },
            {
              variant: 'plain-accent',
              to: true,
              class: {
                root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-plain-a-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
              }
            },
            {
              variant: 'plain-no-accent',
              to: true,
              class: {
                root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-plain-na-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
              }
            },
            {
              variant: 'selection',
              to: true,
              class: {
                root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-selection-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
              }
            },
            {
              highlightColor: 'air-primary',
              highlight: true,
              class: {
                root: 'ring-(--ui-color-design-filled-stroke)'
              }
            }
          ],
          defaultVariants: {
            variant: 'outline',
            highlightColor: 'air-primary'
          }
        }
      }
    })
  ]
})
Some colors in compoundVariants are omitted for readability. Check out the source code on GitHub.

PageBody

A container for the main content of the page.

PageColumns

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

Releases
 Published under MIT License.

Copyright © 2024-present Bitrix24