A callout is a versatile, pre-styled container used to highlight key pieces of content in a visually distinct way.
Callouts help draw attention to important information and can be used multiple times on a page. They're flexible enough to support various content arrangements and include built-in containers for icons, taglines, titles, subtitles, and custom body content.
Shop our biggest sale of the season with up to 30% off on select styles, accessories, and more. Use code SUMMER30 at checkout. Offer ends July 31. Summer Sale — Up to 30% off sitewide.
<daff-callout>
<div class="daff-basic-callout__icon" daffCalloutIcon>
<fa-icon [icon]="faTag"></fa-icon>
</div>
<div daffCalloutTagline>Limited time offer</div>
<h3 daffCalloutTitle>Summer Sale — Up to 30% off sitewide.</h3>
<div daffCalloutSubtitle>
<p>
Shop our biggest sale of the season with up to 30% off on select styles, accessories, and more.
</p>
<p>
Use code SUMMER30 at checkout. Offer ends July 31.
</p>
</div>
<div daffCalloutBody>
<a daff-button color="theme-contrast" routerLink="/sale"
>Shop the sale</a>
</div>
</daff-callout>
When to use
Import DAFF_CALLOUT_COMPONENTS into your component:
import { DAFF_CALLOUT_COMPONENTS } from '@daffodil/design/callout';
@Component({
selector: 'custom-component',
templateUrl: './custom-component.component.html',
imports: [
DAFF_CALLOUT_COMPONENTS,
],
})
export class CustomComponent {}
To use callout in a module, import DaffCalloutModule into your custom module:
import { NgModule } from '@angular/core';
import { DaffCalloutModule } from '@daffodil/design/callout';
import { CustomComponent } from './custom.component';
@NgModule({
declarations: [
CustomComponent,
],
exports: [
CustomComponent,
],
imports: [
DaffCalloutModule,
],
})
export class CustomComponentModule { }
This method is deprecated. It's recommended to update all custom components to standalone.
A callout is composed of a wrapper, icon, tagline, title, subtitle, and body, displayed in the order listed:
<daff-callout>
<div daffCalloutIcon>
<fa-icon [icon]="faExclamation"></fa-icon>
</div>
<div daffCalloutTagline>Limited Time Offer</div>
<h2 daffCalloutTitle>Special Sale</h2>
<p daffCalloutSubtitle>Save up to 50% on selected items</p>
<div daffCalloutBody>
<button daff-button>Shop Now</button>
</div>
</daff-callout>
<daff-callout>: The wrapper component that holds all callout content.[daffCalloutIcon]: Displays a visual or branding element. Avoid using for interactive or actionable icons.[daffCalloutTagline]: Short, memorable phrase that provides quick context.[daffCalloutTitle]: The primary heading text. Applied to heading elements (<h1>, <h2>, etc.).[daffCalloutSubtitle]: Secondary descriptive text displayed beneath the title.[daffCalloutBody]: Flexible container for additional content. It's unstyled except for spacing and should only be used once per callout.Use the color property to change the background of a callout.
Shop our biggest sale of the season with up to 30% off on select styles, accessories, and more. Use code SUMMER30 at checkout. Offer ends July 31. Summer Sale — Up to 30% off sitewide.
<daff-form-field>
<daff-form-label>Color</daff-form-label>
<daff-select [options]="options" [formControl]="colorControl">
<ng-template daffSelectOption let-option="option">
{{ option.label }}
</ng-template>
</daff-select>
</daff-form-field>
<daff-callout [color]="colorControl.value?.value">
<div class="daff-callout-theming__icon" daffCalloutIcon>
<fa-icon [icon]="faTag"></fa-icon>
</div>
<div daffCalloutTagline>Limited time offer</div>
<h3 daffCalloutTitle>Summer Sale — Up to 30% off sitewide.</h3>
<div daffCalloutSubtitle>
<p>
Shop our biggest sale of the season with up to 30% off on select styles, accessories, and more.
</p>
<p>
Use code SUMMER30 at checkout. Offer ends July 31.
</p>
</div>
<div daffCalloutBody>
<a daff-button color="theme-contrast" routerLink="/sale"
>Shop the sale</a>
</div>
</daff-callout>
Control callout-specific text alignment with the textAlignment property. It defaults to left and does not affect content placed within [daffCalloutBody].
Shop our biggest sale of the season with up to 30% off on select styles, accessories, and more. Use code SUMMER30 at checkout. Offer ends July 31. Summer Sale — Up to 30% off sitewide.
<daff-form-field>
<daff-form-label>Text alignment</daff-form-label>
<daff-select [options]="options" [formControl]="textAlignControl">
<ng-template daffSelectOption let-option="option">
{{ option.label }}
</ng-template>
</daff-select>
</daff-form-field>
<daff-callout [textAlignment]="textAlignControl.value?.value">
<daff-container size="md">
<div class="daff-callout-text-alignment__icon" daffCalloutIcon>
<fa-icon [icon]="faTag"></fa-icon>
</div>
<div daffCalloutTagline>Limited time offer</div>
<h3 daffCalloutTitle>Summer Sale — Up to 30% off sitewide.</h3>
<div daffCalloutSubtitle>
<p>
Shop our biggest sale of the season with up to 30% off on select styles, accessories, and more.
</p>
<p>
Use code SUMMER30 at checkout. Offer ends July 31.
</p>
</div>
<div daffCalloutBody>
<a daff-button color="theme-contrast" routerLink="/sale"
>Shop the sale</a>
</div>
</daff-container>
</daff-callout>
Use the compact property on callout to reduce padding and suit UIs with tighter spacing requirements.
Shop our biggest sale of the season with up to 30% off on select styles, accessories, and more. Use code SUMMER30 at checkout. Offer ends July 31. Summer Sale — Up to 30% off sitewide.
<daff-callout [compact]="true">
<daff-container size="md">
<div class="daff-compact-callout__icon" daffCalloutIcon>
<fa-icon [icon]="faTag"></fa-icon>
</div>
<div daffCalloutTagline>Limited time offer</div>
<h3 daffCalloutTitle>Summer Sale — Up to 30% off sitewide.</h3>
<div daffCalloutSubtitle>
<p>
Shop our biggest sale of the season with up to 30% off on select styles, accessories, and more.
</p>
<p>
Use code SUMMER30 at checkout. Offer ends July 31.
</p>
</div>
<div daffCalloutBody>
<a daff-button color="theme-contrast" routerLink="/sale"
>Shop the sale</a>
</div>
</daff-container>
</daff-callout>
Callouts are flexible enough to support custom grid layouts for more complex arrangements:
Shop our biggest sale of the season with up to 30% off on select styles, accessories, and more. Use code SUMMER30 at checkout. Offer ends July 31. Summer Sale — Up to 30% off sitewide.
<daff-callout color="theme" class="daff-callout-with-grid">
<daff-container class="daff-callout-with-grid__grid">
<div class="daff-callout-with-grid__left">
<div class="daff-callout-theming__icon" daffCalloutIcon>
<fa-icon [icon]="faTag"></fa-icon>
</div>
<div daffCalloutTagline>Limited time offer</div>
<h3 daffCalloutTitle>Summer Sale — Up to 30% off sitewide.</h3>
</div>
<div class="daff-callout-with-grid__right">
<div daffCalloutSubtitle>
<p>
Shop our biggest sale of the season with up to 30% off on select styles, accessories, and more.
</p>
<p>
Use code SUMMER30 at checkout. Offer ends July 31.
</p>
</div>
<div daffCalloutBody>
<a daff-button color="theme-contrast" routerLink="/sale"
>Shop the sale</a>
</div>
</div>
</daff-container>
</daff-callout>