Card

Cards are versatile content containers that contain content and actions to convey information about a single subject.

DaffCardModule

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

@NgModule()
class DaffCardModule {}

DAFF_CARD_COMPONENTS

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

const DAFF_CARD_COMPONENTS: readonly [typeof DaffCardComponent, typeof DaffCardIconDirective, typeof DaffCardImageDirective, typeof DaffCardTaglineDirective, typeof DaffCardTitleDirective, typeof DaffCardContentDirective, typeof DaffCardActionsDirective]

DAFF_RAISED_CARD_COMPONENTS

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

const DAFF_RAISED_CARD_COMPONENTS: readonly [typeof DaffRaisedCardComponent, typeof DaffCardIconDirective, typeof DaffCardImageDirective, typeof DaffCardTaglineDirective, typeof DaffCardTitleDirective, typeof DaffCardContentDirective, typeof DaffCardActionsDirective]

DAFF_STROKED_CARD_COMPONENTS

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

const DAFF_STROKED_CARD_COMPONENTS: readonly [typeof DaffStrokedCardComponent, typeof DaffCardIconDirective, typeof DaffCardImageDirective, typeof DaffCardTaglineDirective, typeof DaffCardTitleDirective, typeof DaffCardContentDirective, typeof DaffCardActionsDirective]

DAFF_ALL_CARD_COMPONENTS

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

const DAFF_ALL_CARD_COMPONENTS: readonly [typeof DaffCardComponent, typeof DaffRaisedCardComponent, typeof DaffStrokedCardComponent, typeof DaffCardIconDirective, ... 4 more ..., typeof DaffCardActionsDirective]

DaffCardComponent

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

@Component()
class DaffCardComponent extends DaffCardBaseDirective {
  @HostBinding() class: true
}

Selector:

'daff-card' + ',' +
    'a[daff-card]'

Properties

Name	Type	Description
class	true

DaffRaisedCardComponent

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

@Component()
class DaffRaisedCardComponent extends DaffCardBaseDirective {
  @HostBinding() class: true
}

Selector:

'daff-raised-card' + ',' +
    'a[daff-raised-card]'

Properties

Name	Type	Description
class	true

DaffStrokedCardComponent

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

@Component()
class DaffStrokedCardComponent extends DaffCardBaseDirective {
  @HostBinding() class: true
}

Selector:

'daff-stroked-card' + ',' +
    'a[daff-stroked-card]'

Properties

Name	Type	Description
class	true

DaffCardIconDirective

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

@Directive()
class DaffCardIconDirective {}

Selector: '[daffCardIcon]'

DaffCardImageDirective

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

@Directive()
class DaffCardImageDirective {}

Selector: '[daffCardImage]'

DaffCardTaglineDirective

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

@Directive()
class DaffCardTaglineDirective {}

Selector: '[daffCardTagline]'

DaffCardTitleDirective

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

@Directive()
class DaffCardTitleDirective {}

Selector: '[daffCardTitle]'

DaffCardContentDirective

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

@Directive()
class DaffCardContentDirective {}

Selector: '[daffCardContent]'

DaffCardActionsDirective

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

@Directive()
class DaffCardActionsDirective {}

Selector: '[daffCardActions]'