Hero
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.
Overview
Heroes are the first visual element users see on a page and are intended to make a bold statement. They're flexible and extensible, including pre-styled content containers for common layouts such as titles, subtitles, taglines, and body content. Heroes should only be used once per page.
<daff-hero>
<div class="daff-basic-hero__icon" daffHeroIcon>
<fa-icon [icon]="faMobile"></fa-icon>
</div>
<p daffHeroTagline>Frontend framework for ecommerce PWAs</p>
<h1 daffHeroTitle>Daffodil: The next great leap in ecommerce.</h1>
<h2 daffHeroSubtitle>
<p>Daffodil provides everything you need to create powerful and flexible ecommerce experiences.</p>
<p>With Daffodil, ambitious businesses are able to achieve more while minimizing development and maintenance costs.</p>
</h2>
<div daffHeroBody>
<a href="https://www.daff.io" target="_blank" daff-button>Get Started</a>
</div>
</daff-hero>
Best practices
When to use
- Introducing the main purpose or message of a page
- Making a bold visual statement at the top of a page
- Highlighting promotional content or key features
- Creating an impactful landing page experience
When not to use
Avoid heroes when:
- Trying to make a visual highlight that's not at the top of a page (use callout instead)
Usage
Within a standalone component
To use the hero components, import DAFF_HERO_COMPONENTS directly into your custom component:
import { DAFF_HERO_COMPONENTS } from '@daffodil/design/hero';
@Component({
selector: 'custom-component',
templateUrl: './custom-component.component.html',
imports: [
DAFF_HERO_COMPONENTS,
],
})
export class CustomComponent {}
Within a module (deprecated)
To use hero in a module, import DaffHeroModule into your custom module:
import { NgModule } from '@angular/core';
import { DaffHeroModule } from '@daffodil/design/hero';
import { CustomComponent } from './custom.component';
@NgModule({
declarations: [
CustomComponent,
],
exports: [
CustomComponent,
],
imports: [
DaffHeroModule,
],
})
export class CustomComponentModule { }
This method is deprecated. It's recommended to update all custom components to standalone.
Anatomy
A hero consists of the following components, displayed in the order listed:
Container
<daff-hero>: The main wrapper that holds all hero content.
Icon
[daffHeroIcon]: Displays visual or branding element. Avoid using for interactive icons.
Tagline
[daffHeroTagline]: Short, memorable phrase that provides quick context.
Title
[daffHeroTitle]: The primary heading text. Applied to heading elements (<h1>).
Subtitle
[daffHeroSubtitle]: Secondary descriptive text displayed beneath the title.
Body
[daffHeroBody]: Flexible container for additional content or actions. It's unstyled except for spacing and should only be used once per hero.
Basic structure
<daff-hero>
<div daffHeroIcon>
<img src="assets/summer-sale-icon.svg" alt="Summer sale icon" />
</div>
<div daffHeroTagline>Limited Time Offer</div>
<h1 daffHeroTitle>Summer Collection Sale</h1>
<p daffHeroSubtitle>Up to 50% off select items through July 31</p>
<div daffHeroBody>
<button daff-button color="secondary">Shop the sale</button>
<button daff-button color="theme">Learn more</button>
</div>
</daff-hero>
Features
Colors
Use the color property to change the background of a hero.
<daff-hero [color]="colorControl.value">
<div class="daff-hero-theming__icon" daffHeroIcon>
<fa-icon [icon]="faMobile"></fa-icon>
</div>
<p daffHeroTagline>Frontend framework for ecommerce PWAs</p>
<h1 daffHeroTitle>Daffodil: The next great leap in ecommerce.</h1>
<h2 daffHeroSubtitle>
<p>Daffodil provides everything you need to create powerful and flexible ecommerce experiences.</p>
<p>With Daffodil, ambitious businesses are able to achieve more while minimizing development and maintenance costs.</p>
</h2>
<div daffHeroBody>
<a href="https://www.daff.io" target="_blank" daff-button>Get Started</a>
</div>
</daff-hero>
<select [formControl]="colorControl">
<option value="">Default</option>
<option value="primary">Primary</option>
<option value="secondary">Secondary</option>
<option value="tertiary">Tertiary</option>
<option value="white">White</option>
<option value="black">Black</option>
<option value="theme">Theme</option>
<option value="theme-contrast">Theme Contrast</option>
</select>
Text alignment
Control hero-specific text alignment with the textAlignment property. It defaults to left and does not affect [daffHeroBody] content or nested elements.
<daff-hero [textAlignment]="textAlignControl.value">
<daff-container size="md">
<div class="daff-hero-text-alignment__icon" daffHeroIcon>
<fa-icon [icon]="faMobile"></fa-icon>
</div>
<p daffHeroTagline>Frontend framework for ecommerce PWAs</p>
<h1 daffHeroTitle>Daffodil: The next great leap in ecommerce.</h1>
<h2 daffHeroSubtitle>
<p>Daffodil provides everything you need to create powerful and flexible ecommerce experiences.</p>
<p>With Daffodil, ambitious businesses are able to achieve more while minimizing development and maintenance costs.</p>
</h2>
<div daffHeroBody>
<a href="https://www.daff.io" target="_blank" daff-button>Get Started</a>
</div>
</daff-container>
</daff-hero>
<select [formControl]="textAlignControl">
@for (option of options; track option) {
<option [value]="option.value">{{ option.label }}</option>
}
</select>
Compact
Use the compact property on hero to reduce padding and suit UIs with tighter spacing requirements.
<daff-hero [compact]="true">
<div class="daff-compact-hero__icon" daffHeroIcon>
<fa-icon [icon]="faMobile"></fa-icon>
</div>
<p daffHeroTagline>Frontend framework for ecommerce PWAs</p>
<h1 daffHeroTitle>Daffodil: The next great leap in ecommerce.</h1>
<h2 daffHeroSubtitle>
<p>Daffodil provides everything you need to create powerful and flexible ecommerce experiences.</p>
<p>With Daffodil, ambitious businesses are able to achieve more while minimizing development and maintenance costs.</p>
</h2>
<div daffHeroBody>
<a href="https://www.daff.io" target="_blank" daff-button>Get Started</a>
</div>
</daff-hero>
Examples
Hero with two columns
Heroes are flexible enough to support custom grid layouts for more complex arrangements:
<daff-hero color="theme">
<daff-container class="daff-hero-with-grid__grid">
<div class="daff-hero-with-grid__image">
<img src="/assets/design/callout/pwa-illustration.svg" alt="PWA Illustration">
</div>
<div class="daff-hero-with-grid__content-wrapper">
<div class="daff-hero-with-grid__icon" daffHeroIcon>
<fa-icon [icon]="faMobile"></fa-icon>
</div>
<p daffHeroTagline>Frontend framework for ecommerce PWAs</p>
<h3 daffHeroTitle>Daffodil: The next great leap in ecommerce.</h3>
<div daffHeroSubtitle>
<p>Daffodil provides everything you need to create powerful and flexible ecommerce experiences.</p>
<p>With Daffodil, ambitious businesses are able to achieve more while minimizing development and maintenance costs.</p>
</div>
<div daffHeroBody>
<a href="https://www.daff.io" target="_blank" daff-button>Get Started</a>
</div>
</div>
</daff-container>
</daff-hero>
