# 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

<table><thead><tr><th width="179">Property</th><th>Description</th></tr></thead><tbody><tr><td><strong>Accordion</strong></td><td></td></tr><tr><td>Accordion type</td><td><p>Select how the accordions are positioned relative to each other.</p><ul><li>Splitted</li><li>Solid</li></ul></td></tr><tr><td>Background color</td><td>Set the background color for accordion headers</td></tr><tr><td>Hover color</td><td>Define the color that appears when users hover over headers</td></tr><tr><td>Select color</td><td>Set the color for currently selected headers</td></tr><tr><td>Rounding</td><td>Adjust corner radius of an accordion</td></tr><tr><td>Display border</td><td>Toggle border visibility (Yes/No)</td></tr><tr><td>Border color</td><td>Select the border color</td></tr><tr><td>Thickness</td><td>Adjust border thickness</td></tr><tr><td><strong>Effects</strong></td><td></td></tr><tr><td>Accordion shadow</td><td><p>Add and configure shadow effects for the accordion:</p><ol><li>Click the "+" icon to add shadow effects.</li><li>Select from shadow styles: None, Soft, Regular, or Retro.</li></ol></td></tr><tr><td><strong>Icon</strong></td><td></td></tr><tr><td>Icon position</td><td>Choose where icons appear relative to text (left/right toggle)</td></tr><tr><td>Icon color</td><td>Set the color for accordion icons</td></tr><tr><td>Accordion collapsed icon upload</td><td>Upload a custom icon for collapsed state</td></tr><tr><td>Accordion expanded icon upload</td><td>Upload a custom icon for expanded state</td></tr><tr><td><strong>Margins</strong></td><td></td></tr><tr><td>Accordion paddings</td><td>Set internal spacing for header elements (top, right, bottom, left)</td></tr><tr><td>Content paddings</td><td>Set internal spacing for content areas (top, right, bottom, left)</td></tr><tr><td>Margin from icon</td><td>Set spacing between icon and text</td></tr><tr><td>Margin between accordions</td><td>Define spacing between different accordion sections</td></tr></tbody></table>

## 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](https://help.parta.io/branding/create-branding/typography-and-fonts).