Block Social Proof Section
Block Social Proof Section is a component that helps you display the trust of customers, partners, or the community in your product or service.
Usage
import { SocialProofSection } from "@momo-webplatform/mobase";<SocialProofSection
template={DATA_DUMMY.template}
idSection={DATA_DUMMY.idSection}
dataHeading={DATA_DUMMY.dataHeading}
dataBrands={DATA_DUMMY.dataBrands}
isScrollSnap={DATA_DUMMY.isScrollSnap}
/>Example
Social Proof Section template 1
Social Proof Section template 2
API Reference
SocialProofSection
| Prop | Type | Default | Required |
template | enum1 | 2 | 1 | false |
dataHeading | HeadingBlockProps | -- | false |
dataBrands | BrandData[] | -- | false |
isScrollSnap | enumboolean | -- | 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.
}BrandData type
The array data brands of the Social Proof Section component.
interface BrandData {
name?: string; // Brand name.
logo?: string; // Brand logo.
url?: string; // Brand url.
newTab?: boolean; // Opens in a new tab when clicked.
}