Usage
Use markdown in the default slot of the callout component to add eye-catching context to your content.
This is a `callout` with full **markdown** support.
::callout
This is a `callout` with full **markdown** support.
::
Icon
Use the icon prop to display an icon next to the content.
This is a `callout` with an icon.
::callout{icon="function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock("svg", {
xmlns: "http://www.w3.org/2000/svg",
fill: "none",
viewBox: "0 0 24 24",
"aria-hidden": "true",
"data-slot": "icon"
}, [
_createElementVNode("path", {
fill: "currentColor",
"fill-rule": "evenodd",
d: "M8.292 16.885c.99.828 2.158 1.267 3.415 1.153.22.572.598 1.51 1.124 2.643 2.4-1.448 2.743-3.471 2.697-4.683q.354-.353.707-.771c2.881-3.423 3.28-10.079 2.492-10.738-.788-.66-7.295.888-10.176 4.311q-.357.425-.646.837c-1.207.17-3.134.863-4.144 3.459 1.207.318 2.195.526 2.799.643.107 1.25.743 2.32 1.732 3.146m1.718-2.041a2.056 2.056 0 0 0 2.89-.252 2.04 2.04 0 0 0-.252-2.882 2.056 2.056 0 0 0-2.89.252 2.04 2.04 0 0 0 .252 2.882m5.07-4.315a1.104 1.104 0 0 1-1.552.136 1.096 1.096 0 0 1-.136-1.548 1.104 1.104 0 0 1 1.552-.135c.466.39.527 1.083.136 1.547m-5.701 7.974a5.1 5.1 0 0 1-1.75-.933 4.9 4.9 0 0 1-1.267-1.484c-.874 2.119-1.251 3.831-.984 4.045s1.968-.438 4.001-1.628",
"clip-rule": "evenodd"
})
]))
}"}
This is a `callout` with an icon.
::
Color
Use the color prop to change the color of the callout.
This is a `callout` with a custom color.
::callout{icon="function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock("svg", {
xmlns: "http://www.w3.org/2000/svg",
fill: "none",
viewBox: "0 0 24 24",
"aria-hidden": "true",
"data-slot": "icon"
}, [
_createElementVNode("path", {
fill: "currentColor",
"fill-rule": "evenodd",
d: "M8.292 16.885c.99.828 2.158 1.267 3.415 1.153.22.572.598 1.51 1.124 2.643 2.4-1.448 2.743-3.471 2.697-4.683q.354-.353.707-.771c2.881-3.423 3.28-10.079 2.492-10.738-.788-.66-7.295.888-10.176 4.311q-.357.425-.646.837c-1.207.17-3.134.863-4.144 3.459 1.207.318 2.195.526 2.799.643.107 1.25.743 2.32 1.732 3.146m1.718-2.041a2.056 2.056 0 0 0 2.89-.252 2.04 2.04 0 0 0-.252-2.882 2.056 2.056 0 0 0-2.89.252 2.04 2.04 0 0 0 .252 2.882m5.07-4.315a1.104 1.104 0 0 1-1.552.136 1.096 1.096 0 0 1-.136-1.548 1.104 1.104 0 0 1 1.552-.135c.466.39.527 1.083.136 1.547m-5.701 7.974a5.1 5.1 0 0 1-1.75-.933 4.9 4.9 0 0 1-1.267-1.484c-.874 2.119-1.251 3.831-.984 4.045s1.968-.438 4.001-1.628",
"clip-rule": "evenodd"
})
]))
}" color="air-primary"}
This is a `callout` with a custom color.
::
Link
You can pass any property from the <NuxtLink> component such as to and target to make the callout a link.
::callout{icon="function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock("svg", {
xmlns: "http://www.w3.org/2000/svg",
fill: "none",
viewBox: "0 0 24 24",
"aria-hidden": "true",
"data-slot": "icon"
}, [
_createElementVNode("path", {
fill: "currentColor",
"fill-rule": "evenodd",
d: "M8.292 16.885c.99.828 2.158 1.267 3.415 1.153.22.572.598 1.51 1.124 2.643 2.4-1.448 2.743-3.471 2.697-4.683q.354-.353.707-.771c2.881-3.423 3.28-10.079 2.492-10.738-.788-.66-7.295.888-10.176 4.311q-.357.425-.646.837c-1.207.17-3.134.863-4.144 3.459 1.207.318 2.195.526 2.799.643.107 1.25.743 2.32 1.732 3.146m1.718-2.041a2.056 2.056 0 0 0 2.89-.252 2.04 2.04 0 0 0-.252-2.882 2.056 2.056 0 0 0-2.89.252 2.04 2.04 0 0 0 .252 2.882m5.07-4.315a1.104 1.104 0 0 1-1.552.136 1.096 1.096 0 0 1-.136-1.548 1.104 1.104 0 0 1 1.552-.135c.466.39.527 1.083.136 1.547m-5.701 7.974a5.1 5.1 0 0 1-1.75-.933 4.9 4.9 0 0 1-1.267-1.484c-.874 2.119-1.251 3.831-.984 4.045s1.968-.438 4.001-1.628",
"clip-rule": "evenodd"
})
]))
}" to="/docs/getting-started/installation/nuxt/" color="air-primary"}
Learn how to install `@bitrix24/b24ui-nux` in your project.
::
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
https://github.com/bitrix24/b24ui/tree/main/src/theme/callout.ts
export default {
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-2 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'
}
}