Accordion
Accordions are used to organize content into collapsible sections, allowing users to expand and collapse sections as needed.
Last updated
Accordions are used to organize content into collapsible sections, allowing users to expand and collapse sections as needed.
Last updated
Accordions are used to manage large amounts of content by dividing it into sections that can be expanded or collapsed. They are suitable for FAQs, content-heavy pages, or any interface where space is limited, and users need to access different sections of content without overwhelming them with too much information at once.
An accordion component typically includes a series of sections, each with a header that, when clicked, expands or collapses the section's content. Optional elements like icons can indicate the expanded or collapsed state. The accordion can be configured to display one section at a time or allow multiple sections to be expanded simultaneously.
design
Determines the visual style of the accordion.
'bg-border' (default): Displays the accordion with a background and border.
'no-border': Displays the accordion without a background or border.
"bg-border" | "no-border"
header_text
The text displayed in the accordion header. Defaults to 'Accordion Header'.
string
body_description
The text content inside the accordion body. Defaults to 'This is the accordion body content.'.
string
custom_class
Allows the user to pass additional CSS classes to customize the accordion's appearance. Defaults to an empty string.
string
component_mode
Provides an optional mode for additional customization (e.g., dark mode or variant styles).
string
Lead-Icon: An icon positioned at the start of the accordion title, providing visual context or indicating the type of content.
Dropdown Icon: An icon that indicates the expandable and collapsible nature of the accordion, usually changing direction when clicked.
Title: The main text that describes the section of the accordion and prompts users to expand for more details.
Sub-title: Situated just below the title, the sub-title offers additional context or a secondary layer of detail about the accordion's contents, enhancing the user's understanding of what to expect upon expansion.
Description Text: Additional descriptive text positioned next to the expand icon, offering further clarification or supplementary information about the accordion’s contents.
Link Button: Positioned within the paragraph, these buttons serve as CTAs (Call to Action), guiding users to take specific actions or visit linked pages.
Use accordions to manage and organize large amounts of content.
Don't use accordions for single pieces of content that do not require collapsing.
Label each accordion section clearly to indicate its content.
Avoid using ambiguous or unclear labels for accordion sections.
Ensure accordion headers are large enough to be easily tappable or clickable.
Don't make accordion headers too small to interact with comfortably.
Provide visual feedback to indicate the expanded or collapsed state.
Don't leave users guessing whether a section is expanded or collapsed.
Use consistent styling and spacing across all accordion sections in the application.
Don't use inconsistent styles that may confuse users.
Update the state of the accordion in real-time as sections are expanded or collapsed.
Don't use accordions if you cannot provide real-time updates.
