A hero is a top-level container designed to be large and captivating, typically used as the first component to introduce a page's main purpose or message.
import { DaffHeroComponent } from '@daffodil/design/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() @HostBinding() compact: boolean = false
@Input() color: DaffPalette
}
DaffTextAlignment| Default | – |
|---|---|
| Description | The text alignment of the component. Options are: |
boolean| Default | false |
|---|---|
| Description | Controls whether the component is compact. |
DaffPalette| Default | – |
|---|---|
| Description | Sets the color on a component. Default options are: |
import { DaffHeroTaglineDirective } from '@daffodil/design/hero'
Tagline is a short, memorable phrase that complements the title and provides quick context.
@Directive()
class DaffHeroTaglineDirective {}
import { DaffHeroTitleDirective } from '@daffodil/design/hero'
Title is the primary heading for the hero.
@Directive()
class DaffHeroTitleDirective {}
import { DaffHeroSubtitleDirective } from '@daffodil/design/hero'
Subtitle is a secondary descriptive text displayed beneath the title.
@Directive()
class DaffHeroSubtitleDirective {}
import { DaffHeroBodyDirective } from '@daffodil/design/hero'
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 {}
import { DaffHeroIconDirective } from '@daffodil/design/hero'
Icon is used to display a visual or branding element. Avoid using this for interactive or actionable icons.
@Directive()
class DaffHeroIconDirective {}
import { DaffHeroModule } from '@daffodil/design/hero'
@NgModule()
class DaffHeroModule {}