### Start Development Server

Source: https://github.com/hubspot/cms-elevate-theme-public/blob/main/README.md

Start the development server for real-time preview of your changes. The local development URL will be provided by the CLI.

```bash
npm run npm-start
```

```bash
yarn yarn-start
```

--------------------------------

### Install Dependencies

Source: https://github.com/hubspot/cms-elevate-theme-public/blob/main/README.md

Install project dependencies using either npm or yarn. Ensure you have Node.js installed and the version specified in .node-version.

```bash
npm run npm-install:all
```

```bash
yarn yarn-install:all
```

--------------------------------

### Clone Repository and Navigate

Source: https://github.com/hubspot/cms-elevate-theme-public/blob/main/README.md

Clone the Elevate theme repository and navigate into the project directory. This is the initial step for any development or customization.

```bash
git clone [repository-url]
cd cms-elevate-theme-public
```

--------------------------------

### Initialize HubSpot CLI

Source: https://github.com/hubspot/cms-elevate-theme-public/blob/main/README.md

Initialize the HubSpot CLI for local development. This command is necessary if you haven't configured the CLI before.

```bash
hs init
```

--------------------------------

### Build and Upload Theme

Source: https://github.com/hubspot/cms-elevate-theme-public/blob/main/README.md

Build the theme for production and upload it to your HubSpot portal. This can be done in a single step.

```bash
npm run build-upload
```

```bash
yarn build-upload
```

--------------------------------

### Include FAQ Section Partial

Source: https://github.com/hubspot/cms-elevate-theme-public/blob/main/src/unified-theme/templates/lp-products.hubl.html

Includes an FAQ section with dynamic content. It uses a partial and passes context for background color, card variant, heading, and a list of FAQs with questions and rendered answers.

```hubl
{# FAQ section #} {% include_dnd_partial path="../sections/faq.hubl.html", context={ "background_color": light_section_2_background_color, "card_variant": "card_variant_1", "heading": { "text": scaffold_content.group_faqs.heading }, "faqs": [ { "title": scaffold_content.group_faqs.group_faq_one.question or template_translations.shared_faq_question_1.message, "content": accordion_one_answer|render }, { "title": scaffold_content.group_faqs.group_faq_two.question or template_translations.shared_faq_question_2.message, "content": accordion_two_answer|render }, { "title": scaffold_content.group_faqs.group_faq_three.question or template_translations.shared_faq_question_3.message, "content": accordion_three_answer|render }, { "title": scaffold_content.group_faqs.group_faq_four.question or template_translations.shared_faq_question_4.message, "content": accordion_four_answer|render }, { "title": scaffold_content.group_faqs.group_faq_five.question or template_translations.shared_faq_question_5.message, "content": accordion_five_answer|render } ] } %}
```

--------------------------------

### Blog Audio Module

Source: https://github.com/hubspot/cms-elevate-theme-public/blob/main/src/unified-theme/templates/blog-detail.hubl.html

Includes the blog audio module, allowing for audio narration of the post. Configured with `overrideable=False`.

```html
{% module "narration" path="@hubspot/blog_audio", overrideable=False %}
```

--------------------------------

### Render Case Study Body Module

Source: https://github.com/hubspot/cms-elevate-theme-public/blob/main/src/unified-theme/templates/case-studies-detail.hubl.html

Renders the main body content of the case study.

```html
{% module "cs-body" path="@hubspot/cs_body" data_tokens={
 "body": "dynamic_page_hubdb_row.hs_body",
 }
%}
```

--------------------------------

### ImageAndText Module Configuration (Row 1)

Source: https://github.com/hubspot/cms-elevate-theme-public/blob/main/src/unified-theme/sections/multi-row.hubl.html

Configures the ImageAndText module for the first row, including image properties, content, and button settings. Uses default translations if context variables are not provided.

```hubl
{% dnd_module path="../components/modules/ImageAndText", groupImage={ "imagePosition": "left", "image": { "alt": context.group[0].image.alt or scaffold_content.group_image_and_text_one.image.alt or "", "loading": context.group[0].image.loading or "lazy", "max_height": context.group[0].image.height or scaffold_content.group_image_and_text_one.image.height or 599, "max_width": context.group[0].image.width or scaffold_content.group_image_and_text_one.image.width or 779, "size_type": "auto_custom_max", "src": context.group[0].image.src or scaffold_content.group_image_and_text_one.image.src or get_asset_url("../images/products-feature-image-1.png") } }, groupContent={ "headingAndTextHeadingLevel": context.group[0].heading.heading_level or "h2", "headingAndTextHeading": context.group[0].heading.text or scaffold_content.group_image_and_text_one.heading or template_translations.section_multi_row_row_one_heading.message, "richTextContentHTML": context.group[0].content or scaffold_content.group_image_and_text_one.description or template_translations.section_multi_row_row_one_content.message }, groupButton={ "showButton": context.group[0].button.show_button == 'false' ? context.group[0].button.show_button : true, "buttonContentText": context.group[0].button.text or template_translations.section_multi_row_row_one_button_text.message, "buttonContentLink": { "url": { "href": context.group[0].button.href or "" } } }, groupStyle={ "groupContent": { "sectionStyleVariant": section_variant, "headingStyleVariant": "h2", "verticalAlignment": { "vertical_align": "MIDDLE" } }, "groupButton": { "buttonStyleVariant": "primary", "buttonStyleSize": "medium" } } %}
{% end_dnd_module %}
```

--------------------------------

### Blog Post Body Display

Source: https://github.com/hubspot/cms-elevate-theme-public/blob/main/src/unified-theme/templates/blog-detail.hubl.html

Renders the main content of the blog post. Uses the `content.post_body` variable.

```html
{{ content.post_body }}
```

--------------------------------

### ImageAndText Module Configuration (Row 2)

Source: https://github.com/hubspot/cms-elevate-theme-public/blob/main/src/unified-theme/sections/multi-row.hubl.html

Configures the ImageAndText module for the second row, similar to the first but using different context variables for content and images. Includes styling for button and content alignment.

```hubl
{% dnd_module path="../components/modules/ImageAndText", groupImage={ "imagePosition": "left", "image": { "alt": context.group[1].image.alt or scaffold_content.group_image_and_text_two.image.alt or "", "loading": context.group[1].image.loading or "lazy", "max_height": context.group[1].image.height or scaffold_content.group_image_and_text_two.image.height or 599, "max_width": context.group[1].image.width or scaffold_content.group_image_and_text_two.image.width or 779, "size_type": "auto_custom_max", "src": context.group[1].image.src or scaffold_content.group_image_and_text_two.image.src or get_asset_url("../images/products-feature-image-2.png") } }, groupContent={ "headingAndTextHeadingLevel": context.group[1].heading.heading_level or "h2", "headingAndTextHeading": context.group[1].heading.text or scaffold_content.group_image_and_text_two.heading or template_translations.section_multi_row_row_two_heading.message, "richTextContentHTML": context.group[1].content or scaffold_content.group_image_and_text_two.description or template_translations.section_multi_row_row_two_content.message }, groupButton={ "showButton": context.group[1].button.show_button == 'false' ? context.group[1].button.show_button : true, "buttonContentText": context.group[1].button.text or template_translations.section_multi_row_row_two_button_tex
```

--------------------------------

### Recent Posts Display

Source: https://github.com/hubspot/cms-elevate-theme-public/blob/main/src/unified-theme/templates/blog-detail.hubl.html

Iterates through the prepared list of recent posts and renders them using the `build_recent_post` macro. Displays a heading before the list.

```html
{% if posts_to_use|length > 0 %}

{{ template_translations.blog_post_recent_posts_heading.message }}
-----------------------------------------------------------------------

{% for post in posts_to_use %} {{ build_recent_post(post) }} {% endfor %}

{% endif %}
```

--------------------------------

### Render Related Case Studies Module

Source: https://github.com/hubspot/cms-elevate-theme-public/blob/main/src/unified-theme/templates/case-studies-detail.hubl.html

Renders a module displaying related case studies, conditionally displayed based on editor status or module visibility.

```html
{% if is_in_editor or (!is_in_editor and module_is_hidden('cs-related-case-studies') == "false" )%}

{% module "cs-related-case-studies" path="@hubspot/cs_related_case_studies" %}

{% endif %}
```

--------------------------------

### Configure Team Member Card Module (First Two Members)

Source: https://github.com/hubspot/cms-elevate-theme-public/blob/main/src/unified-theme/sections/team-members-two-column.hubl.html

Displays the first two team members using the Card module. Configures image, name, role, and card styling. Uses default images if none are provided.

```hubl
{% dnd_module path="../components/modules/Card", imageOrIcon="image", groupCards=\[ { "groupImage": { "image": { "src": context.team_member\[0\].image.src or scaffold_content.group_team_member_one.image.src or get_asset_url("../images/team-member-use-background-small-1.png"), "alt": context.team_member\[0\].image.alt or scaffold_content.group_team_member_one.image.alt or "", "loading": "lazy", "size_type": "auto_custom_max" } }, "groupIcon": { "icon": { "name": "face-smile" } }, "groupContent": { "headingAndTextHeadingLevel": "h3", "headingAndTextHeading": context.team_member\[0\].name or scaffold_content.group_team_member_one.name or template_translations.section_team_members_two_column_member_name.message, "richTextContentHTML": context.team_member\[0\].role or scaffold_content.group_team_member_one.role or template_translations.section_team_members_two_column_member_role.message }, "groupButton": { "showButton": false } }, { "groupImage": { "image": { "src": context.team_member\[1\].image.src or scaffold_content.group_team_member_two.image.src or get_asset_url("../images/team-member-use-background-small-2.png"), "alt": context.team_member\[1\].image.alt or scaffold_content.group_team_member_two.image.alt or "", "loading": "lazy", "size_type": "auto_custom_max" } }, "groupIcon": { "icon": { "name": "face-smile" } }, "groupContent": { "headingAndTextHeadingLevel": "h3", "headingAndTextHeading": context.team_member\[1\].name or scaffold_content.group_team_member_two.name or template_translations.section_team_members_two_column_member_name.message, "richTextContentHTML": context.team_member\[1\].role or scaffold_content.group_team_member_two.role or template_translations.section_team_members_two_column_member_role.message }, "groupButton": { "showButton": false } } ] groupStyle={ "groupCard": { "cardStyleVariant": context.card_variant or "card_variant_1", "cardOrientation": "row" }, "groupContent": { "headingStyleVariant": "h4" } } %}
```

--------------------------------

### Image Grid Module Configuration

Source: https://github.com/hubspot/cms-elevate-theme-public/blob/main/src/unified-theme/templates/lp-event-signup-two.hubl.html

Configures an image grid module with specific display options, aspect ratio, click/hover behaviors, and styling for gaps. Used for displaying a collection of images.

```hubl
{% dnd_module path="@hubspot/image_grid", grid_settings={ "group_uniform_display_options": { "number_of_columns": 3, "mobile_columns": true, "mobile_number_of_columns": 1 }, "group_aspect_ratio": { "aspect_ratio": "1/1" }, "group_image_click": { "image_click_functionality": "nothing" }, "group_image_hover": { "overlay_show_on": "never" } }, styles={ "grid_images": { "group_gap": { "gap": 32 } } }, slides=[
  { "img": scaffold_content.group_gallery.image_1 or { "alt": "", "src": get_asset_url("../images/gallery-1.png") } },
  { "img": scaffold_content.group_gallery.image_2 or { "alt": "", "src": get_asset_url("../images/gallery-2.png") } },
  { "img": scaffold_content.group_gallery.image_3 or { "alt": "", "src": get_asset_url("../images/gallery-3.png") } }
] %}
```

--------------------------------

### Render Featured Details Module

Source: https://github.com/hubspot/cms-elevate-theme-public/blob/main/src/unified-theme/templates/case-studies-detail.hubl.html

Renders the featured details module for a case study, conditionally displayed based on editor status or module visibility. It maps various case study data points to module fields.

```html
{% if is_in_editor or (!is_in_editor and module_is_hidden('cs-feature') == "false" )%}

{% module "cs-feature" path="@hubspot/cs_featured_details" data_tokens={
 "featured_image": "dynamic_page_hubdb_row.hs_featured_image",
 "industry": "dynamic_page_hubdb_row.hs_industry",
 "challenge_summary_label": "dynamic_page_hubdb_row.hs_challenge_summary_label",
 "challenge_summary": "dynamic_page_hubdb_row.hs_challenge_summary",
 "results_summary_label": "dynamic_page_hubdb_row.hs_results_summary_label",
 "results_summary": "dynamic_page_hubdb_row.hs_results_summary",
 "key_products_label": "dynamic_page_hubdb_row.hs_key_products_label",
 "key_products": "dynamic_page_hubdb_row.hs_key_products",
 "company_website": "dynamic_page_hubdb_row.hs_company_website",
 }
%}

{% endif %}
```

--------------------------------

### Configure Heading Module

Source: https://github.com/hubspot/cms-elevate-theme-public/blob/main/src/unified-theme/sections/team-members-two-column.hubl.html

Sets up the heading for the team members section. Customize heading level, text, and styling variants.

```hubl
{% dnd_module path="../components/modules/Heading", headingAndTextHeadingLevel={{ context.heading.heading_level or "h2" }}, headingAndTextHeading={{ context.heading.text or scaffold_content.heading or template_translations.section_team_members_two_column_heading.message }}, groupStyle={ "alignment": { "text_align": "CENTER" }, "headingStyleVariant": "h2", "sectionStyleVariant": section_variant %} {% end_dnd_module %}
```

--------------------------------

### Render Metrics Module

Source: https://github.com/hubspot/cms-elevate-theme-public/blob/main/src/unified-theme/templates/case-studies-detail.hubl.html

Renders the metrics module for a case study, conditionally displayed based on editor status or module visibility.

```html
{% if is_in_editor or (!is_in_editor and module_is_hidden('cs-metrics') == "false" )%}

{% module "cs-metrics" path="@hubspot/cs_metrics" data_tokens={
 "metrics": "dynamic_page_hubdb_row.hs_metrics",
 }
%}

{% endif %}
```

--------------------------------

### Render Case Study Name Module

Source: https://github.com/hubspot/cms-elevate-theme-public/blob/main/src/unified-theme/templates/case-studies-detail.hubl.html

Renders the case study name module, conditionally displayed based on editor status or module visibility.

```html
{% if is_in_editor or (!is_in_editor and module_is_hidden('cs-name') == "false" )%}

{% module "cs-name" path="@hubspot/cs_title" data_tokens={ "name": "dynamic_page_hubdb_row.hs_name", } %}

{% endif %}
```

--------------------------------

### Render About Company Module

Source: https://github.com/hubspot/cms-elevate-theme-public/blob/main/src/unified-theme/templates/case-studies-detail.hubl.html

Renders the about company module for a case study, conditionally displayed based on editor status or module visibility. It includes company image, name, and summary.

```html
{% if is_in_editor or (!is_in_editor and module_is_hidden('cs-about-company') == "false" )%}

{% module "cs-about-company" path="@hubspot/cs_about_company" data_tokens={
 "company_image": "dynamic_page_hubdb_row.hs_company_image",
 "company_name": "dynamic_page_hubdb_row.hs_company_name",
 "company_summary": "dynamic_page_hubdb_row.hs_company_summary",
 }
%}

{% endif %}
```

--------------------------------

### Include Call to Action Partial

Source: https://github.com/hubspot/cms-elevate-theme-public/blob/main/src/unified-theme/templates/home.hubl.html

Includes a partial HubL file for a call to action section, passing context for the heading text and button text. This allows for consistent CTA design across templates.

```HubL
{# Call to action #}
{% include_dnd_partial path="../sections/call-to-action.hubl.html"
context={
  "heading": {
    "text": scaffold_content.group_cta.heading
  },
  "button": {
    "text": scaffold_content.group_cta.button_text
  }
} %}
```

--------------------------------

### Include Metrics Section Partial

Source: https://github.com/hubspot/cms-elevate-theme-public/blob/main/src/unified-theme/templates/home.hubl.html

Includes a partial HubL file for a metrics section, passing context for background color and metric data. This is useful for reusing common section layouts.

```HubL
{# Metrics #}
{% include_dnd_partial path="../sections/metrics.hubl.html", context={
  "background_color": light_section_3_background_color,
  "metrics": [
    {
      "value": scaffold_content.group_metrics.metric_one,
      "description": scaffold_content.group_metrics.metric_description_one
    },
    {
      "value": scaffold_content.group_metrics.metric_two,
      "description": scaffold_content.group_metrics.metric_description_two
    },
    {
      "value": scaffold_content.group_metrics.metric_three,
      "description": scaffold_content.group_metrics.metric_description_three
    }
  ]
} %}
```

--------------------------------

### Render Call to Action Banner Module

Source: https://github.com/hubspot/cms-elevate-theme-public/blob/main/src/unified-theme/templates/case-studies-detail.hubl.html

Renders a full-width call to action banner for the case study, conditionally displayed based on editor status or module visibility.

```html
{% if is_in_editor or (!is_in_editor and module_is_hidden('cs-cta-banner') == "false" )%}

{% module "cs-cta-banner" path="@hubspot/cs_full_width_cta_banner" data_tokens={
 "call_to_action_label": "dynamic_page_hubdb_row.hs_call_to_action_label",
 "call_to_action": "dynamic_page_hubdb_row.hs_call_to_action",
 }
%}

{% endif %}
```

--------------------------------

### Configure Team Member Card Module (Next Two Members)

Source: https://github.com/hubspot/cms-elevate-theme-public/blob/main/src/unified-theme/sections/team-members-two-column.hubl.html

Displays the next two team members using the Card module. Configures image, name, role, and card styling. Uses default images if none are provided.

```hubl
{% dnd_module path="../components/modules/Card", imageOrIcon="image", groupCards=\[ { "groupImage": { "image": { "src": context.team_member\[2\].image.src or scaffold_content.group_team_member_three.image.src or get_asset_url("../images/team-member-use-background-small-3.png"), "alt": context.team_member\[2\].image.alt or scaffold_content.group_team_member_three.image.alt or "", "loading": "lazy", "size_type": "auto_custom_max" } }, "groupIcon": { "icon": { "name": "face-smile" } }, "groupContent": { "headingAndTextHeadingLevel": "h3", "headingAndTextHeading": context.team_member\[2\].name or scaffold_content.group_team_member_three.name or template_translations.section_team_members_two_column_member_name.message, "richTextContentHTML": context.team_member\[2\].role or scaffold_content.group_team_member_three.role or template_translations.section_team_members_two_column_member_role.message }, "groupButton": { "showButton": false } } ] groupStyle={ "groupCard": { "cardStyleVariant": context.card_variant or "card_variant_1", "cardOrientation": "row" }, "groupContent": { "headingStyleVariant": "h4" } } %}
```

--------------------------------

### Render Primary Button Module

Source: https://github.com/hubspot/cms-elevate-theme-public/blob/main/src/unified-theme/templates/theme-settings-preview.hubl.html

Use this snippet to render a primary button with custom text. Ensure the Button module is correctly configured.

```hubl
{% module "button-primary" path="../components/modules/Button" buttonContentText="PRIMARY BUTTON" %}
```

--------------------------------

### Create Child Theme - Design Manager

Source: https://github.com/hubspot/cms-elevate-theme-public/blob/main/README.md

Instructions for creating a child theme using the Design Manager. This involves modifying theme.json and copying fields.json.

```json
"extends": "@hubspot/elevate"
```

--------------------------------

### Include Two Column Call to Action Section Partial

Source: https://github.com/hubspot/cms-elevate-theme-public/blob/main/src/unified-theme/templates/lp-products.hubl.html

Includes a two-column call to action section. It uses a partial and passes context for image, heading, and button details.

```hubl
{# Call to action section #} {% include_dnd_partial path="../sections/two-column-call-to-action.hubl.html", context={ "cards": [ { "image": { "src": scaffold_content.group_call_to_action.image.src, "alt": scaffold_content.group_call_to_action.image.alt, }, "heading": { "text": scaffold_content.group_call_to_action.heading }, "button": { "text": scaffold_content.group_call_to_action.button_text, "href": scaffold_content.group_call_to_action.button_link.url.href } } ] } %}
```

--------------------------------

### Render Logo Gallery Section

Source: https://github.com/hubspot/cms-elevate-theme-public/blob/main/src/unified-theme/sections/logo-gallery.hubl.html

Renders the main section with dynamic background color and padding. It includes modules for an anchor, rich text heading, and the logo grid itself.

```hubl
{# Section #} {% dnd_section background_color={{ context.background_color }}, padding={ "top": section_vertical_spacing_extra_small, "bottom": section_vertical_spacing_extra_small } %} {% dnd_column %} {% dnd_row %} {% dnd_module path="../components/modules/Anchor", anchor={{ context.anchor_id or scaffold_content.anchor.anchor_id }} %} {% end_dnd_module %} {% end_dnd_row %} {% dnd_row %} {% dnd_column %} {% dnd_row %} {% dnd_module path="../components/modules/RichText" groupStyle={ "sectionStyleVariant": section_variant } %} {% module_attribute "richTextContentHTML" %} {{ context.content or scaffold_content.heading or template_translations.section_logo_gallery_heading.message }} {% end_module_attribute %} {% end_dnd_module %} {% end_dnd_row %} {% dnd_row %} {% dnd_module path="@hubspot/logo_grid", styles={ "group_logo_grid": { "column_count": 6, } }, group_logos=[ { "logo": { "alt": scaffold_content.group_logos.logo_one.alt or "", "src": scaffold_content.group_logos.logo_one.src or logos[0], "loading": "eager" } }, { "logo": { "alt": scaffold_content.group_logos.logo_two.alt or "", "src": scaffold_content.group_logos.logo_two.src or logos[1], "loading": "eager" } }, { "logo": { "alt": scaffold_content.group_logos.logo_three.alt or "", "src": scaffold_content.group_logos.logo_three.src or logos[2], "loading": "eager" } }, { "logo": { "alt": scaffold_content.group_logos.logo_four.alt or "", "src": scaffold_content.group_logos.logo_four.src or logos[3], "loading": "eager" } }, { "logo": { "alt": scaffold_content.group_logos.logo_five.alt or "", "src": scaffold_content.group_logos.logo_five.src or logos[4], "loading": "eager" } }, { "logo": { "alt": scaffold_content.group_logos.logo_six.alt or "", "src": scaffold_content.group_logos.logo_six.src or logos[5], "loading": "eager" } } ] %} {% end_dnd_module %} {% end_dnd_row %} {% end_dnd_column %} {% end_dnd_row %} {% end_dnd_column %} {% end_dnd_section %}
```

--------------------------------

### Configure Rich Text Module

Source: https://github.com/hubspot/cms-elevate-theme-public/blob/main/src/unified-theme/sections/team-members-two-column.hubl.html

Adds descriptive text below the section heading. Content can be provided via context, scaffold content, or translations.

```hubl
{% dnd_module path="../components/modules/RichText", groupStyle={ "sectionStyleVariant": section_variant %} {% module_attribute "richTextContentHTML" %}

{{ context.content or scaffold_content.content or template_translations.section_team_members_two_column_description.message }}

{% end_module_attribute %} {% end_dnd_module %}
```

--------------------------------

### Simple Gallery Module

Source: https://github.com/hubspot/cms-elevate-theme-public/blob/main/src/unified-theme/sections/gallery-simple.hubl.html

This HubL code defines a simple gallery section using the @hubspot/image_grid module. It allows for customization of grid settings, aspect ratio, and image display options. Images can be sourced from context variables or fallback scaffold content.

```html
{# Context Variables: - context.background_color: The background color of the section. - context.gallery_image[0-2].src: The source URL of the first gallery image. - context.gallery_image[0-2].alt: The alt text for the first gallery image. #} {% import "../helpers/variables.hubl.html" %} {% dnd_section background_color="{{ context.background_color }}" %} {% dnd_module path="@hubspot/image_grid", grid_settings={ "group_uniform_display_options": { "number_of_columns": 3, "mobile_columns": true, "mobile_number_of_columns": 1 }, "group_aspect_ratio": { "aspect_ratio": "1/1" }, "group_image_click": { "image_click_functionality": "nothing" }, "group_image_hover": { "overlay_show_on": "never" } }, styles={ "grid_images": { "group_gap": { "gap": 32 } } }, slides=[ { "img": { "alt": context.gallery_image[0].alt or scaffold_content.group_gallery.image_one.alt or "", "src": context.gallery_image[0].src or scaffold_content.group_gallery.image_one.src or get_asset_url("../images/gallery-1.png") } }, { "img": { "alt": context.gallery_image[1].alt or scaffold_content.group_gallery.image_two.alt or "", "src": context.gallery_image[1].src or scaffold_content.group_gallery.image_two.src or get_asset_url("../images/gallery-2.png") } }, { "img": { "alt": context.gallery_image[2].alt or scaffold_content.group_gallery.image_three.alt or "", "src": context.gallery_image[2].src or scaffold_content.group_gallery.image_three.src or get_asset_url("../images/gallery-3.png") } } ] %} {% end_dnd_module %} {% end_dnd_section %}
```

--------------------------------

### Configure Image and Text Row

Source: https://github.com/hubspot/cms-elevate-theme-public/blob/main/src/unified-theme/sections/multi-row-alternating.hubl.html

Defines a row with an image and text content, including options for image position, alt text, loading behavior, dimensions, heading, rich text, and button configuration. Use this to set up individual content blocks within the alternating layout.

```hubl
{% dnd_row vertical_alignment="MIDDLE" padding={ "top": section_vertical_spacing_medium, "bottom": section_vertical_spacing_medium } %}
{% dnd_module path="../components/modules/ImageAndText", groupImage={ "imagePosition": context.group[2].image.position or "left", "image": { "alt": context.group[2].image.alt or scaffold_content.group_image_and_text_three.image.alt or "", "loading": context.group[2].image.loading or "lazy", "max_height": context.group[2].image.height or scaffold_content.group_image_and_text_three.image.height or 599, "max_width": context.group[2].image.width or scaffold_content.group_image_and_text_three.image.width or 779, "size_type": "auto_custom_max", "src": context.group[2].image.src or scaffold_content.group_image_and_text_three.image.src or get_asset_url("../images/products-feature-image-3.png") } }, groupContent={ "headingAndTextHeadingLevel": context.group[2].heading.heading_level or "h2", "headingAndTextHeading": context.group[2].heading.text or scaffold_content.group_image_and_text_three.heading or template_translations.section_multi_row_alternating_row_three_heading.message, "richTextContentHTML": image_and_text_three_description|render }, groupButton={ "showButton": context.group[2].button.show_button == 'false' ? context.group[2].button.show_button : true, "buttonContentText": context.group[2].button.text or template_translations.section_multi_row_alternating_row_three_button_text.message, "buttonContentLink": { "url": { "href": context.group[2].button.href or "" } } }, groupStyle={ "groupContent": { "sectionStyleVariant": section_variant, "headingStyleVariant": "h2", "verticalAlignment": { "vertical_align": "MIDDLE" } }, "groupButton": { "buttonStyleVariant": "primary", "buttonStyleSize": "medium" } } %} {% end_dnd_module %} {% end_dnd_row %}
```

--------------------------------

### FAQ Section Inclusion

Source: https://github.com/hubspot/cms-elevate-theme-public/blob/main/src/unified-theme/templates/lp-meeting.hubl.html

Includes the FAQ section partial, passing a context object with a heading and an array of FAQs. Each FAQ has a title and content rendered using the 'render' filter.

```hubl
{# FAQs #}
{% include_dnd_partial path="../sections/faq.hubl.html", context= {
  "heading": {
    "text": scaffold_content.group_faqs.heading or template_translations.section_faq_heading_updated.message
  },
  "faqs": [
    {
      "title": scaffold_content.group_faqs.group_faq_one.question or template_translations.lp_meeting_faq_one_question.message,
      "content": accordion_one_answer|render
    },
    {
      "title": scaffold_content.group_faqs.group_faq_two.question or template_translations.lp_meeting_faq_two_question.message,
      "content": accordion_two_answer|render
    },
    {
      "title": scaffold_content.group_faqs.group_faq_three.question or template_translations.lp_meeting_faq_three_question.message,
      "content": accordion_three_answer|render
    },
    {
      "title": scaffold_content.group_faqs.group_faq_four.question or template_translations.lp_meeting_faq_four_question.message,
      "content": accordion_four_answer|render
    },
    {
      "title": scaffold_content.group_faqs.group_faq_five.question or template_translations.lp_meeting_faq_five_question.message,
      "content": accordion_five_answer|render
    }
  ]
} %}
```

--------------------------------

### Blog Post Topic List Display

Source: https://github.com/hubspot/cms-elevate-theme-public/blob/main/src/unified-theme/templates/blog-detail.hubl.html

Iterates through the blog post's topics and displays the first three. Uses HubL's `content.topic_list` and `topic.name` variables.

```html
{% if content.topic_list|length > 0 %}

{% for topic in content.topic_list %} {% if loop.index <= 3 %} {{ topic.name|sanitize_html }} {% endif %} {% endfor %}

{% endif %}
```

--------------------------------

### Render Testimonial Slider Module

Source: https://github.com/hubspot/cms-elevate-theme-public/blob/main/src/unified-theme/templates/case-studies-detail.hubl.html

Renders the testimonial slider module for a case study, conditionally displayed based on editor status or module visibility.

```html
{% if is_in_editor or (!is_in_editor and module_is_hidden('cs-testimonials') == "false" )%}

{% module "cs-testimonials" path="@hubspot/cs_testimonial_slider" data_tokens={
 "testimonials": "dynamic_page_hubdb_row.hs_testimonials",
 }
%}

{% endif %}
```

--------------------------------

### Render Form Module

Source: https://github.com/hubspot/cms-elevate-theme-public/blob/main/src/unified-theme/templates/theme-settings-preview.hubl.html

This snippet renders a Hubspot form. Ensure the form module is correctly path-ed and configured.

```hubl
{% module "form" path="@hubspot/form" %}
```

--------------------------------

### Social Share Module

Source: https://github.com/hubspot/cms-elevate-theme-public/blob/main/src/unified-theme/templates/blog-detail.hubl.html

Integrates the social sharing module, allowing users to share the blog post. Configured with button style and icon spacing.

```html
{% module "social_share" path="../components/modules/SocialShare" groupStyle={ buttonStyleVariant: "secondary", spaceBetweenIcons: "small" } %}
```

--------------------------------

### Render Card Variant 1 Module

Source: https://github.com/hubspot/cms-elevate-theme-public/blob/main/src/unified-theme/templates/theme-settings-preview.hubl.html

This snippet renders a card with `card_variant_1` styling. It includes an image, icon, heading, and rich text content. Ensure the `Card` module and its assets are correctly configured.

```hubl
{% module "card-variants" path="../components/modules/Card" groupCards=\[ { "groupImage": { "image": { "src": get\_asset\_url("../images/newsletter.png"), "alt": "", "loading": "lazy", "size\_type": "auto\_custom\_max" } }, "groupIcon": { "name": "play-circle" }, "groupContent": { "headingAndTextHeadingLevel": "h4", "headingAndTextHeading": "CARD VARIANT 1", "richTextContentHTML": "Stand out with our captivating content creation services, tailored to engage today's digital audience" }, "groupButton": { "showButton": false } } \] groupStyle={ "groupCard": { "cardOrientation": "column", "cardStyleVariant": "card\_variant\_1" } %} 
```

--------------------------------

### HubL: Image and Text Module in a Row

Source: https://github.com/hubspot/cms-elevate-theme-public/blob/main/src/unified-theme/sections/multi-row.hubl.html

Configures an Image and Text module within a dnd_row. Specifies image properties, content, button, and styling for the module.

```html
{% dnd_row vertical_alignment="MIDDLE" padding={ "top": section_vertical_spacing_medium, "bottom": section_vertical_spacing_medium } %}
{% dnd_module path="../components/modules/ImageAndText", groupImage={ "imagePosition": "left", "image": { "alt": context.group[2].image.alt or scaffold_content.group_image_and_text_three.image.alt or "", "loading": context.group[2].image.loading or "lazy", "max_height": context.group[2].image.height or scaffold_content.group_image_and_text_three.image.height or 599, "max_width": context.group[2].image.width or scaffold_content.group_image_and_text_three.image.width or 779, "size_type": "auto_custom_max", "src": context.group[2].image.src or scaffold_content.group_image_and_text_three.image.src or get_asset_url("../images/products-feature-image-3.png") } }, groupContent={ "headingAndTextHeadingLevel": context.group[2].heading.heading_level or "h2", "headingAndTextHeading": context.group[2].heading.text or scaffold_content.group_image_and_text_three.heading or template_translations.section_multi_row_row_three_heading.message, "richTextContentHTML": context.group[2].content or scaffold_content.group_image_and_text_three.description or template_translations.section_multi_row_row_three_content.message }, groupButton={ "showButton": context.group[2].button.show_button == 'false' ? context.group[2].button.show_button : true, "buttonContentText": context.group[2].button.text or template_translations.section_multi_row_row_three_button_text.message, "buttonContentLink": { "url": { "href": context.group[2].button.href or "" } } }, groupStyle={ "groupContent": { "sectionStyleVariant": section_variant, "headingStyleVariant": "h2", "verticalAlignment": { "vertical_align": "MIDDLE" } }, "groupButton": { "buttonStyleVariant": "primary", "buttonStyleSize": "medium" } } %} {% end_dnd_module %} {% end_dnd_row %}
```

--------------------------------

### Render Company Logo Module

Source: https://github.com/hubspot/cms-elevate-theme-public/blob/main/src/unified-theme/templates/case-studies-detail.hubl.html

Renders the company logo module, conditionally displayed based on editor status or module visibility.

```html
{% if is_in_editor or (!is_in_editor and module_is_hidden('cs-logo') == "false" )%}

{% module "cs-logo" path="@hubspot/cs_company_logo" data_tokens={ "company_logo": "dynamic_page_hubdb_row.hs_company_logo", } %}

{% endif %}
```

--------------------------------

### Render Testimonial Cards with HubL

Source: https://github.com/hubspot/cms-elevate-theme-public/blob/main/src/unified-theme/sections/testimonial-cards.hubl.html

This HubL code snippet defines a section for displaying testimonial cards. It uses the `dnd_module` to include a card component, passing an array of testimonial data. Each testimonial can have an icon, image, rich text content, and an optional button.

```html
{% dnd_section background_color={{ context.background_color }} padding={ "top": context.vertical_spacing or section_vertical_spacing_medium, "bottom": context.vertical_spacing or section_vertical_spacing_medium } %}
{% dnd_column %}
{% dnd_row %}
{% dnd_module path="../components/modules/Card", imageOrIcon="image", groupCards=[
  {
    "groupIcon": {"icon": {"name": ""}},
    "groupImage": {"image": {"alt": "", "loading": "lazy", "max_height": context.image.height or scaffold_content.group_testimonial_1.customer_logo.height or 31, "max_width": context.image.width or scaffold_content.group_testimonial_1.customer_logo.width or 160, "size_type": "auto_custom_max", "src": context.testimonials[0].image or scaffold_content.group_testimonial_1.customer_logo.src or get_asset_url("../images/reviluxify-dark.png")}},
    "groupContent": {"richTextContentHTML": testimonials_content[0]|render},
    "groupButton": {"showButton": false}
  },
  {
    "groupIcon": {"icon": {"name": ""}},
    "groupImage": {"image": {"alt": "", "loading": "lazy", "max_height": context.image.height or scaffold_content.group_testimonial_2.customer_logo.height or 30, "max_width": context.image.width or scaffold_content.group_testimonial_2.customer_logo.width or 160, "size_type": "auto_custom_max", "src": context.testimonials[0].image or scaffold_content.group_testimonial_2.customer_logo.src or get_asset_url("../images/zyntellix-dark.png")}},
    "groupContent": {"richTextContentHTML": testimonials_content[1]|render},
    "groupButton": {"showButton": false}
  },
  {
    "groupIcon": {"icon": {"name": ""}},
    "groupImage": {"image": {"alt": "", "loading": "lazy", "max_height": context.image.height or scaffold_content.group_testimonial_3.customer_logo.height or 30, "max_width": context.image.width or scaffold_content.group_testimonial_3.customer_logo.width or 160, "size_type": "auto_custom_max", "src": context.testimonials[0].image or scaffold_content.group_testimonial_3.customer_logo.src or get_asset_url("../images/crypturon-dark.png")}},
    "groupContent": {"richTextContentHTML": testimonials_content[2]|render},
    "groupButton": {"showButton": false}
  }
], groupStyle={
    "groupContent": {"alignment": {"horizontal_align": "CENTER"}}
  }
}
{% end_dnd_module %}
{% end_dnd_row %}
{% end_dnd_column %}
{% end_dnd_section %}
```

--------------------------------

### Footer Partial Inclusion

Source: https://github.com/hubspot/cms-elevate-theme-public/blob/main/src/unified-theme/templates/lp-meeting.hubl.html

Includes the global footer partial for the LP Meeting template.

```hubl
{% block footer %}
{% global_partial path="./partials/lp-footer.hubl.html" type="FOOTER" %}
{% endblock footer %}
```