Gradient Text
Description
The Gradient Text component is a versatile text element that allows for the creation of visually appealing gradient text. It supports various heading levels, text sizes, font weights, and custom gradient color combinations. This component is ideal for creating eye-catching titles, headings, or emphasized text with a unique gradient effect.
Installation
bash
sabaccui add gradientText
Usage
Here are some examples of how to use the Gradient Text component:
Gradient Text
Preview
Welcome to our website
Custom Gradient Colors
Preview
Discover our services
Schema
| Field Name | Type | Description | Default Value |
|---|---|---|---|
text | textarea | The text content to be displayed with the gradient effect. This field is required and translatable. | None |
level | option | The HTML element to be used for rendering the text. Options include h1, h2, h3, h4, and p. | h2 |
size | option | The size of the text. Options include 9xl, 7xl, 5xl, 3xl, xl, lg, and sm. | None |
weight | option | The font weight of the text. Options include bold, semibold, and light. | None |
colors | textarea | A list of colors to be used in the gradient, separated by new lines. | None |
Related Components
Notes
- The component uses Vue 3 with the Composition API and TypeScript.
- The gradient effect is achieved using CSS
linear-gradientandbackground-clip: text. - The component dynamically renders the appropriate HTML element based on the
levelprop. - Text size and weight are controlled through Tailwind CSS classes.
- The gradient colors are parsed from the
colorsfield, which expects each color on a new line.
Best Practices:
- Use contrasting colors in the gradient to ensure readability.
- Consider the context and hierarchy when choosing the text level and size.
- For accessibility, ensure sufficient color contrast between the gradient text and its background.
- Limit the use of very large text sizes (e.g.,
9xl) to maintain a balanced layout. - Test the component with various color combinations and background colors to ensure optimal visibility.