HubSpot Module Code Snippet: Convert Alignment Fields to CSS Flex Properties [HubL Macro]

Below are macros you can use in your HubSpot CMS development projects to convert a text align field into flexbox justify content values. Sometimes text alignment and it’s icons are easier for content editors to understand. So when building functionality you may need to convert it into flexbox values like I have done here.

HubL Code

Macro for Text Alignment Field

{% macro text_align_to_flex(text_alignment) %}
    {% set justify_content_value = "" %}
    {% if text_alignment == "LEFT" %}
        {% set justify_content_value = "flex-start" %}
    {% elif text_alignment == "CENTER" %}
        {% set justify_content_value = "center" %}
    {% elif text_alignment == "RIGHT" %}
        {% set justify_content_value = "flex-end" %}
    {% endif %}
    
    justify-content:{{ justify_content_value }};

    {# Add this where you want to value to be placed - {{ text_align_to_flex(module.style.heading.textalignment.text_align) }} #}
{% endmacro %}

Macro for Alignment Field

{% macro get_flex_alignment(alignment) %}
    display:flex;
    {% if alignment.horizontal_align == "LEFT" %}
        justify-content: flex-start;
    {% elif alignment.horizontal_align == "CENTER" %}
        justify-content: center;
    {% elif alignment.horizontal_align == "RIGHT" %}
        justify-content: flex-end;
    {% endif %}

    {% if alignment.vertical_align == "TOP" %}
        align-items: flex-start;
    {% elif alignment.vertical_align == "MIDDLE" %}
        align-items: center;
    {% elif alignment.vertical_align == "BOTTOM" %}
        align-items: flex-end;
    {% endif %}
{% endmacro %}
{# output {{ get_flex_alignment(module.style.alignment_field) }} #}