Accordion
An expandable FAQ-style list where items reveal content on click, with an animated image sidebar.
What It Does
The Accordion module splits the section into two sides: the left shows a heading, optional description, and an animated image that cross-fades to match the currently open card; the right shows a stack of expandable cards. Clicking a card reveals its body text while collapsing the previously open one. The first card is open by default.
Best Used For
- FAQ sections
- Product feature breakdowns
- Step-by-step guides with illustrations
- Service comparison or process explanation pages
Variants
Default
Left side displays the section title and optional description. Right side shows the accordion cards. Only one card is open at a time.
Best for: FAQ pages and expandable content sections
WithImage
Demonstrates an image panel on the left that updates as each accordion card is opened.
Best for: Feature explanations paired with product screenshots or process diagrams
Fields Reference
| Field | Type | Required | Description |
|---|---|---|---|
| titles | component | Yes | Accordion card items with title, content, and optional icon |
| description | component | No | Introductory text above the accordion |
| showNumberPrefix | boolean | No | Show sequential numbers before each card title |
| expandCards | boolean | No | Whether cards start in expanded state |
| entranceAnimation | component | No | Scroll-triggered entrance animation |
| image | media | No | Optional image displayed on the left side that cross-fades as each card opens |
Tips for Great Results
- Use 3 to 6 cards for the best experience. More than 8 becomes hard to scan.
- Keep card titles short — 2 to 5 words per card title works best.
- The expand image feature works best when all cards have images of similar dimensions.
- Use contrasting background colours across cards to help users see which card is active.
Supported Languages
Fully bilingual — all text fields support both English and Thai content.
Card List
A horizontally scrolling card carousel with standard, compact, bullet, and vertical layout variants for showcasing products, services, or features.
Split Panel
A two-column section with a large image on one side and a title, description, bullet points, and optional box detail on the other — configurable for image-left or image-right layouts.