Skip to main content

Hero Block

The Hero Component is a fully customizable and accessible hero section built with React and TypeScript. It provides a complete hero interface with modern design patterns, image display, and flexible customization options. Built on top of MUI components for consistent styling.

πŸš€ Installation​

npm install @nodeblocks/frontend-hero-block@0.2.0

πŸ“– Usage​

import {Hero} from '@nodeblocks/frontend-hero-block';
Live Editor
function BasicHero() {
  return (
    <Hero
      buttonText="Get Started"
      byline="Welcome to Our Platform"
      imageUrl="/img/undraw_docusaurus_mountain.svg"
      onClickButton={() => {
        console.log('Hero button clicked');
      }}
    >
      <Hero.HeroContent>
        <Hero.HeroContent.HeroByline />
        <Hero.HeroContent.ActionButton />
      </Hero.HeroContent>
      <Hero.HeroImg />
    </Hero>
  );
}
Result
Loading...

πŸ”§ Props Reference​

Main Component Props​

PropTypeDefaultDescription
buttonTextstringRequiredText to display on the action button
bylineReactNodeRequiredMain headline text for the hero section
imageUrlstringRequiredURL of the image to display in the hero section
onClickButton() => voidRequiredCallback function triggered when the action button is clicked
secondaryTextReactNodeundefinedSecondary text displayed below the byline
tertiaryTextReactNodeundefinedTertiary text displayed near the action button
classNamestringundefinedAdditional CSS class name for styling the hero container
sxSxProps<Theme>undefinedMUI system props for custom styling
childrenBlocksOverrideundefinedCustom block components to override default rendering

Note: This component inherits all MUI Stack component props.

Sub-Components​

The Hero component provides several sub-components. All sub-components receive their default values from the main component's context and can override these values through props.

Hero.HeroImg​

Renders the hero image using MUI Box with component="img".

PropTypeDefaultDescription
imageUrlstringContext valueURL of the image (from context)
srcstringundefinedURL of the image (overrides imageUrl)
altstring'hero image'Alt text for the image
componentElementType'img'Component type to render
classNamestringundefinedAdditional CSS class name for styling
sxSxProps<Theme>undefinedMUI system props for custom styling

Note: This component inherits all MUI Box component props. Priority for image source: src prop > imageUrl context value.

Hero.HeroContent​

Container for hero text content using MUI Stack.

PropTypeDefaultDescription
spacingnumber | string3Spacing between child elements
childrenReactNodeDefault layoutCustom content (replaces default layout)
classNamestringundefinedAdditional CSS class name for styling
sxSxProps<Theme>{ alignItems: 'center', py: 5.5 }MUI system props for custom styling

Note: This component inherits all MUI Stack component props. When no children provided, renders default layout with HeroByline, SecondaryText, ActionButton, and TertiaryText.

Hero.HeroContent.HeroByline​

Renders the main headline using MUI Typography.

PropTypeDefaultDescription
bylineReactNodeContext valueHeadline content (from context)
childrenReactNodeundefinedHeadline content (overrides byline)
variantTypographyVariant'h6'MUI Typography variant
classNamestringundefinedAdditional CSS class name for styling
sxSxProps<Theme>undefinedMUI system props for custom styling

Note: This component inherits all MUI Typography component props. Priority: children prop > byline context value.

Hero.HeroContent.SecondaryText​

Renders secondary text using MUI Typography. Returns null if no content provided.

PropTypeDefaultDescription
secondaryTextReactNodeContext valueSecondary text content (from context)
childrenReactNodeundefinedSecondary text content (overrides secondaryText)
variantTypographyVariant'h2'MUI Typography variant
classNamestringundefinedAdditional CSS class name for styling
sxSxProps<Theme>{ textAlign: 'center' }MUI system props for custom styling

Note: This component inherits all MUI Typography component props. Returns null if neither children nor secondaryText is provided.

Hero.HeroContent.ActionButton​

Renders the call-to-action button using MUI Button.

PropTypeDefaultDescription
buttonTextstringContext valueButton text (from context)
childrenReactNodeundefinedButton content (overrides buttonText)
onClickButton() => voidContext valueClick handler (from context)
onClick() => voidundefinedClick handler (overrides onClickButton)
variantButtonVariant'contained'MUI Button variant
classNamestringundefinedAdditional CSS class name for styling
sxSxProps<Theme>{ fontWeight: 600, px: 4, py: 1.5 }MUI system props for custom styling

Note: This component inherits all MUI Button component props. Priority for click handler: onClick prop > onClickButton context value.

Hero.HeroContent.TertiaryText​

Renders tertiary text using MUI Typography. Returns null if no content provided.

PropTypeDefaultDescription
tertiaryTextReactNodeContext valueTertiary text content (from context)
childrenReactNodeundefinedTertiary text content (overrides tertiaryText)
colorTypographyColor'primary'MUI Typography color
variantTypographyVariant'button'MUI Typography variant
classNamestringundefinedAdditional CSS class name for styling
sxSxProps<Theme>Theme-based stylingMUI system props for custom styling

Note: This component inherits all MUI Typography component props. Returns null if neither children nor tertiaryText is provided. Default sx includes lineHeight from body1 and fontWeight from h1.

🎨 Configuration examples​

Custom Hero Layout​

<Hero
  buttonText="Learn More"
  byline="Innovate with Confidence"
  imageUrl="/hero.jpg"
  onClickButton={() => {}}
  sx={{
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    px: 8,
    py: 10,
  }}
/>

Custom Hero Image Styling​

<Hero.HeroImg
  sx={{
    maxWidth: 500,
    borderRadius: 4,
    boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
    transition: 'transform 0.3s ease',
    '&:hover': {
      transform: 'scale(1.02)',
    },
  }}
/>

Custom Action Button Styling​

<Hero.HeroContent.ActionButton
  variant="outlined"
  sx={{
    borderWidth: 2,
    px: 6,
    py: 2,
    fontSize: '1.1rem',
    '&:hover': {
      borderWidth: 2,
      bgcolor: 'primary.main',
      color: 'primary.contrastText',
    },
  }}
/>

πŸ”§ TypeScript Support​

Full TypeScript support with comprehensive type definitions:

import {Hero} from '@nodeblocks/frontend-hero-block';
import {StackProps, BoxProps, TypographyProps, ButtonProps} from '@mui/material';
import {ReactNode} from 'react';

// Main component props extend MUI StackProps
interface HeroProps extends Omit<StackProps, 'children'> {
  buttonText: string;
  byline: ReactNode;
  onClickButton: () => void;
  imageUrl: string;
  secondaryText?: ReactNode;
  tertiaryText?: ReactNode;
  children?: BlocksOverride;
}

// Context type (values passed to all sub-components)
interface HeroContextValue {
  buttonText: string;
  byline: ReactNode;
  onClickButton: () => void;
  imageUrl: string;
  secondaryText?: ReactNode;
  tertiaryText?: ReactNode;
}

// Example with typed props
function TypedHeroExample() {
  return (
    <Hero
      buttonText="Get Started"
      byline="Welcome to Our Platform"
      imageUrl="/hero-image.jpg"
      onClickButton={() => console.log('clicked')}
      secondaryText="Build amazing products faster"
      tertiaryText="No credit card required"
      spacing={3}
      sx={{minHeight: '80vh'}}
    >
      <Hero.HeroContent spacing={4}>
        <Hero.HeroContent.HeroByline variant="h2" />
        <Hero.HeroContent.SecondaryText variant="h5" />
        <Hero.HeroContent.ActionButton variant="contained" color="primary" />
        <Hero.HeroContent.TertiaryText color="textSecondary" />
      </Hero.HeroContent>
      <Hero.HeroImg sx={{maxWidth: 500, borderRadius: 2}} />
    </Hero>
  );
}

πŸ“ Notes​

  • The component uses MUI's Stack as the root container
  • Hero.HeroContent uses default spacing={3} and centers content vertically with py: 5.5 padding
  • Hero.HeroImg uses MUI Box with component="img" and default alt text "hero image"
  • ActionButton has default styling with fontWeight: 600, px: 4, py: 1.5
  • SecondaryText and TertiaryText return null when no content is provided
  • TertiaryText uses theme-based styling for lineHeight and fontWeight
  • All sub-components support the sx prop for MUI system styling
  • Block override pattern allows inserting custom blocks and reordering

Built with ❀️ using React, TypeScript, and MUI.