Feature
Description
The Feature component is a flexible and reusable element designed to showcase individual features or key points within a webpage. It combines text content, imagery, and an optional link to create a cohesive and engaging presentation of information.
Installation
bash
sabaccui add feature
Usage
Here's an example of how to use the Feature component in a Storyblok block:
Schema
| Field | Type | Description | Default |
|---|---|---|---|
header | text | The main title or heading for the feature | - |
details | markdown | Detailed description of the feature, supports markdown formatting | - |
image | asset | An image to visually represent the feature | - |
link | multilink | Optional link to additional information or related page | - |
header: A concise text field to capture the main point of the feature.details: A markdown field allowing for rich text formatting to provide more information about the feature.image: An asset field to upload or select an image that represents the feature visually.link: A multilink field that can be used to add a call-to-action or navigate to related content. Supports internal links, external URLs, email links, and anchor links.
Related Components
Notes
- The component is nestable, allowing for flexible placement within other components or layouts.
- It has been tagged as an "Atom" component, suggesting it's a fundamental building block in the design system.
- The component does not have a defined preview template, so default Storyblok preview behavior will be used.
Best Practices:
- Keep the header concise and attention-grabbing.
- Use the details field to provide valuable information, but avoid overly long descriptions.
- Choose high-quality, relevant images that complement the feature being described.
- When using the link, ensure it provides a clear next step or value to the user.
- Consider using this component in groups to compare or list multiple features of a product or service.