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

Property	Description
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

For details on how to configure parameters in rich-text options, see Typography and fonts.