Highlight Heading
Demo
The best low-code framework
in Montrouge
The best low-code framework
in Montrouge
The best low-code framework
in Montrouge
Props
| Name | Type | Description |
|---|---|---|
title | string | The main title text in which a segment will be highlighted. |
highlight | string | The text segment within the title to be highlighted. |
description | string | Optional description text displayed under the title. |
variant | 'underline' | 'accent' | 'gradient' | Style variant for the highlighted segment. |
classNames | { root?: string; title?: string; description?: string; gradient?: string } | Custom class names for styling different parts of the heading. |
Implementation Details
The HighlightHeading component is designed to highlight a specific segment (highlight) within a larger text (title). It supports different styling variants for the highlighted segment:
'accent': Applies primary text color to the highlighted text.'underline': Underlines the highlighted text.'gradient': Applies a text gradient, customizable through theclassNames.gradient.
The component splits the title into chunks around the highlight text and applies the chosen variant styling to the highlighted segments. This approach offers a dynamic way to emphasize key parts of the title text.
Styles
This component uses utility classes for styling, which can be customized through the classNames prop. Specific style classes include:
root: The main container of the heading.title: The styling for the title text.description: The styling for the description text.gradient: The styling for the gradient effect on the highlighted text (used with the 'gradient' variant).