Callout

A callout is a versatile, pre-styled container used to highlight key pieces of content in a visually distinct way.

Overview

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.

Best practices

When to use

Highlighting promotional content or special offers
Featuring product collections or categories
Creating visually distinct content sections
Displaying feature overviews or benefits

Usage

Within a standalone component

To use the callout components, import DAFF_CALLOUT_COMPONENTS into your custom 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 {}

Within a module (deprecated)

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.

Anatomy

A callout consists of the following components, displayed in the order listed:

Container

<daff-callout>: The main wrapper that holds all callout content.

Icon

[daffCalloutIcon]: Displays a visual or branding element. Avoid using for interactive or actionable icons.

Tagline

[daffCalloutTagline]: Short, memorable phrase that provides quick context.

Title

[daffCalloutTitle]: The primary heading text. Applied to heading elements (<h1>, <h2>, etc.).

Subtitle

[daffCalloutSubtitle]: Secondary descriptive text displayed beneath the title.

Body

[daffCalloutBody]: Flexible container for additional content. It's unstyled except for spaicng and should only be used once per callout.

Basic structure

<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>

Features

Colors

Use the color property to change the background of a callout.

Frontend framework for ecommerce PWAs

Daffodil: The next great leap in ecommerce.

Daffodil provides everything you need to create powerful and flexible ecommerce experiences.

With Daffodil, ambitious businesses are able to achieve more while minimizing development and maintenance costs.

What is Daffodil?

<daff-callout [color]="colorControl.value">
  <div class="daff-callout-theming__icon" daffCalloutIcon>
    <fa-icon [icon]="faMobile"></fa-icon>
  </div>
  <div daffCalloutTagline>Frontend framework for ecommerce PWAs</div>
  <h3 daffCalloutTitle>Daffodil: The next great leap in ecommerce.</h3>
  <div daffCalloutSubtitle>
    <p>
      Daffodil provides everything you need to create powerful and flexible
      ecommerce experiences.
    </p>
    <p>
      With Daffodil, ambitious businesses are able to achieve more while
      minimizing development and maintenance costs.
    </p>
  </div>
  <div daffCalloutBody>
    <a daff-button color="theme-contrast" href="https://www.daff.io"
      >What is Daffodil?</a
    >
  </div>
</daff-callout>

<select [formControl]="colorControl">
  @for (option of options; track option) {
  <option [value]="option.value">{{ option.label }}</option>
  }
</select>

Text alignment

Control callout-specific text alignment with the textAlignment property. It defaults to left and does not affect [daffCalloutBody] content or nested elements.

Frontend framework for ecommerce PWAs

Daffodil: The next great leap in ecommerce.

Daffodil provides everything you need to create powerful and flexible ecommerce experiences.

With Daffodil, ambitious businesses are able to achieve more while minimizing development and maintenance costs.

What is Daffodil?

<daff-callout [textAlignment]="textAlignControl.value">
  <daff-container size="md">
    <div class="daff-callout-text-alignment__icon" daffCalloutIcon>
      <fa-icon [icon]="faMobile"></fa-icon>
    </div>
    <div daffCalloutTagline>Frontend framework for ecommerce PWAs</div>
    <h3 daffCalloutTitle>Daffodil: The next great leap in ecommerce.</h3>
    <div daffCalloutSubtitle>
      <p>
        Daffodil provides everything you need to create powerful and flexible
        ecommerce experiences.
      </p>
      <p>
        With Daffodil, ambitious businesses are able to achieve more while
        minimizing development and maintenance costs.
      </p>
    </div>
    <div daffCalloutBody>
      <a daff-button color="theme-contrast" href="https://www.daff.io"
        >What is Daffodil?</a
      >
    </div>
  </daff-container>
</daff-callout>

<select [formControl]="textAlignControl">
  @for (option of options; track option) {
  <option [value]="option.value">{{ option.label }}</option>
  }
</select>

Compact

Use the compact property on callout to reduce padding and suit UIs with tighter spacing requirements.

Frontend framework for ecommerce PWAs

Daffodil: The next great leap in ecommerce.

Daffodil provides everything you need to create powerful and flexible ecommerce experiences.

With Daffodil, ambitious businesses are able to achieve more while minimizing development and maintenance costs.

What is Daffodil?

<daff-callout [compact]="true">
  <daff-container size="md">
    <div class="daff-compact-callout__icon" daffCalloutIcon>
      <fa-icon [icon]="faMobile"></fa-icon>
    </div>
    <div daffCalloutTagline>Frontend framework for ecommerce PWAs</div>
    <h3 daffCalloutTitle>Daffodil: The next great leap in ecommerce.</h3>
    <div daffCalloutSubtitle>
      <p>
        Daffodil provides everything you need to create powerful and flexible
        ecommerce experiences.
      </p>
      <p>
        With Daffodil, ambitious businesses are able to achieve more while
        minimizing development and maintenance costs.
      </p>
    </div>
    <div daffCalloutBody>
      <a daff-button color="theme-contrast" href="https://www.daff.io"
        >What is Daffodil?</a
      >
    </div>
  </daff-container>
</daff-callout>

Examples

Callout with two columns

Callouts are flexible enough to support custom grid layouts for more complex arrangements:

Frontend framework for ecommerce PWAs

Daffodil: The next great leap in ecommerce.

Daffodil provides everything you need to create powerful and flexible ecommerce experiences.

With Daffodil, ambitious businesses are able to achieve more while minimizing development and maintenance costs.

What is Daffodil?Sign up for a demo

<daff-callout color="theme">
  <daff-container class="daff-callout-with-grid__grid">
    <div class="daff-callout-with-grid__image">
      <img
        src="/assets/design/callout/pwa-illustration.svg"
        alt="PWA Illustration"
      />
    </div>
    <div class="daff-callout-with-grid__content-wrapper">
      <div class="daff-callout-with-grid__icon" daffCalloutIcon>
        <fa-icon [icon]="faMobile"></fa-icon>
      </div>
      <div daffCalloutTagline>Frontend framework for ecommerce PWAs</div>
      <h3 daffCalloutTitle>Daffodil: The next great leap in ecommerce.</h3>
      <div daffCalloutSubtitle>
        <p>
          Daffodil provides everything you need to create powerful and flexible
          ecommerce experiences.
        </p>
        <p>
          With Daffodil, ambitious businesses are able to achieve more while
          minimizing development and maintenance costs.
        </p>
      </div>
      <div daffCalloutBody>
        <div class="daff-callout-with-grid__actions">
          <a
            daff-button
            color="theme-contrast"
            href="https://www.daff.io"
            class="daff-callout-with-grid__daffodil-action"
            >What is Daffodil?</a
          >
          <a
            daff-underline-button
            color="theme-contrast"
            routerLink="/contact"
            class="daff-callout-with-grid__demo-action"
            >Sign up for a demo</a
          >
        </div>
      </div>
    </div>
  </daff-container>
</daff-callout>