Content Accordion

Usage

Content Accordion Use to present a list of named benefits, features, or deliverables in a scannable, expandable format. The accordion structure lets users quickly scan the headings to see if the content is relevant to them, then expand individual items to read the detail — without being overwhelmed by the full content at once. It is well suited for sections like "What you will get", "Programme features", or "Eligibility criteria". The module uses a two-column layout on Desktop: a left column with an H3 section heading, a supporting body paragraph, and an optional secondary CTA button (e.g. "View programme journey"); and a right column containing a stack of 3–5 accordion rows, each with a bold label and a "+" expand icon. Each accordion row is independently expandable to reveal its body content. On Tablet and Mobile, the two columns stack vertically — heading and copy first, then the accordion list below, with the CTA button at the bottom spanning full width on Mobile. Use this module instead of the Accordion slot in Details Page Content when the accordion list is the primary content of a standalone section and needs to be paired with a section heading and CTA at the module level. Use the Accordion slot inside Details Page Content when the accordions are part of a longer mixed-content body. Props: heading, copy (section introduction text), optional secondary CTA button label. The number of accordion items is configurable (3–5 recommended). The module is available in Desktop, Tablet, and Mobile device variants.