Text highlight

This is a text highlight

The TextHighlight component is a text component useful when needing to make some text stand out. It can be used to highlight text in a sentence or paragraph.

You can either do a simple highlight or a gradient highlight.

Usage

javascript
1import TextHighlight from "@/components/atoms/TextHighlight";
2
3<TextHighlight highlight="highlight">
4    This is a text highlight
5</TextHighlight>

Props

Name	Type	Default	Description
text	string	-	The text to display.
highlight	string	-	The text to highlight.
color	string	`"gray"`	The color of the text (see tailwind.config).
fromGradient	string	`""`	The color of the gradient from which the text will be highlighted (see tailwind.config).
toGradient	string	`""`	The color of the gradient to which the text will be highlighted (see tailwind.config).
textSize	string	`"text-7xl/18"`	The text size and line height of the text.
className	string	`""`	Additional Tailwind classes for the container.
...props	object	-	Any other valid `<a>` attributes (e.g. `target`, `rel`, etc.).

Examples

Basic Text Highlight

You can customize the color and textSize of the text.

Text highlight

Gradient Text Highlight

You can customize the fromGradient and toGradient of the text.