Accordions with images

The accordions with Images section extends the basic FAQ accordion functionality by allowing image icons per item. This is ideal for creating visual FAQs, policy breakdowns, or support guidance that benefits from a visual cue or brand-aligned imagery.

View the accordions section.

Section settings

Settings
Type
Description

Layout

Layout

select

Choose between a One column or Two columns layout.

Show divider lines

checkbox

Adds border lines between accordion items (helpful for transparent backgrounds).

Border thickness

select

Select either Normal or Bold border weight.

Text

Content alignment

select

Align text content: Center or Left.

Subheading

text

Optional subheading above the main section title.

Heading

text

Main heading of the section.

FAQ heading style

select

Choose text styling: Heading, Body, or Accent.

FAQ heading size

range

Scale heading size from 100% to 200%.

Text

richtext

Optional introductory or descriptive text under the heading.

Colors

Tabs

color

Background color of each accordion tab.

Background

color

Background color of the whole section.

Overlay gradient

color_background

Optional gradient overlay applied to the section background.

Text color

select

Choose Light or Dark text tone.

Border color

color

Customize the color of the accordion dividers.

Section spacing

Width

select

Adjust container width: Full width padded, Page width, or Page width narrow.

Padding top

range

Control top padding.

Padding bottom

range

Control bottom padding.

Last updated