Accordion
Description
The Accordion component is a versatile and interactive UI element designed to display collapsible content, primarily used for FAQ-style information. It allows users to toggle between showing and hiding content sections, providing an efficient way to present large amounts of information in a compact, organized format. The component supports customizable themes and can be easily integrated into various page layouts.
Installation
bash
sabaccui add accordion
Usage
Here are examples of how to use the Accordion component in a Storyblok block:
Accordion with Dark Theme
Preview
Product Information
Accordion with Light Theme
Preview
Frequently Asked Questions
Schema
| Field Name | Type | Description | Default Value |
|---|---|---|---|
header | text | The title or header text for the accordion. This field is translatable. | null |
items | bloks | An array of FAQ items to be displayed in the accordion. Only components of type "faq" are allowed. | [] |
theme | option | The visual theme of the accordion. Options are "Light" or "Dark". | null |
Notes
- The Accordion component uses smooth animations for expanding and collapsing content, providing a polished user experience.
- The component is responsive and adapts well to different screen sizes.
- The Accordion is tagged as a "Molecule" component, indicating its role in the atomic design structure.
- The component supports Markdown content in the FAQ answers, allowing for rich text formatting.
- Ensure that FAQ questions are concise and clear to improve user navigation and understanding.
- The Accordion can be nested within other components, providing flexibility in page layout and content organization.
- The Accordion uses SchemaOrg markup for SEO optimization, enhancing search engine visibility for FAQ content.
When implementing this component, consider the following best practices:
- Keep questions concise and clear.
- Provide comprehensive but concise answers.
- Group related questions together for better user navigation.
- Use the theme that best matches your overall design and improves readability.
- Avoid overloading the accordion with too many items, as it may become overwhelming for users.