SR Element Accordion
This module renders a vertical stack of up to six collapsible rows, each with a heading and rich text description, plus optional lead-text styling or expanded-by-default state.
Pick it over the other bling modules when the content is text-heavy and needs to collapse and expand to save space, such as FAQs or feature breakdowns, rather than images, logos, or media. Set number_of_accordions_to_show to cap visible rows and expose a View All button that reveals the rest.
Use cases
- Faq list
- Feature breakdown by topic
- Shipping and returns policy toggle
- Product spec details
- Expandable how-it-works steps
- Service details accordion
Where it fits
- Included with: Core
- Page sections: Faq, Content, Features
Editable fields
Content tab
| Field | Type | Notes |
|---|---|---|
| ID | Text | Assign a ID to the module. |
| Class | Text | Assign a CLASS to the module. |
| Number of Accordions to Show | Number | Use this to only show a certain number of accordions. Adds a load more button. Leave blank to show all. |
Accordion Item Repeats: min 1, default 6.
| Field | Type | Notes |
|---|---|---|
| Content | Rich text | |
| Lead Text | Boolean | Turn on to make the Description text larger. |
| Expanded | Boolean |
Accordion Item › Heading Repeats: default 1.
| Field | Type | Notes |
|---|---|---|
| Heading | Text | |
| Size | Choice | HTML heading size. Options: H1, H2, H3, H4, H5, H6, P. |
| Display Size | Choice | Size that heading is displayed at. 12 options, including Auto, H1, H2. |
| Color | Choice | 15 options, including Auto, Primary, Secondary. |
| Color | Color | |
| Align | Choice | Options: Auto, Left, Center, Right. |
| CSS Class | Text |
Button
| Field | Type | Notes |
|---|---|---|
| Position | Choice | Options: Left, Center, Right. |
| CTA Type | Choice | Options: Button. |
| CTA Style | Choice | 26 options, including Primary, Secondary, Tertiary. |
| Button Text | Text | |
| CTA Size | Choice | Options: Small, Default, Large. |
| Add icon | Boolean |
Button › Default
| Field | Type | Notes |
|---|---|---|
| Background | Color | |
| Text | Color | |
| Border | Color |
Button › Hover
| Field | Type | Notes |
|---|---|---|
| Background | Color | |
| Text | Color | |
| Border Color | Color |
Button › Icon
| Field | Type | Notes |
|---|---|---|
| Icon | Icon | |
| Position | Choice | Options: Left, Right. |
| Purpose | Choice | The purpose of the icon, used for accessibility. If set to decorative, an additional attribute of aria-hidden="true" will be added to the icon. Options: Decorative, Semantic. |
Style tab
Change log
| Version | Change |
|---|---|
| 1.0.0 | Stardust updates release |
SR Contact 01
This module renders a two-column contact block with a map on one side and a text card on the other, the map shown as a static image, an embed code, or a live Google Map with latitude, longitude, zoom and marker controls, and the text card holding a heading, rich text description, and an optional row of CTA buttons.
SR Element Blog Post
This module renders a single blog post card pulled automatically from a connected HubSpot blog at a chosen offset, showing a featured image, optional topic tag, title, a character-limited summary, and an optional author avatar with publish date.