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

Props

Prop	Type	Default	Description
`color`	`'primary' \| 'link' \| 'info' \| 'success' \| 'warning' \| 'danger' \| ...`	—	Bulma color modifier for the hero section.
`size`	`'small' \| 'medium' \| 'large' \| 'fullheight' \| 'fullheight-with-navbar'`	—	Hero size.
`fullheightWithNavbar`	`boolean`	`false`	Use fullheight hero with a navbar offset.
`bgColor`	`'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` \| `'black'` \| `'black-bis'` \| `'black-ter'` \| `'grey-darker'` \| `'grey-dark'` \| `'grey'` \| `'grey-light'` \| `'grey-lighter'` \| `'white'` \| `'light'` \| `'dark'` \| `'inherit'` \| `'current'`	—	Bulma background color helper.
`className`	`string`	—	Additional CSS classes.
`children`	`React.ReactNode`	—	Hero content (often includes `Hero.Head`, `Hero.Body`, `Hero.Foot`).
...	All standard HTML 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.

Usage

Default Hero

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

All Colors

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

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

<>
  <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">
            <div className="buttons">
              <Button color="primary" isInverted as="a">
                Github
              </Button>
            </div>
          </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

<Hero color="primary" size="medium">
  <Hero.Head>
    <Navbar>
      <Container>
        <Navbar.Brand>
          <Navbar.Item as="a">
            <img
              src="https://bulma.io/assets/images/bulma-type-white.png"
              alt="Logo"
            />
          </Navbar.Item>
          <span className="navbar-burger" data-target="navbarMenuHeroA">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
          </span>
        </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">
                <Icon
                  library="fa"
                  name="github"
                  libraryFeatures={['fab']}
                  ariaLabel="github"
                />
                <span>Github</span>
              </Button>
            </Navbar.Item>
          </Navbar.End>
        </Navbar.Menu>
      </Container>
    </Navbar>
  </Hero.Head>

  <Hero.Body>
    <Container className="has-text-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>

Accessibility

The hero renders as a semantic <section> by default.
Subcomponents use semantic <div> for layout but you can 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.

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

Pro Tip

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

Overview​

Import​

Props​

Usage​

Default Hero​

All Colors​

All Sizes​

Fullheight with Navbar​

Fullheight with Head, Body, and Foot​

Accessibility​

Related Components​

Additional Resources​