Hero

Hero is a top level container that is large and captivating. It should only be used once as the first container on any given page.

Usage

API

DaffHeroModule

import { DaffHeroModule } from '@daffodil/design/hero'

@NgModule()
class DaffHeroModule {}

DAFF_HERO_COMPONENTS

import { DAFF_HERO_COMPONENTS } from '@daffodil/design/hero'

const DAFF_HERO_COMPONENTS: readonly [typeof DaffHeroComponent, typeof DaffHeroIconDirective, typeof DaffHeroTaglineDirective, typeof DaffHeroTitleDirective, typeof DaffHeroSubtitleDirective, typeof DaffHeroBodyDirective]

DaffHeroComponent

import { DaffHeroComponent } from '@daffodil/design/hero'

@Component()
class DaffHeroComponent {}

Selector: 'daff-hero'

DaffHeroTaglineDirective

import { DaffHeroTaglineDirective } from '@daffodil/design/hero'

@Directive()
class DaffHeroTaglineDirective {}

Selector: '[daffHeroTagline]'

DaffHeroTitleDirective

import { DaffHeroTitleDirective } from '@daffodil/design/hero'

@Directive()
class DaffHeroTitleDirective {}

Selector: '[daffHeroTitle]'

DaffHeroSubtitleDirective

import { DaffHeroSubtitleDirective } from '@daffodil/design/hero'

@Directive()
class DaffHeroSubtitleDirective {}

Selector: '[daffHeroSubtitle]'

DaffHeroBodyDirective

import { DaffHeroBodyDirective } from '@daffodil/design/hero'

@Directive()
class DaffHeroBodyDirective {}

Selector: '[daffHeroBody]'

DaffHeroIconDirective

import { DaffHeroIconDirective } from '@daffodil/design/hero'

@Directive()
class DaffHeroIconDirective {}

Selector: '[daffHeroIcon]'