Usage
Use markdown in the default slot of the callout component to add eye-catching context to your content.
Use the color props to customize it. You can also pass any property from the <NuxtLink> component.
::callout{color="air-primary" to="/docs/getting-started/installation/nuxt/"}
This is a `callout` with full **markdown** support.
::
Shortcuts
You can also use the note, tip, warning and caution shortcuts with pre-defined icons and colors.
Here's some additional information for you.
Here's a helpful suggestion.
Be careful with this action as it might have unexpected results.
This action cannot be undone.
::note
Here's some additional information.
::
::tip
Here's a helpful suggestion.
::
::warning
Be careful with this action as it might have unexpected results.
::
::caution
This action cannot be undone.
::
API
Props
Slots
Theme
app.config.ts
export default defineAppConfig({
b24ui: {
prose: {
callout: {
slots: {
base: 'group relative block py-xs ps-sm pe-xs gap-2 my-5 last:mb-0 text-(length:--ui-font-size-md)/(--ui-font-line-height-3xs) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) rounded-(--ui-border-radius-md) [&_code]:text-(length:--ui-font-size-sm)/(--ui-font-line-height-sm) [&>div]:my-2.5 [&_ul]:my-2.5 [&_ul]:ps-3 [&_ul]:marker:text-(--b24ui-color) [&_ol]:my-2.5 [&_ol]:ps-3 [&_ol]:marker:text-(--b24ui-color) [&>h1]:text-(--b24ui-color) [&>h2]:text-(--b24ui-color) [&>h3]:text-(--b24ui-color) [&>h4]:text-(--b24ui-color) [&>h5]:text-(--b24ui-color) [&>h6]:text-(--b24ui-color) [&>*]:last:!mb-0 [&_li]:my-1.5 [&_li]:ps-1 [&_li]:text-(length:--ui-font-size-md)/(--ui-font-line-height-3xs) [&_li]:text-(--b24ui-color) [&_a]:underline transition-colors',
icon: 'shrink-0 size-5 inline-block me-[6px] text-(--b24ui-icon) transition-colors',
externalIcon: 'size-4 align-top absolute right-2 top-2 pointer-events-none text-(--b24ui-split-divider-color) transition-colors'
},
variants: {
color: {
'air-primary': {
base: 'style-filled'
},
'air-primary-success': {
base: 'style-filled-success'
},
'air-primary-alert': {
base: 'style-filled-alert'
},
'air-primary-copilot': {
base: 'style-filled-copilot'
},
'air-primary-warning': {
base: 'style-filled-warning'
},
'air-secondary': {
base: 'style-tinted'
},
'air-secondary-alert': {
base: 'style-tinted-alert'
},
'air-secondary-accent': {
base: 'style-tinted-no-accent-1'
},
'air-secondary-accent-1': {
base: 'style-outline-accent-1'
},
'air-secondary-accent-2': {
base: 'style-outline-accent-2'
},
'air-secondary-no-accent': {
base: 'style-outline'
},
'air-tertiary': {
base: 'style-outline-no-accent'
}
},
to: {
true: 'border-dashed'
}
},
compoundVariants: [
{
to: true,
class: {
base: 'hover:border-(--b24ui-border-color-hover) has-focus-visible:border-(--b24ui-border-color-hover)',
externalIcon: 'group-hover:text-(--b24ui-icon)'
}
}
],
defaultVariants: {
color: '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: {
prose: {
callout: {
slots: {
base: 'group relative block py-xs ps-sm pe-xs gap-2 my-5 last:mb-0 text-(length:--ui-font-size-md)/(--ui-font-line-height-3xs) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) rounded-(--ui-border-radius-md) [&_code]:text-(length:--ui-font-size-sm)/(--ui-font-line-height-sm) [&>div]:my-2.5 [&_ul]:my-2.5 [&_ul]:ps-3 [&_ul]:marker:text-(--b24ui-color) [&_ol]:my-2.5 [&_ol]:ps-3 [&_ol]:marker:text-(--b24ui-color) [&>h1]:text-(--b24ui-color) [&>h2]:text-(--b24ui-color) [&>h3]:text-(--b24ui-color) [&>h4]:text-(--b24ui-color) [&>h5]:text-(--b24ui-color) [&>h6]:text-(--b24ui-color) [&>*]:last:!mb-0 [&_li]:my-1.5 [&_li]:ps-1 [&_li]:text-(length:--ui-font-size-md)/(--ui-font-line-height-3xs) [&_li]:text-(--b24ui-color) [&_a]:underline transition-colors',
icon: 'shrink-0 size-5 inline-block me-[6px] text-(--b24ui-icon) transition-colors',
externalIcon: 'size-4 align-top absolute right-2 top-2 pointer-events-none text-(--b24ui-split-divider-color) transition-colors'
},
variants: {
color: {
'air-primary': {
base: 'style-filled'
},
'air-primary-success': {
base: 'style-filled-success'
},
'air-primary-alert': {
base: 'style-filled-alert'
},
'air-primary-copilot': {
base: 'style-filled-copilot'
},
'air-primary-warning': {
base: 'style-filled-warning'
},
'air-secondary': {
base: 'style-tinted'
},
'air-secondary-alert': {
base: 'style-tinted-alert'
},
'air-secondary-accent': {
base: 'style-tinted-no-accent-1'
},
'air-secondary-accent-1': {
base: 'style-outline-accent-1'
},
'air-secondary-accent-2': {
base: 'style-outline-accent-2'
},
'air-secondary-no-accent': {
base: 'style-outline'
},
'air-tertiary': {
base: 'style-outline-no-accent'
}
},
to: {
true: 'border-dashed'
}
},
compoundVariants: [
{
to: true,
class: {
base: 'hover:border-(--b24ui-border-color-hover) has-focus-visible:border-(--b24ui-border-color-hover)',
externalIcon: 'group-hover:text-(--b24ui-icon)'
}
}
],
defaultVariants: {
color: 'air-primary'
}
}
}
}
})
]
})