Accordion
Accordion component provides a space-efficient way to organize and present content in collapsible sections. Each section consists of a clickable header that, when activated, reveals or hides associated content.
Style settings
Accordion
Accordion type
Select how the accordions are positioned relative to each other.
Splitted
Solid
Background color
Set the background color for accordion headers
Hover color
Define the color that appears when users hover over headers
Select color
Set the color for currently selected headers
Rounding
Adjust corner radius of an accordion
Display border
Toggle border visibility (Yes/No)
Border color
Select the border color
Thickness
Adjust border thickness
Effects
Accordion shadow
Add and configure shadow effects for the accordion:
Click the "+" icon to add shadow effects.
Select from shadow styles: None, Soft, Regular, or Retro.
Icon
Icon position
Choose where icons appear relative to text (left/right toggle)
Icon color
Set the color for accordion icons
Accordion collapsed icon upload
Upload a custom icon for collapsed state
Accordion expanded icon upload
Upload a custom icon for expanded state
Margins
Accordion paddings
Set internal spacing for header elements (top, right, bottom, left)
Content paddings
Set internal spacing for content areas (top, right, bottom, left)
Margin from icon
Set spacing between icon and text
Margin between accordions
Define spacing between different accordion sections
Typography settings
Use Rich-text on the Typography tab to apply specific formatting to selected text within accordions. Changes made here affect only the text in the Accordion element:
Basic
Headings
Caption
List
Quote
Link
Last updated
Was this helpful?