Accordion Module
The headline and subheader tells us what you're offering, and the form header closes the deal. Over here you can explain why your offer is so great it's worth filling out a form for.
The headline and subheader tells us what you're offering, and the form header closes the deal. Over here you can explain why your offer is so great it's worth filling out a form for.
Can I customize the design of the Accordion module?
What should I use the Accordion module for?
Is the Accordion module mobile-friendly?
How should I use this module?
The Carret section defines the visual indicator used to signal that an accordion item can be expanded or collapsed. You can customize the Carret Style here to ensure the icon aligns with your brand's aesthetic, typically choosing between various arrow or plus-sign configurations.
Content Tab
The Content Tab is where you manage the actual substance and information displayed within the module.
For the Accordion module, this section allows you to configure the functional elements of the dropdowns, including the toggle icons and the individual content rows.
Carret
The Carret section defines the visual indicator used to signal that an accordion item can be expanded or collapsed. You can customize the Carret Style here to ensure the icon aligns with your brand's aesthetic, typically choosing between various arrow or plus-sign configurations.

Accordions
The Accordions section is built as a repeater group, allowing you to add as many individual rows as needed. You can create new items, reorder them, or click the edit icon on a specific row to slide into its unique settings and manage its specific data.

Title
The Title field is where you define the clickable heading for each accordion item. This text remains visible at all times and acts as the trigger for users to open or close the associated content section.

Content
The Content area is where you establish the body text for each accordion item using a Rich Text field. This gives you full flexibility to include formatted text, links, lists, or even images that appear only when the accordion is expanded.

Styles Tab
The headline and subheader tells us what you're offering, and the form header closes the deal. Over here you can explain why your offer is so great it's worth filling out a form for.
Title
Text
Font — Controls the font family, size, weight, and color of the accordion title. Leave blank to inherit from your global theme typography
Transform — Sets letter casing on the title. Options: None, Capitalize, Uppercase, Lowercase.
Background
Color — Background color behind the title row. Defaults to transparent.
Spacing
Padding — Inner spacing on the title row. Margin is disabled here — use the Accordions spacing control to set gaps between items.
Content
Content
Background
Color — Background color behind the expanded content area. Defaults to transparent.
Spacing
Padding — Inner spacing around the expanded content. All sides default to 0px.
Accordions
Accordions
Border
Border — Controllable per side. Defaults to a 1px solid bottom border. Add all four sides for a boxed card style.
Corner
Radius — Rounds the corners of each accordion item. Only visible if a full border is applied.
Spacing
Space between — Top and bottom margin between each accordion item.
Shadow
For a standard subtle card shadow, try: Horizontal 0 / Vertical 4 / Blur 12 / Spread 0 / Color black at 10% opacity. Here's what each control does:
Horizontal offset — Shifts the shadow left or right. 0 keeps it centered.
Vertical offset — Shifts the shadow up or down. A small positive number like 4 makes it look like light is coming from above.
Blur — How soft the shadow edge is. 0 is a hard outline, 12–20 feels natural.
Spread — Grows or shrinks the shadow before blur is applied. Usually leave this at 0.
Color — The shadow color and opacity. Black at 10–20% opacity works for most designs. Higher opacity = heavier shadow.