Collapsible with Content

Overview

Renders as an article tag. Displays expandable accordion panels organized into named tab groups, with an optional media block per group. Blocks are structured in a Tabset → Group → Collapse Row hierarchy, with Center/Center alignment and Scheme 3 by default. Cannot be used in header, footer, or overlay sections.


Section Header Settings:

Setting Description
Tagline Pill label above the heading. Medium, Normal 400, Uppercase, Default family. Custom background color (Default: #000000) and text color (Default: #FFFFFF).
Heading Main section title. H2 size, Bold 700, Uppercase, H2 tag, Default family. Link style: Default.
Description Supporting text below the heading. Large, Normal 400, None. Placeholder copy about expandable panels.
Header Margin Space below the section header. Desktop: 35px. Mobile: 15px.

Tabset Settings:

Setting Description
Size Tab label font size. Default: Medium.
Weight Tab label font weight. Default: Normal 400.
Family Tab label font family. Default: Default.
Case Tab label text transform. Default: Uppercase.

Collapsible Row Settings:

Setting Description
Hide Count Hides the row number prefix. Default: Disabled.
Row Heading Typography for each collapse row title. H5, Normal 400, Default family, Capitalize.
Row Description Typography for the expanded row body. Medium, Normal 400, Default family, None case, Default color.

Layout Settings:

Setting Description
Container Page container width. Default: Container Fluid.
Width Section content width. Default: 100%.
Text Alignment (Desktop) Horizontal text alignment on desktop. Default: Center.
Text Alignment (Mobile) Horizontal text alignment on mobile. Default: Center.
Color Scheme Section color scheme. Default: Scheme 3.

Inner Spacing:

Setting Desktop Mobile
Top Padding 70px 35px
Bottom Padding 70px 35px
Left Padding 50px 15px
Right Padding 50px 15px

Outer Spacing:

Setting Desktop Mobile
Top Margin 0px 0px
Bottom Margin 0px 0px
Left Margin 0px 0px
Right Margin 0px 0px

Blocks Configuration

Group:

Setting Description
Image Media displayed alongside the collapse rows in this group.
Overlay Color overlay applied to the group image.
Tagline Small label above the group heading.
Heading Group title text.
Description Supporting copy for the group.
Text Alignment (Desktop) Horizontal alignment of group content on desktop.
Text Alignment (Mobile) Horizontal alignment of group content on mobile.
Bottom Margin (Desktop) Space below this block on desktop.
Bottom Margin (Mobile) Space below this block on mobile.

Tabset:

Setting Description
Label Display name for the tab. Used to group subsequent Group and Collapse Row blocks under a named tab.

Collapse Row:

Setting Description
Heading Title text for the collapsible row.
Description Body content revealed when the row is expanded.
Default Open Opens this row by default on page load. Default: Disabled.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us