Heading Group
The Heading Group component is allows the grouping of a heading with sub heading or tagline.
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
Prop | Type | Default | Required |
className | string | -- | false |
align | enumleft | center | right | center | false |
children | React.ReactNode | -- | false |
HeadingTagline
Prop | Type | Default | Required |
color | enumregular | pink | white | regular | false |
size | enumsmall | large | small | false |
isTruncated | enumboolean | false | false |
className | string | -- | false |
children | React.ReactNode | -- | false |
Heading
Prop | Type | Default | Required |
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
Prop | Type | Default | Required |
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 |