Hero

Hero is a top level container designed to be large and captivating. It should be used only once per page, typically as the first component to introduce the page’s main purpose or message.

@Component()
class DaffHeroComponent {
  @Input() textAlignment: DaffTextAlignment
  @Input() compact: boolean = false
  @Input() color: DaffColor
}

Tagline is a short, memorable phrase that complements the title and provides quick context.

@Directive()
class DaffHeroTaglineDirective {}

Title is the primary heading for the hero.

@Directive()
class DaffHeroTitleDirective {}

Subtitle is a secondary descriptive text displayed beneath the title.

@Directive()
class DaffHeroSubtitleDirective {}

Body is a flexible wrapper for additional components or custom layouts. It's unstyled except for spacing, allowing for a ton of control and customization. It should only be used once per hero.

@Directive()
class DaffHeroBodyDirective {}

Icon is used to display a visual or branding element. Avoid using this for interactive or actionable icons.

@Directive()
class DaffHeroIconDirective {}

@NgModule()
class DaffHeroModule {}