Skip to main content

Merits Block

The Merits Component is a fully customizable and accessible merits/benefits display block built with React and TypeScript. It provides a complete interface for showcasing company merits, benefits, or features with modern design patterns, flexible customization options, and responsive layout.

πŸš€ Installation​

npm install @nodeblocks/frontend-merits-block

πŸ“– Usage​

import {Merits} from '@nodeblocks/frontend-merits-block';
Live Editor
function BasicMerits() {
  const meritsData = [
    {
      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={meritsData}
      style={{backgroundColor: 'white', padding: '16px'}}>
      <Merits.Header />
      <Merits.Content />
      <Merits.ActionBar />
    </Merits>
  );
}
Result
Loading...

πŸ”§ Props Reference​

Main Component Props​

PropTypeDefaultDescription
subtitleReactNodeRequiredSubtitle text displayed above the main title
meritsTitleReactNodeRequiredMain title for the merits section
buttonTextstringRequiredText content for the action button
buttonHrefstringRequiredURL or path for the action button link
itemsMeritProps[]RequiredArray of merit items to display
classNamestringundefinedAdditional CSS class name for styling the container
childrenBlocksOverrideundefinedCustom block components to override default rendering

Note: The main component inherits all HTML div element props.

Sub-Components​

The Merits 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.

Merits.Header​

PropTypeDefaultDescription
childrenReactNodeDefault header contentCustom content to override default header rendering
subtitleReactNodeFrom contextSubtitle text to display (overrides context subtitle)
meritsTitleReactNodeFrom contextMain title text to display (overrides context meritsTitle)

Note: This component inherits all HTML div element props.

Merits.Content​

PropTypeDefaultDescription
childrenReactNodeDefault merit itemsCustom content to override default merit items rendering
itemsMeritProps[]From contextArray of merit items to display (overrides context items)

Note: This component inherits all HTML div element props.

Merits.Content.MeritImage​

PropTypeDefaultDescription
srcstringundefinedURL for the image
altstringundefinedAlt text for the image
classNamestringundefinedAdditional CSS class name for styling

Note: This component inherits all HTML img element props.

Merits.Content.MeritText​

PropTypeDefaultDescription
childrenReactNodeFrom contextTitle content - overrides errorTitle from context
sizeenum"2XL"Typography size for the title
typeenum"heading"Typography type
colorenum"low-emphasis"Color theme for the title
weightenum"bold"Weight of the title
classNamestringundefinedAdditional CSS class name for styling

Note: This component inherits all HTML span element props.

Merits.Content.MeritSubtext​

PropTypeDefaultDescription
childrenReactNodeFrom contextTitle content - overrides errorTitle from context
sizeenum"S"Typography size for the title
typeenum"heading"Typography type
colorenum"low-emphasis"Color theme for the title
weightenum"regular"Weight of the title
classNamestringundefinedAdditional CSS class name for styling

Note: This component inherits all HTML span element props.

Merits.ActionBar​

PropTypeDefaultDescription
childrenReactNodeDefault buttonCustom content to override default action bar rendering

Note: This component inherits all HTML div element props. Renders a Merits.ActionBar.Button component.

Merits.ActionBar.Button​

PropTypeDefaultDescription
childrenReactNodeRequiredText to place inside the button
classNamestringundefinedAdditional CSS class name for styling
fillenum"fill"Button fill style
iconenumundefinedOptional icon for the left-hand side of the button
iconColorenumundefinedColor for the left-hand side icon. When not provided, a default color for the fill type will be used.
isDisabledbooleanfalseWhether the button is disabled and cannot be used
onClickfunctionundefinedFunction to handle button click
sizeenum"M"Button vertical size
textAlignenum"center"Button icon and text positioning within the button
textColorenum"default"Button text color
textEmphasisbooleanfalseButton text weight
textSizeenum"M"Button text size
typeenum"button"Button purpose (affects html type)

πŸ”§ TypeScript Support​

Full TypeScript support with comprehensive type definitions:

import {Merits} from '@nodeblocks/frontend-merits-block';
import {ComponentProps, ReactNode} from 'react';

// Merit item interface
interface MeritProps {
  imageUrl: string;
  text: ReactNode;
  subtext: ReactNode;
}

// Main component interface
interface MeritsProps extends Omit<ComponentProps<'div'>, 'children'> {
  subtitle: ReactNode;
  meritsTitle: ReactNode;
  buttonText: string;
  buttonHref: string;
  items: MeritProps[];
}

// Example with comprehensive merits configuration
function CustomMeritsSection() {
  const meritsData: MeritProps[] = [
    {
      imageUrl: '/icons/speed.svg',
      text: 'Lightning Fast',
      subtext: 'Optimized performance for the best user experience',
    },
    {
      imageUrl: '/icons/security.svg',
      text: 'Secure & Reliable',
      subtext: 'Enterprise-grade security with 99.9% uptime guarantee',
    },
    {
      imageUrl: '/icons/support.svg',
      text: '24/7 Expert Support',
      subtext: 'Get help from our team of experts anytime, anywhere',
    },
  ];

  return (
    <Merits
      subtitle="Why Choose Our Platform"
      meritsTitle="Built for Modern Businesses"
      buttonText="Start Free Trial"
      buttonHref="/signup"
      items={meritsData}
      className="custom-merits-section"
      style={{backgroundColor: '#f8f9fa', padding: '4rem 2rem'}}
      id="benefits-section">
      <Merits.Header className="custom-header" style={{marginBottom: '3rem'}} />
      <Merits.Content
        className="custom-content"
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
          gap: '2rem',
        }}
      />
      <Merits.ActionBar className="custom-action-bar" style={{marginTop: '3rem'}}>
        <Merits.ActionBar.Button href="/get-started" className="premium-cta">
          πŸš€ Get Started Today
        </Merits.ActionBar.Button>
      </Merits.ActionBar>
    </Merits>
  );
}

Built with ❀️ using React, TypeScript, and modern web standards.