Hero

Overview

The Hero component provides a responsive, flexible, and visually striking section for your Bulma React UI.

It supports all Bulma hero color and size modifiers, including fullheight, background helpers, and composition with Hero.Head, Hero.Body, and Hero.Foot subcomponents. Use it to showcase prominent content, headers, or landing sections.

info

You can use Hero as a simple colored banner, or compose it with Hero.Head, Hero.Body, and Hero.Foot for complex layouts with navigation, content, and tabs.

---

Import

import { Hero } from '@allxsmith/bestax-bulma';

---

Usage

Default Hero

This example shows a standard Hero component with a centered title and subtitle. Use the Hero component to create visually striking banners or headers for your app. The Hero.Body subcomponent centers the content vertically.

<Hero>
  <Hero.Body>
    <Container>
      <Title>Hero title</Title>
      <SubTitle>Hero subtitle</SubTitle>
    </Container>
  </Hero.Body>
</Hero>

---

All Colors

This example demonstrates the color prop, which applies Bulma color modifiers to the hero section. Use different color values to visually distinguish sections or indicate context.

<>
  <Hero color="link">
    <Hero.Body>
      <Container>
        <Title>Hero title (link)</Title>
        <SubTitle>Hero subtitle (link)</SubTitle>
      </Container>
    </Hero.Body>
  </Hero>
  <Hero color="primary">
    <Hero.Body>
      <Container>
        <Title>Hero title (primary)</Title>
        <SubTitle>Hero subtitle (primary)</SubTitle>
      </Container>
    </Hero.Body>
  </Hero>
  <Hero color="info">
    <Hero.Body>
      <Container>
        <Title>Hero title (info)</Title>
        <SubTitle>Hero subtitle (info)</SubTitle>
      </Container>
    </Hero.Body>
  </Hero>
  <Hero color="success">
    <Hero.Body>
      <Container>
        <Title>Hero title (success)</Title>
        <SubTitle>Hero subtitle (success)</SubTitle>
      </Container>
    </Hero.Body>
  </Hero>
  <Hero color="warning">
    <Hero.Body>
      <Container>
        <Title>Hero title (warning)</Title>
        <SubTitle>Hero subtitle (warning)</SubTitle>
      </Container>
    </Hero.Body>
  </Hero>
  <Hero color="danger">
    <Hero.Body>
      <Container>
        <Title>Hero title (danger)</Title>
        <SubTitle>Hero subtitle (danger)</SubTitle>
      </Container>
    </Hero.Body>
  </Hero>
</>

---

All Sizes

This example showcases the size prop to demonstrate the different predefined hero sizes. Combine with the color prop for varied visual effects.

<>
  <Hero color="info" size="small">
    <Hero.Body>
      <Container>
        <Title>Hero title (small)</Title>
        <SubTitle>Hero subtitle (small)</SubTitle>
      </Container>
    </Hero.Body>
  </Hero>
  <Hero color="primary" size="medium">
    <Hero.Body>
      <Container>
        <Title>Hero title (medium)</Title>
        <SubTitle>Hero subtitle (medium)</SubTitle>
      </Container>
    </Hero.Body>
  </Hero>
  <Hero color="success" size="large">
    <Hero.Body>
      <Container>
        <Title>Hero title (large)</Title>
        <SubTitle>Hero subtitle (large)</SubTitle>
      </Container>
    </Hero.Body>
  </Hero>
  <Hero color="danger" size="fullheight">
    <Hero.Body>
      <Container>
        <Title>Hero title (fullheight)</Title>
        <SubTitle>Hero subtitle (fullheight)</SubTitle>
      </Container>
    </Hero.Body>
  </Hero>
</>

---

Fullheight with Navbar

This example demonstrates using the fullheightWithNavbar prop to create a hero that takes the full height of the screen, adjusting for the height of the navbar. This is useful for landing pages or sections that require prominent visibility.

<>
  <Navbar>
    <Container>
      <Navbar.Menu id="navMenu">
        <Navbar.Start>
          <Navbar.Item as="a">Getting Started</Navbar.Item>
          <Navbar.Item as="a">APIs</Navbar.Item>
          <Navbar.Item as="a">Blog</Navbar.Item>
        </Navbar.Start>
        <Navbar.End>
          <Navbar.Item as="span">
            <Button color="primary" isInverted as="a" mx="2">
              Github
            </Button>
          </Navbar.Item>
        </Navbar.End>
      </Navbar.Menu>
    </Container>
  </Navbar>
  <Hero color="link" fullheightWithNavbar>
    <Hero.Body>
      <Container>
        <Title>Fullheight with navbar</Title>
      </Container>
    </Hero.Body>
  </Hero>
</>

---

Fullheight with Head, Body, and Foot

This example shows a comprehensive usage of the Hero component with all its subcomponents: Hero.Head, Hero.Body, and Hero.Foot. It's a complete layout for a hero section, including navigation, main content, and footer tabs.

<Hero color="primary" size="medium">
  <Hero.Head>
    <Navbar>
      <Container>
        <Navbar.Brand>
          <Navbar.Item as="a">
            <Image src="/img/bestax-type-white.svg" alt="Bestax" mx="2" />
          </Navbar.Item>
          <Navbar.Burger />
        </Navbar.Brand>
        <Navbar.Menu id="navbarMenuHeroA">
          <Navbar.End>
            <Navbar.Item as="a" active>
              Getting Started
            </Navbar.Item>
            <Navbar.Item as="a">APIs</Navbar.Item>
            <Navbar.Item as="a">Blog</Navbar.Item>
            <Navbar.Item as="span">
              <Button color="primary" isInverted as="a" mx="2">
                <Icon
                  library="fa"
                  name="github"
                  variant="brands"
                  ariaLabel="github"
                />
                <Span>Github</Span>
              </Button>
            </Navbar.Item>
          </Navbar.End>
        </Navbar.Menu>
      </Container>
    </Navbar>
  </Hero.Head>

  <Hero.Body>
    <Container textAlign="centered">
      <Title>Bestax</Title>
      <SubTitle>A Bulma Component Library</SubTitle>
    </Container>
  </Hero.Body>

  <Hero.Foot>
    <Tabs>
      <Container>
        <Tabs.List>
          <Tabs.Item>
            <a>Elements</a>
          </Tabs.Item>
          <Tabs.Item>
            <a>Components</a>
          </Tabs.Item>
          <Tabs.Item>
            <a>Columns</a>
          </Tabs.Item>
          <Tabs.Item>
            <a>Grid</a>
          </Tabs.Item>
          <Tabs.Item>
            <a>Layout</a>
          </Tabs.Item>
        </Tabs.List>
      </Container>
    </Tabs>
  </Hero.Foot>
</Hero>

---

Landmark Tags

Bulma pages often put the hero classes on landmarks: <main class="hero"> for a page that is all hero, or <footer class="hero-foot">. The as prop on Hero, Hero.Head and Hero.Foot (and on the Container inside) renders those tags directly. A header or footer is the page's banner or footer landmark only when no section, article, aside, nav or main is around it, so this hero renders as a div to let its head and foot be landmarks. Its Container is a named section rather than a main, since the page around the example already has its main.

<Hero as="div" color="primary">
  <Hero.Head as="header">
    <Container textAlign="centered" pt="4">
      <SubTitle size="6">Hero.Head as="header"</SubTitle>
    </Container>
  </Hero.Head>
  <Hero.Body>
    <Container as="section" textAlign="centered" aria-label="Welcome">
      <Title>Hero as="div"</Title>
      <SubTitle>Container as="section"</SubTitle>
    </Container>
  </Hero.Body>
  <Hero.Foot as="footer">
    <Container textAlign="centered" pb="4">
      <SubTitle size="6">Hero.Foot as="footer"</SubTitle>
    </Container>
  </Hero.Foot>
</Hero>

---

Compound (dot-notation) usage

HeroHead, HeroBody, and HeroFoot are also available as Hero.Head, Hero.Body, and Hero.Foot, so the whole hero can be composed from the single Hero import.

<Hero color="info">
  <Hero.Head>
    <Container textAlign="centered" pt="4">
      <Title size="6">Hero head via dot notation</Title>
    </Container>
  </Hero.Head>
  <Hero.Body>
    <Container textAlign="centered">
      <Title>Hero title</Title>
      <SubTitle>Hero subtitle</SubTitle>
    </Container>
  </Hero.Body>
  <Hero.Foot>
    <Container textAlign="centered" pb="4">
      <SubTitle size="6">Hero foot via dot notation</SubTitle>
    </Container>
  </Hero.Foot>
</Hero>

---

Accessibility

• The hero renders as a semantic <section> by default. A <section> is a region landmark only once it has an accessible name, so give it an aria-label or aria-labelledby if it should be one.
• as renders the hero as div, main, header, footer, article or aside instead, Hero.Head as header or nav, and Hero.Foot as footer or nav; each takes that element's landmark role. Keep one visible main per page, and don't put a header or footer inside another one.
• Hero.Body renders a <div> for layout; use accessible children/content.
• Use headings (<Title>, <SubTitle>) for best screen reader support.

note

When using fullheight or fullheight-with-navbar, ensure your layout remains keyboard navigable and visually accessible.

---

Related Components

• Container: To constrain content width inside the hero section.
• Navbar: For navigation in the Hero.Head.
• Tabs: For tabs in the Hero.Foot.
• Button, Title, SubTitle: For content and actions in the hero.
• Helper Props: Use Bulma utility helpers for spacing, color, etc.

---

Additional Resources

• Bulma Hero Documentation
• Storybook: Hero Stories

Pro Tip

You can use all Bulma helper props with <Hero /> and its subcomponents for utility-based styling.

---

Props

Prop	Type	Default	Description
as	'section' | 'div' | 'main' | 'header' | 'footer' | 'article' | 'aside'	'section'	HTML element to render (default: section). Bulma pages often put the hero on a landmark: main when the hero is the page's main content, header for a banner above it, footer for one below it. A page has only one visible main, and a section is a region landmark only once it has an accessible name (aria-label, or aria-labelledby pointing at its heading).
className	string	—	Additional CSS classes.
color	Bulma color | 'inherit' | 'current'	—	Bulma color modifier for the hero section (renders is-<color>). Only primary, link, info, success, warning, danger, black, white, light, and dark have shipped CSS for .hero. Every other value the union accepts emits a class no CSS rule matches, so the hero renders unstyled; those log a console warning in development and will be removed from this union in the next major version.
size	'small' | 'medium' | 'large' | 'fullheight' | 'fullheight-with-navbar'	—	Hero size.
bgColor	Bulma color | (typeof validSchemeColors)[number] | 'inherit' | 'current'	—	Bulma background color helper. scheme-* values render as a dark-mode-safe inline background-color: var(--bulma-scheme-*) instead of a class. The scheme-invert* values do not change text color — pair them with a contrasting foreground.
fullheightWithNavbar	boolean	false	Use fullheight hero with a navbar offset.
children	React.ReactNode	—	Hero content (often includes Hero.Head, Hero.Body, Hero.Foot).
...	All standard HTML attributes and Bulma helper props	—	See Helper Props

Subcomponents:

• Hero.Head: Top bar for navigation or branding.
• Hero.Body: Main content area, vertically centered by default.
• Hero.Foot: Bottom bar for tabs or actions.

Hero.Head

Prop	Type	Default	Description
as	'div' | 'header' | 'nav'	'div'	HTML element to render (default: div). nav suits a head that holds only the site's navigation. A header is a banner landmark only when no section, article, aside, nav or main is around it, so inside the default <section> hero it is not one: render the hero as a div for that. A header may not sit inside another header or a footer.
className	string	—	Additional CSS classes.
color	Bulma color | 'inherit' | 'current'	—	Bulma color modifier for text.
bgColor	Bulma color | (typeof validSchemeColors)[number] | 'inherit' | 'current'	—	Background color. scheme-* values render as a dark-mode-safe inline background-color: var(--bulma-scheme-*) instead of a class. The scheme-invert* values do not change text color — pair them with a contrasting foreground.
textColor	Bulma color | 'inherit' | 'current'	—	Text color.
children	React.ReactNode	—	Content.
...	All standard HTML attributes and Bulma helper props	—	See Helper Props

Hero.Body

Prop	Type	Default	Description
className	string	—	Additional CSS classes.
color	Bulma color | 'inherit' | 'current'	—	Bulma color modifier for text.
bgColor	Bulma color | (typeof validSchemeColors)[number] | 'inherit' | 'current'	—	Background color. scheme-* values render as a dark-mode-safe inline background-color: var(--bulma-scheme-*) instead of a class. The scheme-invert* values do not change text color — pair them with a contrasting foreground.
textColor	Bulma color | 'inherit' | 'current'	—	Text color.
children	React.ReactNode	—	Content.
...	All standard <div> attributes and Bulma helper props	—	See Helper Props

Hero.Foot

Prop	Type	Default	Description
as	'div' | 'footer' | 'nav'	'div'	HTML element to render (default: div). nav suits a foot that holds tabs or links. A footer is a contentinfo landmark only when no section, article, aside, nav or main is around it, so inside the default <section> hero it is not one: render the hero as a div for that. A footer may not sit inside another footer or a header.
className	string	—	Additional CSS classes.
color	Bulma color | 'inherit' | 'current'	—	Bulma color modifier for text.
bgColor	Bulma color | (typeof validSchemeColors)[number] | 'inherit' | 'current'	—	Background color. scheme-* values render as a dark-mode-safe inline background-color: var(--bulma-scheme-*) instead of a class. The scheme-invert* values do not change text color — pair them with a contrasting foreground.
textColor	Bulma color | 'inherit' | 'current'	—	Text color.
children	React.ReactNode	—	Content.
...	All standard HTML attributes and Bulma helper props	—	See Helper Props

---

CSS & Sass Variables

Hero registers these variables on its own .hero element. Override them there (or via className) — a value set on an ancestor is only inherited, and loses to the component-level declaration. See Theme.

CSS Variable	Sass Variable	Default
--bulma-hero-body-padding	$hero-body-padding	3rem 1.5rem
--bulma-hero-body-padding-tablet	$hero-body-padding-tablet	3rem 3rem
--bulma-hero-body-padding-small	$hero-body-padding-small	1.5rem
--bulma-hero-body-padding-medium	$hero-body-padding-medium	9rem 4.5rem
--bulma-hero-body-padding-large	$hero-body-padding-large	18rem 6rem
--bulma-hero-gradient-h-offset	$hero-gradient-h-offset	5deg
--bulma-hero-gradient-s-offset	$hero-gradient-s-offset	10%
--bulma-hero-gradient-l-offset	$hero-gradient-l-offset	5%