Hero Banner with Dynamic Cards

1. Where the Module Is Saved

To find it, open the Content menu in the left sidebar and select Design Manager.

2. Adding the Module to a Page

2.1 Search for the module

From the page editor, open Add modules and search for the module by name:

“Hero Banner with Dynamic Cards”

2.2 Drag it onto the page

Drag the module from the search results into the page canvas. It will render with its default placeholder content, ready to edit.

3. Editing Content

All content fields live under the Content tab of the module editor.

3.1 Hero text and buttons

• Eyebrow Subheading — the small line above the heading. Leave blank to hide it.
• Hero heading — the main title (required).
• Description paragraph — supporting copy under the heading.

3.2 Creating or updating a button

Hover over a button in the list and click the pencil icon to edit it.

In the editor, set the button text, the destination URL, and whether it should use the Primary style (checkbox) or fall back to the Secondary style.

3.3 Hero Card

Open the Hero Card section from the Content tab to edit the image, placeholder text, and specification chips.

Add an image directly, or leave it blank and the Placeholder Text will display instead. Specification chips are the small label/value pairs shown under the image.

3.4 Editing a specification chip

Click any chip in the list to set its label and value, for example “Tolerance” and “±0.002mm”.

3.5 Badge

Click the Badge group to set the badge text and optionally show a check icon next to it.

4. Styling the Module

Every element in the module has its own styling controls under the Styles tab, so the banner can be adapted to match a brand without touching the content.

4.1 Section Background

4.2 Typography

4.3 Buttons

4.4 Hero Card

4.5 Specification Chips

4.6 Badge