The MulticolorHeading component creates a visually striking heading with a diagonal two-tone color effect. The heading displays text in two colors separated by a diagonal line, using the theme's primary colors.
Note: This is a Coral Reef (internal) component, available only within the 228 monorepo and not included in public builds.
<MulticolorHeading>Welcome to Our Platform</MulticolorHeading>
Use the colorPercent prop to control where the diagonal color split occurs. A lower value shows less of the overlay color, while a higher value shows more.
<MulticolorHeading colorPercent={30}>30% Color Split</MulticolorHeading>
<MulticolorHeading colorPercent={50}>50% Color Split (Default)</MulticolorHeading>
<MulticolorHeading colorPercent={70}>70% Color Split</MulticolorHeading>The component uses smart text balancing and wraps gracefully for longer headings.
<MulticolorHeading> Build Amazing Applications with Our Comprehensive Development Platform </MulticolorHeading>
| Name | Type | Default | Description |
|---|---|---|---|
children | string | The text content to display in the heading. Must be a string. | |
colorPercent | number | 50 | The percentage of the heading width where the diagonal color split occurs. Controls how much of the heading uses the primary color versus the overlay color. |
The component creates the two-tone effect by layering two identical headings:
Base layer - The full heading text in primary950 color
Overlay layer - A clipped version in primary500 color with background500 background
The overlay uses a CSS clip-path polygon to create the diagonal cut. The diagonal angle is created by offsetting the bottom edge 15% to the left of the top edge.
The component uses the following theme colors:
themeColors.primary950 - Base text color (darker)
themeColors.primary500 - Overlay text color (lighter)
themeColors.background500 - Overlay background color
The appearance will automatically adapt based on the active theme (Chalkboard, White Paper, Text Page, or App Page).
The overlay layer includes aria-hidden="true" to prevent screen readers from announcing the heading text twice. Only the base layer is read by assistive technologies.
The component automatically adjusts font size on smaller screens. On mobile (below 768px), the font size is reduced to 90% of the desktop size to ensure the heading fits comfortably on narrow viewports.