Skip to main content

Merits Block

Merits is a marketing benefits section built on MUI with a centered header, a row of merit tiles, and a primary call-to-action link button.

Installation​

npm install @nodeblocks/frontend-merits-block

What You Need​

ItemWhy it matters
subtitleSupporting text line
meritsTitleMain heading
itemsMerit tiles content
buttonTextLabel on the CTA
buttonHrefhref for the default contained button
Content lives in your app

Pass header copy, merit items, and CTA text from your page or CMS. Each item needs imageUrl, text, and subtext. Images use object-fit: contain inside a fixed aspect-ratio frame on small and large screens.

Code Examples​

Live Editor
function Example() {
  const items = [
    {
      imageUrl: '/img/undraw_docusaurus_mountain.svg',
      text: 'Fast Delivery',
      subtext: 'Get your orders delivered quickly and efficiently',
    },
    {
      imageUrl: '/img/undraw_docusaurus_react.svg',
      text: 'Quality Guarantee',
      subtext: 'We ensure the highest quality for all our products',
    },
    {
      imageUrl: '/img/undraw_docusaurus_tree.svg',
      text: '24/7 Support',
      subtext: 'Round-the-clock customer support for all your needs',
    },
  ];

  return (
    <Merits
      subtitle="Why Choose Us"
      meritsTitle="Our Key Benefits"
      buttonText="Learn More"
      buttonHref="#about"
      items={items}
    />
  );
}
Result
Loading...

Important Props​

Core Props​

PropTypeRequiredDefaultDescription
subtitleReactNodeYes—Supporting header line (Merits.Header, primary color)
meritsTitleReactNodeYes—Main heading in Merits.Header
items{ imageUrl: string; text: ReactNode; subtext: ReactNode }[]Yes—Merit tiles mapped in Merits.Content
buttonTextstringYes—Label on the default CTA button in Merits.ActionBar
buttonHrefstringYes—href passed to the default Merits.ActionBar.Button

Layout and Composition Props​

PropTypeRequiredDefaultDescription
childrenReactNode | functionNoundefinedCompound sub-components (Merits.Header, Merits.Content, Merits.ActionBar) or a function ({ defaultBlocks, defaultBlockOrder }) => ({ blocks, blockOrder }) to inject or reorder layout blocks
classNamestringNoundefinedClass name on the root stack (nbb-merits)
sxSxPropsNoundefinedMUI system styles for the root stack
spacingStackProps['spacing']No{ xs: 4, sm: 6 }Vertical spacing on the root stack

Merits inherits StackProps (except children). Default defaultBlockOrder: header, content, actionBar.

Sub-component props​

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

Sub-componentMain PropsInheritsBuilt on
Merits.Headerchildren, className, sxStackPropsStack + Typography
Merits.Contentitems, children, className, sxStackPropsStack + Merits.Content.MeritImage + Merits.Content.MeritText
Merits.Content.MeritImagemeritSrc, meritAlt (default merit image), className, sxBoxPropsBox (component="img")
Merits.Content.MeritTextchildren, className, sxTypographyPropsTypography
Merits.ActionBarbuttonText, buttonHref, children, className, sxStackPropsStack + Merits.ActionBar.Button
Merits.ActionBar.Buttonchildren, href, className, sxButtonPropsButton (variant="contained", size="large")

Default UI Blocks​

BlockBuilt onNotes
Merits (root)StackColumn layout, responsive spacing (nbb-merits)
header (Merits.Header)Stack + TypographyCentered subtitle (responsive h6/h4) and title (responsive up to 45px)
content (Merits.Content)Stack + DividerRow on sm+; each item: image frame, text (MeritText), subtext (MeritSubtext, body1)
actionBar (Merits.ActionBar)Stack + ButtonContained CTA with buttonHref and buttonText; full width on xs

Default root render order: header → content → actionBar.

TypeScript​

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

type MeritItem = {
  imageUrl: string;
  text: ReactNode;
  subtext: ReactNode;
};

type MeritsSectionProps = {
  subtitle: ReactNode;
  meritsTitle: ReactNode;
  buttonText: string;
  buttonHref: string;
  items: MeritItem[];
};

export function MeritsSection({
  subtitle,
  meritsTitle,
  buttonText,
  buttonHref,
  items,
}: MeritsSectionProps) {
  return (
    <Merits
      subtitle={subtitle}
      meritsTitle={meritsTitle}
      buttonText={buttonText}
      buttonHref={buttonHref}
      items={items}
    />
  );
}