Components
Heading Group

Heading Group

The Heading Group component is allows the grouping of a heading with sub heading or tagline.

Heading 1:
Mua thẻ game

Mua mọi thẻ game trên Napthengay.vn thanh toán tiện lợi qua Ví MoMo

Website bán thẻ game hàng đầu Việt Nam với tất cả các loại thẻ game của các Nhà phát hành game hot nhất tại Việt Nam như Garena, Zing, Gate, VCoin,..
Heading 2:

Thanh toán dư nợ thẻ tín dụng dễ dàng trên MoMo

Ghi nhận giao dịch 24/7, kiểm tra dư nợ nhanh chóng, tự động nhắc kỳ thanh toán, quản lý nhiều thẻ trên 1 ứng dụng

Usage

HeadingGroup component provides the following features:

  • HeadingGroup: A container that groups a heading with secondary content like a tagline and subheading, ensuring a structured and consistent section heading.

  • HeadingTagline: Displays a short, impactful line above or below the main heading.

  • Heading: The main heading element for a section, supporting various heading levels (h1-h2), sizes, and colors for flexible styling.

  • HeadingSub: Provides additional context or description under the main heading, typically smaller and customizable with different sizes and spacing.

import { HeadingGroup, HeadingTagline, Heading, HeadingSub } from "@momo-webplatform/mobase";
<HeadingGroup>
  <HeadingTagline isTruncated>
    Mua thẻ game
  </HeadingTagline>
  <Heading color="regular" tagHeading="h1" size="large" >
    Mua mọi thẻ game trên Napthengay.vn thanh toán tiện lợi qua Ví MoMo
  </Heading>
  <HeadingSub marginTop="spacing2Xl" size="large">
    Website bán thẻ game hàng đầu Việt Nam với tất cả các loại thẻ game của các Nhà phát hành game hot nhất tại Việt Nam như Garena, Zing, Gate, VCoin,..
  </HeadingSub>
</HeadingGroup>

API Reference

HeadingGroup
PropTypeDefaultRequired
className
string--false
align
enumleft | center | right center false
children
React.ReactNode--false
HeadingTagline
PropTypeDefaultRequired
color
enumregular | pink | white regular false
size
enumsmall | large small false
isTruncated
enumboolean false false
className
string--false
children
React.ReactNode--false
Heading
PropTypeDefaultRequired
tagHeading
enumh1 | h2 h2 false
color
enumregular | pink | white regular false
size
enumsmall | large small false
isTruncated
enumboolean false false
className
string--false
children
React.ReactNode--false
HeadingSub
PropTypeDefaultRequired
color
enumregular | white regular false
size
enumsmall | large small false
marginTop
enumnone | spacingX | spacingM | spacingL | spacingXl | spacing2Xl spacingX false
isTruncated
enumboolean false false
className
string--false
children
React.ReactNode--false