Highlight Text
Description
The Highlight Text component is a flexible text display element that allows for customizable styling and an optional scroll-based highlighting effect. It supports various heading levels, text sizes, colors, and font weights, making it suitable for a wide range of text presentation needs. The component can split text into multiple lines and apply a progressive highlighting effect as the user scrolls, creating an engaging visual experience.
Installation
bash
sabaccui add highlightText
Usage
Highlighted heading with scroll effect
Preview
Designed in Austria. Developed in Austria. Tested in Austria.
Simple paragraph without scroll effect
Preview
Welcome to the Sabacc UI component library.
Schema
| Field | Type | Description | Default Value |
|---|---|---|---|
text | textarea | The main text content. Supports multiple lines separated by newline characters. | (Required) |
level | option | The HTML heading level or paragraph tag to use (h1, h2, h3, h4, or p). | h2 |
size | option | The text size (9xl, 7xl, 5xl, 3xl, xl, lg, sm). | - |
color | option | The text color (primary, secondary, dark, light, white, black). | - |
weight | option | The font weight (bold, semibold, light). | - |
scrollEffect | boolean | Enables or disables the scroll-based highlighting effect. | false |
Notes
- The text is split into multiple spans for the scroll effect, with opacity transitions.
- Tailwind CSS classes are used for styling, including text sizes and colors.
- The component is designed to be editable within the Storyblok editor.
Best practices:
- Use the scroll effect for impactful headings or short phrases to create visual interest.
- Consider the contrast between the text color and background for optimal readability.
- Adjust the text size based on the importance of the content and the overall layout.
- Use consistent styling across your site for a cohesive design language.
- Test the component at various screen sizes to ensure responsiveness and readability.