v2.7.1

Card

Render the content within a card component comprising a header, body, and footer section.
GitHub
Demo
Nuxt UI

Usage

Use the header, default and footer slots to add content to the Card.

<template>
  <B24Card>
    <template #header>
      <Placeholder class="h-8" />
    </template>

    <Placeholder class="h-32" />

    <template #footer>
      <Placeholder class="h-8" />
    </template>
  </B24Card>
</template>

Title

Use the title prop to set the title of the Card's header.

Card with title
<template>
  <B24Card title="Card with title" class="w-full">
    <Placeholder class="h-32" />
  </B24Card>
</template>

Description

Use the description prop to set the description of the Card's header.

Card with description
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<template>
  <B24Card
    title="Card with description"
    description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
    class="w-full"
  >
    <Placeholder class="h-32" />
  </B24Card>
</template>

Variant

Use the variant prop to change the variant of the Card.

<template>
  <B24Card variant="outline">
    <template #header>
      <Placeholder class="h-8" />
    </template>

    <Placeholder class="h-32" />

    <template #footer>
      <Placeholder class="h-8" />
    </template>
  </B24Card>
</template>

Examples

Sales dynamics widget

Real-world example: a CRM dashboard widget assembled from Card (with the filled-copilot variant for the purple accent), Button, Tooltip and a small CSS grid for the metrics rows. The highlighted "Conversion" row is just a translucent overlay with bg-white/15 over the same card.

Repeat sales dynamics
Total deals created: 10
Today: 10 deals
CountAmount
Active deals10$46,500
Won deals1$10,000
Conversion 10%17.7%
<script setup lang="ts">
import RepeatIcon from '@bitrix24/b24icons-vue/outline/RepeatIcon'
import SettingsIcon from '@bitrix24/b24icons-vue/outline/SettingsIcon'
import FeedbackIcon from '@bitrix24/b24icons-vue/outline/FeedbackIcon'
import Info1Icon from '@bitrix24/b24icons-vue/main/Info1Icon'

const rows = [
  { label: 'Active deals', count: 10, amount: '$46,500' },
  { label: 'Won deals', count: 1, amount: '$10,000' }
]

const highlight = {
  label: 'Conversion',
  count: '10%',
  amount: '17.7%',
  info: 'Today vs. last 30 days'
}
</script>

<template>
  <B24Card
    variant="filled-copilot"
    class="max-w-md"
    :b24ui="{
      root: 'edge-dark rounded-2xl bg-[radial-gradient(110.42%_110.42%_at_-10.42%_31.25%,var(--ui-color-copilot-bg-content-3)_0%,var(--ui-color-copilot-bg-content-2)_58.65%,var(--ui-color-copilot-bg-content-1)_100%)]'
    }"
  >
    <template #header>
      <div class="flex items-start justify-between gap-4">
        <div class="min-w-0">
          <div class="text-(length:--ui-font-size-2xl)/[normal] font-(--ui-font-weight-semi-bold)">
            Repeat sales dynamics
          </div>
          <div class="text-(length:--ui-font-size-md) opacity-90">
            Total deals created: 10
          </div>
          <div class="text-(length:--ui-font-size-md) opacity-90">
            Today: 10 deals
          </div>
        </div>

        <B24Button
          rounded
          color="air-secondary-accent"
          label="Last 30 days"
          :trailing-icon="RepeatIcon"
        />
      </div>
    </template>

    <div class="flex flex-col gap-2">
      <div class="grid grid-cols-[1fr_auto_auto] gap-x-6 px-3 py-1 text-(length:--ui-font-size-sm) opacity-80">
        <span />
        <span class="text-right min-w-20">Count</span>
        <span class="text-right min-w-24">Amount</span>
      </div>

      <div
        v-for="row in rows"
        :key="row.label"
        class="grid grid-cols-[1fr_auto_auto] gap-x-6 items-center px-3 py-3 rounded-xl bg-white/5"
      >
        <span class="font-(--ui-font-weight-medium)">{{ row.label }}</span>
        <span class="text-right min-w-20">{{ row.count }}</span>
        <span class="text-right min-w-24">{{ row.amount }}</span>
      </div>

      <div class="style-filled-boost grid grid-cols-[1fr_auto_auto] gap-x-6 items-center px-3 py-3 rounded-xl text-(--ui-color-design-filled-boost-content)">
        <span class="font-(--ui-font-weight-medium) inline-flex items-center gap-1">
          {{ highlight.label }}
          <B24Tooltip :text="highlight.info">
            <Info1Icon class="size-4 opacity-80" />
          </B24Tooltip>
        </span>
        <span class="text-right min-w-20">{{ highlight.count }}</span>
        <span class="text-right min-w-24 font-(--ui-font-weight-semi-bold)">{{ highlight.amount }}</span>
      </div>
    </div>

    <template #footer>
      <div class="flex items-center justify-between gap-4">
        <B24Button color="air-secondary-accent" :icon="SettingsIcon" label="Configure" />
        <B24Button color="air-secondary-accent" :icon="FeedbackIcon" label="Feedback" />
      </div>
    </template>
  </B24Card>
</template>

Prompt

Render a CRM dashboard widget with a few metrics and a highlighted KPI row.

API

Props

Prop Default Type
as'div'any

The element or component this component should render as.

title string
description string
variant'outline' "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-alt" | "outline-accent" | "outline-accent-2" | "outline-success" | "outline-alert" | "outline-warning" | "outline-copilot" | "outline-no-accent" | "plain" | "plain-accent" | "plain-no-accent" | "selection"
b24ui { root?: ClassNameValue; header?: ClassNameValue; title?: ClassNameValue; description?: ClassNameValue; body?: ClassNameValue; footer?: ClassNameValue; }

Slots

Slot Type
header{}
title{}
description{}
default{}
footer{}

Theme

https://github.com/bitrix24/b24ui/tree/main/src/theme/card.ts
export default {
  slots: {
    root: 'overflow-hidden rounded-(--ui-border-radius-md)',
    header: 'p-[24px] sm:px-[22px] sm:py-[15px]',
    title: 'font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-semi-bold) mb-0 text-pretty text-(length:--ui-font-size-2xl)/[normal]',
    description: 'mt-1  text-pretty text-(length:--ui-font-size-lg)/[normal] text-pretty',
    body: 'p-[24px] sm:px-[22px] sm:py-[15px]',
    footer: 'p-[24px] sm:px-[22px] sm:py-[15px]'
  },
  variants: {
    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)',
        header: 'border-b border-(--ui-color-design-filled-content-divider) border-b-1',
        footer: 'border-t border-(--ui-color-design-filled-content-divider) border-t-1',
        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)',
        header: 'border-b border-(--ui-color-design-filled-success-content-divider) border-b-1',
        footer: 'border-t border-(--ui-color-design-filled-success-content-divider) border-t-1',
        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)',
        header: 'border-b border-(--ui-color-design-filled-alert-content-divider) border-b-1',
        footer: 'border-t border-(--ui-color-design-filled-alert-content-divider) border-t-1',
        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)',
        header: 'border-b border-(--ui-color-design-filled-warning-content-divider) border-b-1',
        footer: 'border-t border-(--ui-color-design-filled-warning-content-divider) border-t-1',
        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)',
        header: 'border-b border-(--ui-color-design-filled-copilot-content-divider) border-b-1',
        footer: 'border-t border-(--ui-color-design-filled-copilot-content-divider) border-t-1',
        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)',
        header: 'border-b border-(--ui-color-design-filled-na-content-divider) border-b-1',
        footer: 'border-t border-(--ui-color-design-filled-na-content-divider) border-t-1',
        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)',
        header: 'border-b border-(--ui-color-design-filled-black-content-divider) border-b-1',
        footer: 'border-t border-(--ui-color-design-filled-black-content-divider) border-t-1',
        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)',
        header: 'border-b border-(--ui-color-design-tinted-content-divider) border-b-1',
        footer: 'border-t border-(--ui-color-design-tinted-content-divider) border-t-1',
        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)',
        header: 'border-b border-(--ui-color-design-tinted-content-divider) border-b-1',
        footer: 'border-t border-(--ui-color-design-tinted-content-divider) border-t-1',
        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)',
        header: 'border-b border-(--ui-color-design-tinted-a1-content-divider) border-b-1',
        footer: 'border-t border-(--ui-color-design-tinted-a1-content-divider) border-t-1',
        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)',
        header: 'border-b border-(--ui-color-design-tinted-success-content-divider) light:border-(--ui-color-accent-soft-green-1) border-b-1',
        footer: 'border-t border-(--ui-color-design-tinted-success-content-divider) light:border-(--ui-color-accent-soft-green-1) border-t-1',
        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)',
        header: 'border-b border-(--ui-color-design-tinted-alert-content-divider) border-b-1',
        footer: 'border-t border-(--ui-color-design-tinted-alert-content-divider) border-t-1',
        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)',
        header: 'border-b border-(--ui-color-design-tinted-warning-content-divider) border-b-1',
        footer: 'border-t border-(--ui-color-design-tinted-warning-content-divider) border-t-1',
        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)',
        header: 'border-b border-(--ui-color-design-tinted-na-content-divider) border-b-1',
        footer: 'border-t border-(--ui-color-design-tinted-na-content-divider) border-t-1',
        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)',
        header: 'border-b border-(--ui-color-design-outline-content-divider) border-b-1',
        footer: 'border-t border-(--ui-color-design-outline-content-divider) border-t-1',
        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)',
        header: 'border-b border-(--ui-color-design-outline-content-divider) border-b-1',
        footer: 'border-t border-(--ui-color-design-outline-content-divider) border-t-1',
        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)',
        header: 'border-b border-(--ui-color-design-outline-a1-content-divider) border-b-1',
        footer: 'border-t border-(--ui-color-design-outline-a1-content-divider) border-t-1',
        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)',
        header: 'border-b border-(--ui-color-design-outline-a2-content-divider) border-b-1',
        footer: 'border-t border-(--ui-color-design-outline-a2-content-divider) border-t-1',
        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)',
        header: 'border-b border-(--ui-color-design-outline-success-content-divider) border-b-1',
        footer: 'border-t border-(--ui-color-design-outline-success-content-divider) border-t-1',
        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)',
        header: 'border-b border-(--ui-color-design-outline-alert-content-divider) border-b-1',
        footer: 'border-t border-(--ui-color-design-outline-alert-content-divider) border-t-1',
        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)',
        header: 'border-b border-(--ui-color-design-outline-warning-content-divider) light:border-(--ui-color-accent-soft-orange-1) border-b-1',
        footer: 'border-t border-(--ui-color-design-outline-warning-content-divider) light:border-(--ui-color-accent-soft-orange-1) border-t-1',
        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)',
        header: 'border-b border-(--ui-color-design-outline-copilot-content-divider) border-b-1',
        footer: 'border-t border-(--ui-color-design-outline-copilot-content-divider) border-t-1',
        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)',
        header: 'border-b border-(--ui-color-design-outline-na-content-divider) border-b-1',
        footer: 'border-t border-(--ui-color-design-outline-na-content-divider) border-t-1',
        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)',
        header: 'border-b border-(--ui-color-design-plain-content-divider) border-b-1',
        footer: 'border-t border-(--ui-color-design-plain-content-divider) border-t-1',
        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)',
        header: 'border-b border-(--ui-color-design-plain-a-content-divider) border-b-1',
        footer: 'border-t border-(--ui-color-design-plain-a-content-divider) border-t-1',
        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)',
        header: 'border-b border-(--ui-color-design-plain-na-content-divider) border-b-1',
        footer: 'border-t border-(--ui-color-design-plain-na-content-divider) border-t-1',
        title: 'text-(--ui-color-design-plain-na-content)',
        description: 'text-(--ui-color-design-plain-na-content-secondary)'
      },
      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)',
        header: 'border-b border-(--ui-color-design-selection-content-divider) border-b-1',
        footer: 'border-t border-(--ui-color-design-selection-content-divider) border-t-1',
        title: 'text-(--ui-color-design-selection-content)',
        description: 'text-(--ui-color-design-selection-content)'
      }
    }
  },
  defaultVariants: {
    variant: 'outline'
  }
}

Calendar

Chip