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.

Usage

API

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.

New Season Arrivals

Discover the Summer Collection

Refresh your wardrobe with lightweight essentials, bold prints, and everyday staples designed to keep you cool all season long.

Shop the collection

<daff-hero>
  <div class="daff-basic-hero__icon" daffHeroIcon>
    <fa-icon [icon]="faBagShopping"></fa-icon>
  </div>
  <p daffHeroTagline>New Season Arrivals</p>
  <h1 daffHeroTitle>Discover the Summer Collection</h1>
  <h2 daffHeroSubtitle>
    Refresh your wardrobe with lightweight essentials, bold prints, and everyday staples designed to keep you cool all season long.
  </h2>
  <div daffHeroBody>
    <a routerLink="/shop" daff-button color="theme-contrast">Shop the collection</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

Making a visual highlight that's not at the top of a page (use callout instead)

Usage

Import DAFF_HERO_COMPONENTS into your 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 {}

Deprecation notice:

DaffHeroModule is deprecated. Use the standalone component imports instead.

Anatomy

A hero is composed of a wrapper, icon, tagline, title, subtitle, and body, displayed in the order listed:

<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>

<daff-hero>: The wrapper component that holds all hero content.
[daffHeroIcon]: Displays a visual or branding element. Avoid using for interactive or actionable icons.
[daffHeroTagline]: Short, memorable phrase that provides quick context.
[daffHeroTitle]: The primary heading text. Applied to heading elements (<h1>).
[daffHeroSubtitle]: Secondary descriptive text displayed beneath the title.
[daffHeroBody]: Flexible container for additional content or actions. It's unstyled except for spacing and should only be used once per hero.

Features

Colors

Use the color property to change the background of a hero.

Color

New Season Arrivals

Discover the Summer Collection

Refresh your wardrobe with lightweight essentials, bold prints, and everyday staples designed to keep you cool all season long.

Shop the collection

<daff-form-field>
  <daff-form-label>Color</daff-form-label>
  <daff-select [options]="options" [formControl]="colorControl">
    <ng-template daffSelectOption let-option="option">
      {{ option.label }}
    </ng-template>
  </daff-select>
</daff-form-field>

<daff-hero [color]="colorControl.value?.value">
  <div class="daff-hero-theming__icon" daffHeroIcon>
    <fa-icon [icon]="faBagShopping"></fa-icon>
  </div>
  <p daffHeroTagline>New Season Arrivals</p>
  <h1 daffHeroTitle>Discover the Summer Collection</h1>
  <h2 daffHeroSubtitle>
    Refresh your wardrobe with lightweight essentials, bold prints, and everyday staples designed to keep you cool all season long.
  </h2>
  <div daffHeroBody>
    <a routerLink="/shop" daff-button color="theme-contrast">Shop the collection</a>
  </div>
</daff-hero>

Text alignment

Control hero-specific text alignment with the textAlignment property. It defaults to left and does not affect [daffHeroBody] content or nested elements.

Text alignment

New Season Arrivals

Discover the Summer Collection

Refresh your wardrobe with lightweight essentials, bold prints, and everyday staples designed to keep you cool all season long.

Shop the collection

<daff-form-field>
  <daff-form-label>Text alignment</daff-form-label>
  <daff-select [options]="options" [formControl]="textAlignControl">
    <ng-template daffSelectOption let-option="option">
      {{ option.label }}
    </ng-template>
  </daff-select>
</daff-form-field>

<daff-hero [textAlignment]="textAlignControl.value">
  <daff-container size="md">
    <div class="daff-hero-text-alignment__icon" daffHeroIcon>
      <fa-icon [icon]="faBagShopping"></fa-icon>
    </div>
    <p daffHeroTagline>New Season Arrivals</p>
    <h1 daffHeroTitle>Discover the Summer Collection</h1>
    <h2 daffHeroSubtitle>
      Refresh your wardrobe with lightweight essentials, bold prints, and everyday staples designed to keep you cool all season long.
    </h2>
    <div daffHeroBody>
      <a routerLink="/shop" daff-button color="theme-contrast">Shop the collection</a>
    </div>
  </daff-container>
</daff-hero>

Compact

Use the compact property on hero to reduce padding and suit UIs with tighter spacing requirements.

New Season Arrivals

Discover the Summer Collection

Refresh your wardrobe with lightweight essentials, bold prints, and everyday staples designed to keep you cool all season long.

Shop the collection

<daff-hero [compact]="true">
  <div class="daff-compact-hero__icon" daffHeroIcon>
    <fa-icon [icon]="faBagShopping"></fa-icon>
  </div>
  <p daffHeroTagline>New Season Arrivals</p>
  <h1 daffHeroTitle>Discover the Summer Collection</h1>
  <h2 daffHeroSubtitle>
    Refresh your wardrobe with lightweight essentials, bold prints, and everyday staples designed to keep you cool all season long.
  </h2>
  <div daffHeroBody>
    <a routerLink="/shop" daff-button color="theme-contrast">Shop the collection</a>
  </div>
</daff-hero>

Examples

Hero with two columns

Heroes are flexible enough to support custom grid layouts for more complex arrangements:

New Season Arrivals

Discover the Summer Collection

Refresh your wardrobe with lightweight essentials, bold prints, and everyday staples designed to keep you cool all season long.

Shop the collection

<daff-hero color="theme">
  <daff-container class="daff-hero-with-grid__grid">
    <div class="daff-hero-with-grid__heading">
      <div class="daff-hero-with-grid__icon" daffHeroIcon>
        <fa-icon [icon]="faBagShopping"></fa-icon>
      </div>
      <p daffHeroTagline>New Season Arrivals</p>
      <h3 daffHeroTitle>Discover the Summer Collection</h3>
    </div>
    <div class="daff-hero-with-grid__content-wrapper">
      <div daffHeroSubtitle>
        Refresh your wardrobe with lightweight essentials, bold prints, and everyday staples designed to keep you cool all season long.
      </div>
      <div daffHeroBody>
        <a routerLink="/shop" daff-button color="primary">Shop the collection</a>
      </div>
    </div>
  </daff-container>
</daff-hero>