Hero

The Hero component allows you to add a full-width banner to your webpage. Optionally, it can also span the full height of the page. Create an imposing hero banner to showcase your content.

API Documentation

How it works #

The Hero component creates a prominent, full-width banner section for your page, ideal for highlighting key content or messages. It can be used for headers, introductions, or calls to action.

How to use:
  1. Add the Hero component to your page to create a banner area.
  2. Place a HeroBody inside the Hero to define the main content area.
  3. Use HeroTitle and HeroSubTitle within HeroBody to display the main title and subtitle.
This demo shows the basic structure for a hero banner, making it easy to highlight important information at the top of your page.
Hero title
Hero subtitle
<Hero>
    <HeroBody>
        <HeroTitle>Hero title</HeroTitle>
        <HeroSubTitle>Hero subtitle</HeroSubTitle>
    </HeroBody>
</Hero>
DO YOU KNOW?
This demo website is built using the BlazorExpress.Bulma library and published on the Azure Web App. See our source code on GitHub.
If you like BlazorExpress.Bulma, give it a star on GitHub!