Components
Blocks Section
Feature Section

Block Feature Section

Compelling website sections that highlight product/service benefits.

Figma

Usage

import { FeatureSection } from "@momo-webplatform/mobase";
<FeatureSection
  template={DATA_DUMMY.template}
  idSection={DATA_DUMMY.idSection}  
  dataHeading={DATA_DUMMY.dataHeading}
  dataFeatures={DATA_DUMMY.dataFeatures}
/>

Example

Feature Section template 1

Feature Section template 2

Feature Section template 3

Feature Section template 4

Feature Section template 5

Feature Section template 6

Feature Section template 7

Feature Section template 8

When use feature section template 8, image of feature there will be ratio 347/220 or size image with 370x220 pixels.

Feature Section template 9

With feature section template 9, you can use dataBanner prop and dataButtons prop to show banner and buttons.

Feature Section template 10

With feature section template 10, you can use dataBanner prop to show banner. Banner image will be ratio 540/1168 or size image with 540x1168 pixels.

API Reference

FeatureSection component using Heading Group component, ActionButton component and AspectRatio component and supports all of its props.

⚠️ Note:

  • dataBanner prop only use for template 9 and 10. dataButtons prop only use for template 9.
  • When use feature section in typescript, you can use FeatureSectionProps type or React.ComponentProps<typeof FeatureSection>[prop] to define props for data passed to FeatureSection component.
FeatureSection
PropTypeDefaultRequired
template
enum1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 1 false
dataHeading
HeadingBlockProps--false
dataFeatures
FeatureData[]--false
dataButtons
ButtonsBlockProps--false
dataBanner
BannerData--false
idSection
string--false
className
string--false
background
string--false
children
enumReactNode--false

Type Data Props

HeadingBlockProps type

interface HeadingBlockProps {
  tagline?: string ; // The tagline of the heading.
  title?: string; // The title of the heading.
  description?: string; // The description of the heading.
  tagHeading?: "h1" | "h2"; // HTML Tag heading. Default is "h2". 
  align?: "center" | "left" | "right"; // Align the heading. Default is "center".
  sizeHeading?: "small" | "large"; // Size of the heading. Default is "small".
  className?: string; // CSS class to be appended to the root element heading.
}

FeatureData type

The array data features of the feature section.

interface FeatureData {
  name?: string; // Feature name.  
  description?: string; // Feature description.
  image?: string; // Feature image.  
  btnName?: string; // Button name. 
  btnLink?: string; // Button link. 
  newTab?: boolean; // Feature button use new tab.
}

ButtonsBlockProps type

interface ButtonsBlockProps {
  className?: string; // CSS class to be appended to the root element.
  align?: "center" | "left" | "right"; // ALign the button.
  isFullInMobile?: boolean; // Button is full width in mobile.
  buttons?: dataButton[];  // Button group data.
}
 
interface dataButton extends ActionButtonProps {
  btnName?: string; // Button name.
  // ... ActionButtonProps  
}

BannerData type

interface BannerData {
  src?: string; // The image source.
  alt?: string; // The image alt.
  ratio?: number; //The image ratio. Default is 1.
}
Hero SectionSocial Proof Section