Accordion
The Accordion block allows you to create a series of collapsible rows, perfect for frequently asked questions (FAQs), detailed product information, or organized content lists. Users can click on the row title to expand and view the hidden content.
General settings
Inherit Color Scheme
A checkbox that, when enabled (Default), uses the color scheme from the parent section.
Colors
Only visible when Inherit Color Scheme is disabled.
Allows you to manually select a specific Color Scheme for the block, overriding the parent section's settings.
Typography
Heading Size
Sets the font size for the title (heading) of each collapsible row, measured in pixels (px) (Range: 16px to 32px).
Heading Weight
Sets the font thickness for the row title: Bold (600) (Default) or Medium (500).
Gap Content
Sets the vertical space (gap) between the row title and the content area when the row is expanded, measured in pixels (px) (Range: 0px to 30px).
Style
Icon Style
Defines the style of the expand/collapse indicator icon: Caret (Default — a simple arrow) or Plus (A plus/minus sign).
Row Style
Sets the visual style for separating the rows: Background (Uses background color for visual separation) or Divider (Default — uses a horizontal line/border).
Background Color
Only visible when Row Style is Background.
Sets the background color for each accordion row.
Corner Radius
Only visible when Row Style is Background.
Controls the rounding of the row element's corners: None (Sharp corners) or Custom (Allows you to set a specific radius).
Custom Radius
Only visible when Corner Radius is Custom and Row Style is Background.
Sets the custom corner radius for the rows, measured in pixels (px) (Range: 0px to 50px).
Item spacing
Gap Row
Only visible when Row Style is Background.
Sets the vertical space (gap) between each individual accordion row, measured in pixels (px) (Range: 0px to 30px).
Padding Row
Sets the inner vertical padding inside each row (above and below the title), measured in pixels (px) (Range: 0px to 50px).
Block settings
Accordion row
Heading
Specifies the title for an individual accordion row. This heading serves as the clickable element that expands or collapses the row’s content.
Open default
When enabled, the accordion row will be expanded and its content visible when the page loads.
When disabled, the row remains collapsed until the user clicks to open it.
In addition to the default Text block, you can add multiple other block types inside an Accordion row.
This allows you to enrich the expanded content area with features such as images, buttons, videos, icons, or custom HTML, providing a more interactive and versatile presentation.
Last updated