Hero

An imposing hero banner to showcase something

The hero component allows you to add a full width banner to your webpage, which can optionally cover the full height of the page as well.

To use a Bulma Hero component in your application, you need to import the BulmaHeroModule by adding the following lines to your app.module.ts file.

import { BulmaHeroModule } from 'ngx-bulma';

@NgModule({
  imports: [BulmaHeroModule]
  // ...
})
export class AppModule {}

Basic

To display the Hero component in your Angular application, use the <bu-hero> tag.

Component	Description
`bu-hero`	Parent Hero Component.

Properties	Description
`color`	Set the color of the Hero Component
`size`	Set the size of the Hero Component
`gradient`	Set the gradient of the Hero Component, default value is false

Hero title

Hero subtitle

<bu-hero>
  <div buContainer>
    <h1 class="title">
      Hero title
    </h1>
    <h2 class="subtitle">
      Hero subtitle
    </h2>
  </div>
</bu-hero>

Colors

As with buttons, you can choose one of the 8 different colors:

primary
link
info
success
warning
danger
light
dark

Primary title

Primary subtitle

<bu-hero color="primary">
  <div buContainer>
    <h1 class="title">
      Primary title
    </h1>
    <h2 class="subtitle">
      Primary subtitle
    </h2>
  </div>
</bu-hero>

Info title

Info subtitle

Success title

Success subtitle

Link title

Link subtitle

Warning title

Warning subtitle

Danger title

Danger subtitle

Light title

Light subtitle

Dark title

Dark subtitle

Sizes

You can have even more imposing banners by using one of 3 different sizes:

medium
large
fullheight

Medium title

Medium subtitle

<bu-hero color="primary" size="medium">
  <div buContainer>
    <div class="container">
      <h1 class="title">
        Medium title
      </h1>
      <h2 class="subtitle">
        Medium subtitle
      </h2>
    </div>
  </div>
</bu-hero>

Large title

Large subtitle

<bu-hero color="info" size="large">
  <div buContainer>
    <div class="container">
      <h1 class="title">
        Large title
      </h1>
      <h2 class="subtitle">
        Large subtitle
      </h2>
    </div>
  </div>
</bu-hero>

Fullheight title

Fullheight subtitle

<bu-hero color="success" size="fullheight">
  <div buContainer>
    <div class="container">
      <h1 class="title">
        Fullheight title
      </h1>
      <h2 class="subtitle">
        Fullheight subtitle
      </h2>
    </div>
  </div>
</bu-hero>

Gradients

By setting the value of the gradient property to true, you can generate a subtle gradient.

Primary bold title

Primary bold subtitle

<bu-hero color="primary" size="medium" gradient="true">
  <div buContainer>
    <div class="container">
      <h1 class="title">
        Primary bold title
      </h1>
      <h2 class="subtitle">
        Primary bold subtitle
      </h2>
    </div>
  </div>
</bu-hero>