Callout is a versatile component that can be used to easily highlight a piece of content.
Callouts can be used multiple times on a page. It's a flexible and extensible component that includes pre-styled content containers. It can be used alongside a product list to highlight a set of products, quickly lay out an accordion, showcase a set of features, etc.
To use callout in a standalone component, import it directly into your custom component:
@Component({
selector: 'custom-component',
templateUrl: './custom-component.component.html',
standalone: true,
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';
@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 <daff-callout> supports transclusion of any content and includes stylized icon, tagline, title, subtitle, and body content containers.
[daffCalloutIcon] is intended for visual or branding reinforcement. It should not be used for actionable icons.
Callout taglines are used by adding [daffCalloutTagline] to a <p> tag. It's intended to supplement the title by providing a short, memorable description.
Callout titles are used by adding [daffCalloutTitle] to a <h*> tag.
Callout subtitles are used by adding [daffCalloutSubtitle] to a <p> tag.
[daffCalloutBody] is a wrapper container that can be used to place all additional components and content within a <daff-callout> and should only be used once. The body container allows for a ton of control and customization because it's not affected by any of callout's properties and only serves as a wrapping and spacing container.
The default background color of a callout is light gray, but it can be updated to one of the supported colors by using the color property.
Supported colors: primary | secondary | tertiary | black | white | theme | theme-contrast
Align callout-specific text with the textAlignment property. textAlignment will not cascade the alignment styles down to [daffCalloutBody] or any additional components or elements that is placed inside of a callout. textAlignment is set to left by default.
Supported alignments: left | center | right
Callouts are available in a compact mode, which decreases the overall padding of the callout container to suit UIs that require less negative space. To enable the mode, set the compact property on <daff-callout>.
Callouts are flexible enough to support grids within them.
The layout property is deprecated and replaced by the textAlignment property.
The size property is deprecated and replaced by the compact property.