Accordion Styling

Style every visual detail of the Accordion option type — layout, headers, expand icon, content panel, and behavior — using per-type templates.

Overview

Read Types Settings first if you haven't created a template before. This page covers every setting available once you're editing an Accordion template, grouped the same way they appear in the editor's left navigation.

Layout Mode

Setting	What it controls	Options
Layout Style	Whether accordion items form one connected block or sit as separate cards	Connected (default), Disconnected

Connected-only settings:

Setting	What it controls	Default	Options / Range
Divider Style	The line separating items in a connected accordion	Underline	None, Underline, Full
Divider Color (if not None)	Color of the divider	Light gray	—
Divider Thickness (if not None)	Thickness of the divider	1px	1–5px

Disconnected-only settings:

Setting	What it controls	Default	Range
Item Spacing	Gap between separate item cards	12px	0–32px
Header-Content Gap	Gap between a card's header and its expanded content	0px	0–20px

Item Container

Setting	What it controls	Default	Range
Border Width (Disconnected only)	Border thickness on each item card	1px	0–6px
Border Color (Disconnected only)	Border color on each item card	Light gray	—
Border Radius	Corner rounding — the outer container in Connected mode, each card in Disconnected mode	8px	0–30px
Shadow	Drop shadow — applied to the whole accordion (Connected) or each item card (Disconnected)	No Shadow	No Shadow, Subtle, Medium, Strong

Header

The clickable area that expands and collapses each item.

Header Layout:

Setting	What it controls	Default	Options / Range
Header Padding (per side)	Inner padding of the header	12px top/bottom, 16px left/right	0–40px
Header Alignment	Positioning of header content	Space Between	Left, Center, Right, Space Between
Header Height	Whether height is automatic or fixed	Auto	Auto, Custom
Header Height Value (if Custom)	Fixed header height	48px	30–80px

Header Typography:

Setting	What it controls	Default	Options / Range
Font Size	Size of the header title text	14px	8–30px
Font Weight	Weight of the header title text	500	300, 400, 500, 600, 700
Text Transform	Case transformation of the title	None	None, Uppercase, Capitalize, Lowercase
Letter Spacing	Spacing between letters	0px	-2 to 8px

Header States

Idle, hover, and active colors for the header, edited via state tabs:

Setting	What it controls	Default
Text Color	Header title color for that state	Dark gray
Background Color	Header background color for that state	White
Icon Color	Expand icon color for that state	Medium gray

Expand Indicator

The icon (or label) that signals expand/collapse.

Setting	What it controls	Default	Options
Icon Type	Visual style of the indicator	Chevron	Chevron, Plus/Minus, Caret, Label
Icon Position	Side of the header the indicator sits on	Right	Left, Right

When Icon Type is Label:

Setting	What it controls	Default
Collapsed Label	Text shown when the item is collapsed	"Show"
Expanded Label	Text shown when the item is expanded	"Hide"

When Icon Type is Chevron, Plus/Minus, or Caret:

Setting	What it controls	Default	Range
Icon Size	Size of the indicator icon	20px	12–32px
Rotate on Expand	Whether the icon rotates when the item opens	On	—
Animation Speed	Speed of that rotation	Normal	Fast, Normal, Slow

Content Panel

The body area revealed when an item is expanded.

Setting	What it controls	Default
Content Padding (per side)	Inner padding of the content area	12px top, 16px right/left, 16px bottom
Content Text Color	Text color inside the content area	Dark gray (matches idle header text by default)
Content Background	Background color of the content area	White
Content Border Top (Connected layout only)	Toggles a border above the content, separating it from the header	Off
Content Border Color (if on)	Color of that border	Light gray
Content Border Thickness (if on)	Thickness of that border	1px (1–5px)

Why no border option in Disconnected mode

Each item is already a separate card with its own border in Disconnected layout, so a border above the content would be redundant.

Animation

Setting	What it controls	Default	Options
Animation Type	Transition effect when expanding/collapsing	Slide	Slide, Fade, Slide-Fade, None
Duration	Speed of the animation	300ms	150ms, 300ms, 500ms
Easing Function	Easing curve of the animation	Ease	Ease, Ease-in-out, Linear, Ease-in, Ease-out
Stagger Animation	Delays each item's animation slightly so they cascade instead of firing at once	Off	—
Stagger Delay (if on)	Delay between each item's animation	50ms	0–200ms

Behavior Logic

Setting	What it controls	Default	Options
Expand Mode	Whether one item or multiple items can be open at once	Multiple	Single, Multiple
Keep One Open (Single mode only)	Prevents collapsing the last open item	Off	—
Default State (Single mode)	Which item is open when the page loads	Collapsed	Collapsed, First Expanded
Default State (Multiple mode)	Which items are open when the page loads	Collapsed	Collapsed, First Expanded, All Expanded

Responsive

Setting	What it controls	Default	Range
Mobile Font Size	Overrides header font size on small screens	Uses desktop size	8–30px
Collapse on Mobile	Forces all items closed on small screens regardless of Default State	Off	—

Advanced

Setting	What it controls	Default
Focus Outline	Toggles a visible outline for keyboard navigation	Off
Focus Outline Color (if on)	Color of that outline	Blue
Focus Outline Width (if on)	Thickness of that outline	2px (1–4px)

How to Style Accordion

1. Open the Style Settings modal (see Customization Overview)
2. Click Types → Accordion
3. Create a new template or click an existing one to edit it
4. Use the left navigation to jump between Layout Mode, Item Container, Header, Header States, Expand Indicator, Content Panel, Animation, Behavior Logic, Responsive, and Advanced
5. Watch the Live Preview update as you change settings
6. Click Save in the contextual save bar

Related

• Accordion (option type) — how to add and configure an Accordion option
• Types Settings — how templates work and how to assign one to an option
• Tabs Styling
• Swatches Styling
• File Upload Styling