Card

A basic card variant with a filled background.

@Component()
class DaffCardComponent {
  @Input() color: DaffPalette
  @Input() orientation: DaffCardOrientation = DaffCardOrientationEnum.Vertical
  @Input() elevated: boolean = false
}

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

@Component()
class DaffStrokedCardComponent {
  @Input() color: DaffPalette
  @Input() orientation: DaffCardOrientation = DaffCardOrientationEnum.Vertical
  @Input() elevated: boolean = false
}

@Component()
class DaffRaisedCardComponent {
  @Input() color: DaffPalette
  @Input() orientation: DaffCardOrientation = DaffCardOrientationEnum.Vertical
  @Input() elevated: boolean = false
}

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

@Directive()
class DaffCardIconDirective {}

Displays an image.

@Directive()
class DaffCardImageDirective {}

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

@Directive()
class DaffCardTaglineDirective {}

The primary heading of the card.

@Directive()
class DaffCardTitleDirective {}

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

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

@Directive()
class DaffCardActionsDirective {}

@NgModule()
class DaffCardModule {}

The available orientations for a card.

type DaffCardOrientation = 'vertical' | 'horizontal'

Enum for representing the available card orientations. See DaffCardOrientation for descriptions of each orientation.

enum DaffCardOrientationEnum {
  Vertical = DaffCardOrientationEnum.Vertical,
  Horizontal = DaffCardOrientationEnum.Horizontal,
}