Angular 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 Angular Callout Component is also available for Bootstrap, React, and Vue. 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").
import { Component } from '@angular/core';
import { CalloutComponent } from '@coreui/angular';
@Component({
selector: 'docs-callout-example',
templateUrl: './callout-example.component.html',
imports: [CalloutComponent]
})
export class CalloutExampleComponent {}<c-callout color="primary">
New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.
</c-callout>
<c-callout color="secondary">
New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.
</c-callout>
<c-callout color="success">
New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.
</c-callout>
<c-callout color="danger">
New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.
</c-callout>
<c-callout color="warning">
New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.
</c-callout>
<c-callout color="info">
New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.
</c-callout>
<c-callout color="light">
New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.
</c-callout>
<c-callout color="dark">
New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.
</c-callout>API
Callout Module
import { CalloutModule } from '@coreui/angular';
@NgModule({
imports: [CalloutModule,...]
})
export class AppModule(){}c-callout
component
import { CalloutComponent } from '@coreui/angular'