A callout is a versatile, pre-styled container used to highlight key pieces of content in a visually distinct way.
import { DaffCalloutComponent } from '@daffodil/design/callout'
Callout is a versatile, pre-styled container used to highlight key pieces of content in a visually distinct way.
@Component()
class DaffCalloutComponent {
@Input() textAlignment: DaffTextAlignment
@Input() @HostBinding() compact: boolean = false
@Input() color: DaffPalette
}
DaffTextAlignment| Default | – |
|---|---|
| Description | The text alignment of the component. Options are: |
boolean| Default | false |
|---|---|
| Description | Controls whether the component is compact. |
DaffPalette| Default | – |
|---|---|
| Description | Sets the color on a component. Default options are: |
import { DaffCalloutIconDirective } from '@daffodil/design/callout'
Used to display a visual or branding element. Avoid using this for interactive or actionable icons.
@Directive()
class DaffCalloutIconDirective {}
import { DaffCalloutTaglineDirective } from '@daffodil/design/callout'
A short, memorable phrase that complements the title and provides quick context.
@Directive()
class DaffCalloutTaglineDirective {}
import { DaffCalloutTitleDirective } from '@daffodil/design/callout'
Applied to a heading tag (<h*>) to define the primary title of the callout.
@Directive()
class DaffCalloutTitleDirective {}
import { DaffCalloutSubtitleDirective } from '@daffodil/design/callout'
Secondary text that provides additional descriptive information beneath the title.
@Directive()
class DaffCalloutSubtitleDirective {}
import { DaffCalloutBodyDirective } from '@daffodil/design/callout'
A flexible wrapper for custom or additional components within the callout. It should only be used once per callout.
@Directive()
class DaffCalloutBodyDirective {}
import { DaffCalloutModule } from '@daffodil/design/callout'
@NgModule()
class DaffCalloutModule {}