Skip to main content

Hero Block

Hero is a responsive marketing hero section built on MUI with headline copy, a primary call-to-action, and a large hero image in a row layout on large screens.

Installation​

npm install @nodeblocks/frontend-hero-block

What You Need​

ItemWhy it matters
bylineThe headline
buttonTextLabel on the CTA
onClickButtonHandler when the CTA is clicked
imageUrlSource URL for image (2:1 aspect ratio expected)
Content lives in your app

Pass copy and imagery from your page or CMS. Optional secondaryText and tertiaryText render below the byline and under the button. Use imageAlignment to adjust vertical placement of the image on large screens (top, center, or bottom).

Code Examples​

Doc previews use a bounded frame and explicit Hero.Img sizing so the hero fits the live editor. In your app, use full-width layout and omit those preview-only styles.

Live Editor
function Example() {
  const imageUrl = '/img/undraw_docusaurus_mountain.svg';

  return (
    <Hero
      byline="Welcome to Our Platform"
      secondaryText="Streamline operations and boost productivity"
      tertiaryText="Free 30-day trial • No credit card required"
      buttonText="Get Started"
      imageUrl={imageUrl}
      onClickButton={() => {}}
      sx={{
        '& .nbb-hero-content': {
          position: 'relative',
          zIndex: 1,
          maxWidth: '100%',
        },
        '& .nbb-hero-content-byline, & .nbb-hero-content-secondary-text, & .nbb-hero-content-tertiary-text': {
          color: 'grey.900',
          textShadow:
            '0 0 8px rgba(255,255,255,1), 0 0 16px rgba(255,255,255,0.9), 0 1px 2px rgba(255,255,255,0.95)',
        },
        '& .nbb-hero-content-tertiary-text': {
          color: 'primary.dark',
        },
      }}
    />
  );
}
Result
Loading...

Important Props​

Core Props​

PropTypeRequiredDefaultDescription
bylineReactNodeYes—Main headline rendered by Hero.Content.Byline
buttonTextstringYes—Label on Hero.Content.ActionButton
onClickButton() => voidYes—Called when the action button is clicked (also used when Hero.Content.ActionButton has no onClick)
imageUrlstringYes—Image source passed to Hero.Img when src is not set on the sub-component

Content Props​

PropTypeRequiredDefaultDescription
secondaryTextReactNodeNoundefinedLarge supporting line below the byline (Hero.Content.SecondaryText)
tertiaryTextReactNodeNoundefinedSmaller line below the action button (Hero.Content.TertiaryText)
imageAlignment'top' | 'center' | 'bottom'NoundefinedVertical alignment of Hero.Img on large screens (lg breakpoint)

Layout and Composition Props​

PropTypeRequiredDefaultDescription
childrenReactNode | functionNoundefinedCompound sub-components (Hero.Content, Hero.Img, …) or a function ({ defaultBlocks, defaultBlockOrder }) => ({ blocks, blockOrder }) to inject or reorder layout blocks
classNamestringNoundefinedClass name on the root stack (nbb-hero)
sxSxPropsNoundefinedMUI system styles for the root stack

Hero inherits StackProps (except children). Default defaultBlockOrder: content, img, byline, secondaryText, actionButton, tertiaryText.

Sub-component props​

Sub-components read from context and accept the same content keys as props to override locally.

Sub-componentMain PropsInheritsBuilt on
Hero.Contentchildren, spacing (default { xs: 3, lg: 4 }), className, sxStackPropsStack
Hero.Imgsrc, alt (default hero image), imageUrl, imageAlignment, component, className, sxBoxPropsBox (component="img")
Hero.Content.Bylinebyline, children, variant (default h3), className, sxTypographyPropsTypography
Hero.Content.SecondaryTextsecondaryText, children, variant (default h2), className, sxTypographyPropsTypography
Hero.Content.ActionButtonbuttonText, onClickButton, onClick, children, variant (default contained), className, sxButtonPropsButton
Hero.Content.TertiaryTexttertiaryText, children, variant (default h6), color (default primary), className, sxTypographyPropsTypography

Default UI Blocks​

BlockBuilt onNotes
Hero (root)StackRow on lg, centered, max height capped (nbb-hero)
content (Hero.Content)StackText column with byline group and CTA group (nbb-hero-content)
img (Hero.Img)BoxRenders imageUrl; alt defaults to hero image (nbb-hero-img)
byline (Hero.Content.Byline)TypographyResponsive heading from context byline
secondaryText (Hero.Content.SecondaryText)TypographyLarge centered line when secondaryText is set
actionButton (Hero.Content.ActionButton)ButtonContained CTA using context buttonText
tertiaryText (Hero.Content.TertiaryText)TypographyPrimary-colored line when tertiaryText is set

Default root render order: content → img.

TypeScript​

import * as React from 'react';
import { Hero } from '@nodeblocks/frontend-hero-block';
import type { ReactNode } from 'react';

type HeroSectionProps = {
  byline: ReactNode;
  buttonText: string;
  imageUrl: string;
  onClickButton: () => void;
  secondaryText?: ReactNode;
  tertiaryText?: ReactNode;
  imageAlignment?: 'top' | 'center' | 'bottom';
};

export function HeroSection({
  byline,
  buttonText,
  imageUrl,
  onClickButton,
  secondaryText,
  tertiaryText,
  imageAlignment,
}: HeroSectionProps) {
  return (
    <Hero
      byline={byline}
      buttonText={buttonText}
      imageUrl={imageUrl}
      onClickButton={onClickButton}
      secondaryText={secondaryText}
      tertiaryText={tertiaryText}
      imageAlignment={imageAlignment}
    />
  );
}