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.

Overview

Heros are the first thing users see on a page and are designed to catch their attention. It's a flexible and extensible component that includes pre-styled content containers.

Usage

Within a standalone component

To use hero in a standalone component, import it directly into your custom component:

@Component({
  selector: 'custom-component',
  templateUrl: './custom-component.component.html',
  standalone: true,
  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';

@NgModule({
    declarations: [
    CustomComponent,
  ],
  exports: [
    CustomComponent,
  ],
  imports: [
    DaffHeroModule,
  ],
})
export class CustomComponentModule { }

This method is deprecated. It's recommended to update all custom components to standalone.

Supported Content Types

A daff-hero supports transclusion of any content and includes stylized icon, tagline, title, subtitle, and body content containers.

Icon

[DaffHeroIcon] is intended for visual or branding reinforcement. It should not be used for actionable icons.

Tagline

Hero taglines are used by adding [daffHeroTagline] to a <p> tag. It's intended to supplement the title by providing a short, memorable description.

Title

Hero titles are used by adding [daffHeroTitle] to a <h1> tag.

Subtitle

Hero subtitles are used by adding [daffHeroSubtitle] to a <h2> tag.

Body

[daffHeroBody] is a wrapper container that can be used to place all additional components and content within a <daff-hero> and should only be used once. The body container allows for a ton of control and customization because it's not affected by any of hero's properties and only serves as a wrapping and spacing container.

Theming

The default background color of a hero is light gray, but it can be updated to one of the supported colors by using the color property.

Text Alignment

Align hero-specific text with the textAlignment property. textAlignment will not cascade the alignment styles down to [daffHeroBody] or any additional components or elements that are placed inside of a hero. textAlignment is set to left by default.

Supported alignments: left | center | right

Compact Heroes

Heroes are available in a compact mode, which decreases the overall padding of the hero container to suit UIs that require less negative space. To enable the mode, set the compact property on <daff-hero>.

Gridded Heroes

Heros are flexible enough to support grids within them.