Docs / Lists & FAQs / Accordion Items

Accordion Items

A collapsible list of title + description items that expand one at a time, with an optional category filter above. Use it for FAQs, how-to steps, comparison sections, support docs, or anywhere you need to compress a lot of information into a scannable, tap-to-expand layout.

View live preview → Jump to settings ↓

→ Start Here

The most-used controls live here so editors can rebuild the section's basic shape without scrolling. Which item opens by default, heading visibility + alignment, list vs card layout, column count, and the optional category filter.

Default Open Item

Select Default: 1

Which accordion item is expanded on first paint. Set to None when you want every item collapsed by default (more compact, lets the visitor self-select).

  • 0 None (all collapsed)
  • 1 First item open (default)
  • 2 through 10 Open the 2nd through 10th item

Show Section Heading

Toggle Default: On

Controls whether the heading area (badge h6, title, description) appears above the accordion. Turn it off when the section follows a stronger heading from the row above and the accordion should read as a continuation.

Heading Alignment (Desktop)

Select Default: Center Shown when: Show Section Heading is on

Horizontal alignment for the heading area on desktop (993px and above).

  • left Left-aligned
  • center Centered (default)
  • right Right-aligned

Heading Alignment (Tablet/Mobile)

Select Default: Center Shown when: Show Section Heading is on

Heading alignment on tablet and mobile (below 992px). Set independently from desktop so editors can center the heading on phones while keeping desktop left- or right-aligned.

Layout Style

Select Default: Card (Boxed)

Picks how each accordion item is framed. List mode stacks items with thin dividers between them - lighter, more list-like. Card mode wraps each item in a filled, rounded box - heavier, more clickable-feeling.

  • list List (Dividers)
  • card Card (Boxed) (default)

Columns (Desktop)

Select Default: 2 Columns

Number of columns the accordion items lay out into on desktop. Mobile always stacks to a single column. Pick 2 columns for FAQ-heavy pages so the accordion does not feel impossibly long.

  • 1 1 Column
  • 2 2 Columns (default)

Enable Category Filter

Toggle Default: Off

Shows a row of filter buttons above the accordion so visitors can narrow items by tag. Tag each item in the Filter Tags field and a button is generated per unique tag, plus a "Show All" button.

"Show All" Label

Text Default: All Shown when: Enable Category Filter is on

Label for the button that resets the filter and shows every item. Change to "View all", "All FAQs", etc.

Animate Filter Transitions

Toggle Default: On Shown when: Enable Category Filter is on

Adds a smooth fade when switching between filter categories. Turn off if you want an instant cut, e.g. on a page with heavy motion already.

Heading Max Width (Desktop, px)

Number (0-1920px) Default: 900 Shown when: Show Section Heading is on

Caps the heading area's width on desktop so long titles and descriptions wrap to a comfortable measure. Set to 0 for full-width. Mobile always uses the full container width.

/// Content

The section heading rich text and the repeating list of accordion items. Each item carries its own title, description, and optional filter tags.

Section Heading

Rich text Default: FAQ / Frequently Asked Questions / one-line description Shown when: Show Section Heading is on

The badge + title + description block above the accordion. Default markup is <h6> (rendered as a pill badge when Badge Style is enabled), <h1> for the section title, and <p> for the description. Keep the h6 short (2-4 words) so the badge pill stays compact.

Accordion Items

Repeater (1-20 items) Default: 6 example FAQ items

The repeating list of accordion items. Editors can add, reorder, or remove items inline. Minimum 1, maximum 20. Each item exposes the three sub-fields below.

Title

Text (single line) Default: "Accordion item title"

The trigger text - usually the question. Keep it short enough to fit on one line on desktop; long titles wrap but read poorly next to the chevron.

Description

Rich text Default: "Description text for this accordion item."

The body content shown when the item expands - usually the answer. Supports headings, lists, links, and CTA buttons (use the theme's cta-primary / cta-secondary / etc. classes on inline links).

Filter Tags

Text (comma-separated) Default: empty Shown when: Enable Category Filter is on

Comma-separated tags used to generate filter buttons (e.g. pricing, support, getting started). One button is rendered per unique tag across all items. Keep spelling and case consistent or you will end up with duplicate filter buttons.

Fade-In Animation

Select Default: None

Triggers an IntersectionObserver-driven fade when the section scrolls into view. The fade adds a 30px slide from the chosen direction plus opacity.

  • none No animation (default)
  • bottom Fade Up (from bottom)
  • top Fade Down (from top)
  • left Fade from Left
  • right Fade from Right
  • fade Fade Only (no slide)

Reduced motion: When a visitor has prefers-reduced-motion: reduce, the animation is skipped and the section renders fully visible.

Custom ID & Classes (code)

Developer hooks for adding custom CSS or JS targeting. Leave blank for most pages.

CSS ID

Text Default: empty

Sets an id="..." on the section element. Must be unique on the page. Useful for anchor links (e.g. #about) and JS targeting.

CSS Class

Text Default: empty

Additional classes (space-separated) appended to the section element's class list. Useful when applying page-specific overrides via the page's custom CSS.

Style Settings

Everything visual: accordion colors and card shape, badge styling, filter button styling, section dividers, and the row's background/width/spacing.

/// Accordion Style

Color controls for accordion text and dividers, plus card-specific shape controls. Some fields only appear in list mode, others only in card mode.

Title Color

Color Default: #6b7280 @ 100%

Color of inactive (collapsed) accordion titles. Default is a mid-grey so the open item visually dominates.

Active Title Color

Color Default: #1a1a1a @ 100%

Color of the currently active (open) accordion title in list mode. In card mode, see Card Active Title Color below.

Description Color

Color Default: #6b7280 @ 100%

Color of the description text inside expanded items. In card mode, see Card Active Description Color for the open-state color.

Divider Color

Color Default: #e5e7eb @ 100% Shown when: Layout Style is List

Color of the thin border between accordion items in list mode. Match it to a slightly darker shade of your section background so the rule reads as a divider, not a hard line.

Card Background

Color Default: #F8FAFC @ 100% Shown when: Layout Style is Card

Background color of inactive (collapsed) card items.

Card Active Background

Color Default: #000000 @ 100% Shown when: Layout Style is Card

Background color of the active (open) card. Default is black so the open card pops against a light page background.

Card Hover Background

Color Default: #eeeeee @ 100% Shown when: Layout Style is Card

Background color when hovering over an inactive card. Keep it close to the card background so the hover state feels like feedback, not a state change.

Card Active Title Color

Color Default: #ffffff @ 100% Shown when: Layout Style is Card

Title color when the card is open. Defaults to white because the default active card background is black.

Card Active Description Color

Color Default: #ffffff @ 85% Shown when: Layout Style is Card

Description color when the card is open. 85% white softens the body copy slightly so it doesn't compete with the title.

Card Border Radius (px)

Slider (0-40px, step 2) Default: 12px Shown when: Layout Style is Card

Roundness of card corners. 12px matches the theme's default tile rounding.

Card Gap (px)

Slider (0-40px, step 4) Default: 16px Shown when: Layout Style is Card

Vertical (and horizontal in 2-column mode) space between cards.

/// Badge Style

Show Badge Styling

Toggle Default: On

Styles the <h6> inside the section heading as a pill badge instead of a plain heading. Badge color/border are pulled from the chosen badge tier and the theme's badge settings.

Badge Style

Select Default: Primary Shown when: Show Badge Styling is on

Picks the badge tier. Colors are configured in Theme Settings > Badge.

  • badge-primary Primary (default)
  • badge-secondary Secondary
  • badge-three Three
  • badge-four Four
  • badge-five Five
  • badge-six Six

/// Filter Style

Appearance of the category filter buttons. The entire group is only shown when Enable Category Filter is on.

Filter Alignment

Select Default: Center Shown when: Enable Category Filter is on

Horizontal alignment of the row of filter buttons.

  • left Left
  • center Center (default)
  • right Right

Filter Text Color

Color Default: #6b7280 @ 100% Shown when: Enable Category Filter is on

Text color of inactive filter buttons.

Active Filter Text

Color Default: #1a1a1a @ 100% Shown when: Enable Category Filter is on

Text color of the currently selected filter button.

Active Filter Background

Color Default: #f5f5f5 @ 100% Shown when: Enable Category Filter is on

Background color of the active filter button (the pill behind the selected category).

/// Section Dividers

Decorative SVG shapes that sit at the top or bottom of the section, useful for blending into the section above or below.

Top Divider / Bottom Divider

Select Default: None

Both top and bottom dividers share the same 9 shape options. The shape is rendered as an inline SVG matching the divider color you choose.

  • none No divider (default)
  • wave-1 Wave 1 (Gentle)
  • wave-2 Wave 2 (Sharp)
  • wave-3 Wave 3 (Multi)
  • wave-4 Wave 4 (Smooth)
  • wave-5 Wave 5 (Layered)
  • tilt Tilt (Angled)
  • curve Curve (Arc)
  • triangle Triangle

Each divider also exposes: Divider Color (set this to the background color of the adjacent section), Divider Height (20-200px, default 60), Angle Height (tilt divider only, 0-300px, default 100), Flip Divider (mirror horizontally), and for the bottom divider: Divider Under Content (puts the divider behind content so buttons stay clickable).

/// Row Settings

The section's wrapping row controls: background (color, gradient, image), content width, and per-breakpoint padding.

Background (Image, Video, Color, etc.)

Group Default: None

The Background Type dropdown drives which sub-controls appear:

  • none No background (default; section inherits the page bg)
  • color Solid Color - reveals Background Color picker
  • gradient Gradient - reveals Top Color, Bottom Color, and 8 direction options
  • image Image - reveals Background Image, Size (cover/contain/original), Position (9-point), Overlay toggle, Overlay Color, Blur toggle, Blur amount

Note: The "Background" group is labeled "Image, Video, Color, etc." in the editor but the current build does not include a video background option - the Background Type select only exposes none/color/gradient/image.

Size (Content Width)

Group Default: Standard
  • standard Standard (uses theme's standard container width, set in Theme Settings > Layout)
  • slim Slim (narrower variant, also set in Theme Settings)
  • custom Custom - reveals a Custom Width number input (600-1920px, default 1200)

Spacing (Around Content)

Group (per breakpoint)

Padding controls for the row, set independently for desktop, tablet, and mobile. Each breakpoint exposes a top/bottom/left/right spacing input. Defaults:

  • desktop 100px top, 100px bottom, 0 left, 0 right
  • tablet 60px top, 60px bottom, 0 left, 0 right
  • mobile 40px top, 40px bottom, 15px left, 15px right