Vue callout component provides presentation of content in a visually distinct manner. Includes a heading, icon and typically text-based content.
Available in Other JavaScript Frameworks
CoreUI Vue Callout Component is also available for Angular, Bootstrap, and React. Explore framework-specific implementations below:
On this page
Examples
Callout component is prepared for any length of text, as well as an optional elements like icons, headings, etc. For a styling, use one of the required contextual props (e.g., color="success").
<template>
<CCallout color="primary">
New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background,
terminology, guidelines, and code snippets.
</CCallout>
<CCallout color="secondary">
New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background,
terminology, guidelines, and code snippets.
</CCallout>
<CCallout color="success">
New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background,
terminology, guidelines, and code snippets.
</CCallout>
<CCallout color="danger">
New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background,
terminology, guidelines, and code snippets.
</CCallout>
<CCallout color="warning">
New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background,
terminology, guidelines, and code snippets.
</CCallout>
<CCallout color="info">
New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background,
terminology, guidelines, and code snippets.
</CCallout>
<CCallout color="light">
New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background,
terminology, guidelines, and code snippets.
</CCallout>
<CCallout color="dark">
New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background,
terminology, guidelines, and code snippets.
</CCallout>
</template>
<script setup>
import { CCallout } from '@coreui/vue'
</script>