Icon Feature
Description
The Icon Feature component is a flexible and customizable element designed to showcase features or information with accompanying icons. It supports various layout options, icon sizes, and styling preferences, making it suitable for creating visually appealing feature lists or highlight sections in a user interface.
Installation
bash
sabaccui add iconFeature
Usage
Here are some examples of how to use the Icon Feature component:
Basic usage with icon on the left:
Preview
Fast Performance: Our solution offers lightning-fast performance for all your needs.
Icon on top with glow effect and border:
Preview
Optimized Speed: Enjoy blazing fast load times and smooth user experiences.
Large icon with custom styling:
Preview
Enhanced Security: State-of-the-art encryption and protection for your data.
Schema
| Field Name | Type | Description | Default Value |
|---|---|---|---|
icon | asset | The icon image to be displayed. Only image files are allowed. | - |
text | markdown | The text content describing the feature. Supports markdown formatting. | - |
layout | option | Determines the layout of the icon and text. Options: left (Icon left), top (Icon top). | left |
glow | boolean | Enables a glow effect behind the icon. | false |
bordered | boolean | Adds a border and background to the feature. | false |
iconSize | option | Sets the size of the icon. Options: sm (Small), md (Medium), lg (Large), xl (Xlarge), 2xl (2X Large). | - |
Related Components
Notes
- The component uses a flexible layout with a gap between the icon and text.
- The component supports responsive design, adjusting gap sizes for different screen sizes.
3Markdown content is rendered using a separate
Markdowncomponent, allowing for rich text formatting.
Best Practices:
- Use consistent icon sizes within a group of Icon Feature components for a cohesive look.
- When using the glow effect, ensure sufficient contrast with the background for accessibility.
- Leverage the markdown support in the text field to create structured and formatted content.
- Consider the layout option based on the overall design of the section where the component is used.
- Use the bordered option to create visually distinct feature blocks when needed.