Features
Description
The Features component is a versatile and interactive element designed to showcase multiple features or highlights of a product or service. It provides a smooth, animated display of feature items, each consisting of an image and accompanying text. The component supports both desktop and mobile layouts, with automatic progression and scroll-based navigation.
Installation
bash
sabaccui add features
Usage
Here's an example of how to use the Features component in a Storyblok block:
Preview
Schema
| Field | Type | Description | Default |
|---|---|---|---|
items | bloks | An array of feature items. Each item should be of type feature. | [] |
orientation | option | Determines the layout orientation of text and image. Options are text-image or image-text. | text-image |
duration | number | The display time (in milliseconds) for each feature before transitioning to the next. | 5000 |
Related Components
Notes
- The component uses intersection observers to start/stop animations when in/out of viewport.
- On desktop, features transition automatically after the specified duration.
- On mobile, features can be navigated via horizontal scrolling.
- The component adapts its layout based on screen size, providing different experiences for desktop and mobile users.
- Smooth transitions are implemented for both images and text content.
Best Practices:
- Keep feature descriptions concise for better readability.
- Use high-quality, relevant images that complement the feature text.
- Ensure all feature items have consistent content length for a balanced appearance.
- Test the component on various screen sizes to ensure optimal display across devices.