Card

A card is a flexible content container used to group related information and actions about a single subject.

Components

DaffCardComponent

import { DaffCardComponent } from '@daffodil/design/card'

A basic card variant with a filled background.

@Component()
class DaffCardComponent extends DaffCardBaseDirective {
  @Input() elevated: boolean = false
  @Input() color: DaffPalette
  @Input() orientation: DaffOrientation
}

Inputs

elevated

boolean

Default	`false`
Description	Whether or not a card displays a shadow.

color

DaffPalette

Default	–
Description	Sets the color on a component.

orientation

DaffOrientation

Default –

Description

The orientation of the component.

Options are: horizontal and vertical.

DaffStrokedCardComponent

import { DaffStrokedCardComponent } from '@daffodil/design/card'

A card variant with a stroked (outlined) border instead of a filled background.

@Component()
class DaffStrokedCardComponent extends DaffCardBaseDirective {
  @Input() elevated: boolean = false
  @Input() color: DaffPalette
  @Input() orientation: DaffOrientation
}

Inputs

elevated

boolean

Default	`false`
Description	Whether or not a card displays a shadow.

color

DaffPalette

Default	–
Description	Sets the color on a component.

orientation

DaffOrientation

Default –

Description

The orientation of the component.

Options are: horizontal and vertical.

Directives

DaffCardIconDirective

import { DaffCardIconDirective } from '@daffodil/design/card'

Displays a visual or branding element. Avoid using this for interactive or actionable icons.

@Directive()
class DaffCardIconDirective {}

DaffCardImageDirective

import { DaffCardImageDirective } from '@daffodil/design/card'

Displays an image.

@Directive()
class DaffCardImageDirective {}

DaffCardTaglineDirective

import { DaffCardTaglineDirective } from '@daffodil/design/card'

Short, memorable phrase that complements the title and provides quick context.

@Directive()
class DaffCardTaglineDirective {}

DaffCardTitleDirective

import { DaffCardTitleDirective } from '@daffodil/design/card'

The primary heading of the card.

@Directive()
class DaffCardTitleDirective {}

DaffCardContentDirective

import { DaffCardContentDirective } from '@daffodil/design/card'

A flexible wrapper for text, components, or custom layouts. It's unstyled except for spacing and should only be used once per card.

@Directive()
class DaffCardContentDirective {}

DaffCardActionsDirective

import { DaffCardActionsDirective } from '@daffodil/design/card'

A container for buttons or calls-to-action, always positioned to the bottom of the card.

@Directive()
class DaffCardActionsDirective {}

Modules

DaffCardModule

Deprecated

import { DaffCardModule } from '@daffodil/design/card'

@NgModule()
class DaffCardModule {}