Skip to main content

How To Use Block

HowToUse is a composable marketing-steps block built on MUI.

Installation​

npm install @nodeblocks/frontend-how-to-use-block@0.4.2

What You Need​

ItemWhy it matters
subtitleLarge headline
headerContentSupporting label above the headline
cardListContent for step cards
messageFooter line above the CTA (hidden when falsy)
linkHrefhref for the footer contained button
linkContentLabel on the footer button
Content lives in your app

Pass header copy, step cards, and CTA text from your page or CMS. Each card needs an MUI icon, headerContent, and body text as children. Provide cards via cardList on the root, or compose HowToUse.CardList children directly.

Code Examples​

Live Editor
function Example() {
  const cardList = [
    <HowToUse.Card key="apply" icon={EditOutlined} headerContent="Apply">
      Create your account and tell us about your skills and experience.
    </HowToUse.Card>,
    <HowToUse.Card key="account" icon={AccountBoxOutlined} headerContent="Set up your profile">
      Add your work history, portfolio links, and preferences.
    </HowToUse.Card>,
    <HowToUse.Card key="post" icon={AddToQueue} headerContent="Start matching">
      Browse opportunities and apply to roles that fit your goals.
    </HowToUse.Card>,
  ];

  return (
    <HowToUse
      subtitle="How it works"
      headerContent="STEPS"
      message="Get started in minutes"
      linkHref="#sign-up"
      linkContent="Create free account"
      cardList={cardList}
    />
  );
}
Result
Loading...

Important Props​

Core Props​

PropTypeRequiredDefaultDescription
subtitleReactNodeYes-Large headline in HowToUse.Header (h1, responsive up to 45px)
headerContentReactNodeYes-Supporting label in HowToUse.Header (primary.main, responsive h6/h4)
messageReactNodeYes-Footer line above the CTA in HowToUse.Footer (hidden when falsy)
linkHrefstringYes-href on the footer contained button
linkContentReactNodeYes-Label on the footer button
cardListReactNode[]No-Step cards rendered by HowToUse.CardList when CardList has no children

Layout and Composition Props​

PropTypeRequiredDefaultDescription
childrenReactNode | functionNo-Compound sub-components (HowToUse.Header, HowToUse.CardList, HowToUse.Card, HowToUse.Footer) or a function ({ defaultBlocks, defaultBlockOrder }) => ({ blocks, blockOrder }) to inject or reorder layout blocks
classNamestringNo-Class name on the root stack (nbb-how-to-use)
sxSxPropsNo-MUI system styles for the root stack
spacingStackProps['spacing']No{ xs: 5, sm: 6 }Vertical spacing on the root stack

HowToUse inherits StackProps (except children). Default defaultBlockOrder: header, cardList, card, footer.

Sub-component props​

Sub-components read from context and accept the same content keys as props to override locally. HowToUse.Footer requires message, linkHref, and linkContent when composed directly.

Sub-componentMain PropsInheritsBuilt on
HowToUse.Headersubtitle, headerContent, children, className, sxStackPropsStack + Typography
HowToUse.CardListcardList, children, className, sxStackPropsStack + ArrowRight / ArrowDropDown between cards
HowToUse.Cardicon, headerContent, children, className, sxCardPropsCard + Typography
HowToUse.Footermessage, linkHref, linkContent, children, className, sxStackPropsStack + Button (variant="contained", size="large")

Default UI Blocks​

BlockBuilt onNotes
HowToUse (root)StackColumn layout (nbb-how-to-use); background uses theme.palette.background.default
header (HowToUse.Header)Stack + TypographyCentered headerContent and subtitle headline
cardList (HowToUse.CardList)Stack + arrow iconsColumn on xs, row on sm+; ArrowDropDown between cards on small screens, ArrowRight on larger screens
card (HowToUse.Card)Card + Typographyarticle card; icon, headerContent, and body text (nbb-how-to-use-card)
footer (HowToUse.Footer)Stack + ButtonOptional message line and contained CTA with linkHref / linkContent (nbb-how-to-use-footer)

Default root render order: header → cardList → footer.

TypeScript​

import * as React from 'react';
import type { SvgIconComponent } from '@mui/icons-material';
import { HowToUse } from '@nodeblocks/frontend-how-to-use-block';
import type { ReactNode } from 'react';

type HowToUseStep = {
  key: string;
  icon: SvgIconComponent;
  headerContent: ReactNode;
  body: ReactNode;
};

type HowToUseSectionProps = {
  subtitle: ReactNode;
  headerContent: ReactNode;
  message: ReactNode;
  linkHref: string;
  linkContent: ReactNode;
  steps: HowToUseStep[];
};

export function HowToUseSection({
  subtitle,
  headerContent,
  message,
  linkHref,
  linkContent,
  steps,
}: HowToUseSectionProps) {
  const cardList = steps.map(({ key, icon, headerContent: title, body }) => (
    <HowToUse.Card key={key} icon={icon} headerContent={title}>
      {body}
    </HowToUse.Card>
  ));

  return (
    <HowToUse
      subtitle={subtitle}
      headerContent={headerContent}
      message={message}
      linkHref={linkHref}
      linkContent={linkContent}
      cardList={cardList}
    />
  );
}