Skip to content

Product Ask Questions Modal

Styles for the product ask questions modal used in product_ask_questions_modal_form macro.

Structurally .product-ask-questions-modal contains following elements:

  • .product-ask-questions-modal__product
  • .product-ask-questions-modal__product-image-wrapper
  • .product-ask-questions-modal__product-name
  • .product-ask-questions-modal__legal-notice

And following class modifiers:

  • .product-ask-questions-modal__product_horizontal

Example

Here is an example of product ask questions modal element usage taken from the product_ask_questions_modal_form macro but without the webcomponent responsible for rendering a form itself to simplify the example.

Twig
    <h-modal class="product-ask-questions__modal modal-wrapper_s" id="{{ options.modalName }}">
        <h-modal-header class="product-ask-questions-modal__header">
            <header class="modal__title">Ask about the product</header>

            <h-modal-close class="btn btn_icon">
                <svg class="icon icon_l btn__icon">
                    <use xlink:href="/assets/img/icons/symbol-defs.svg#icon-x"></use>
                </svg>
            </h-modal-close>
        </h-modal-header>

        <h-modal-body>
            <div class="product-ask-questions-modal__product product-ask-questions-modal__product_horizontal">
                <div class="product-ask-questions-modal__product-image-wrapper">
                    <picture class="image">
                        <img
                            src="/path/to/img.png"
                            alt="example image"
                            width="300"
                            height="300"
                            decoding="async"
                            loading="lazy"
                        >
                    </picture>
                </div>

                <div class="product-ask-questions-modal__product-name">
                    My product
                </div>
            </div>

            <p class="product-ask-questions-modal__legal-notice">
                My legal notice
            </p>
        </h-modal-body>
    </h-modal>

Product Ask Questions Modal tags

The .product-ask-questions-modal classes were designed to be used with block elements like <div>. However, you can use them with any other element and customize it to your own needs.

LESS

You can modify any product ask questions modal less variable in your User Less section to change the product ask questions modal styles.

Product Ask Questions Modal variables

Variables used to style the product ask questions modal.

@productAskQuestionsModalProductImageWrapperMaxWidth: 128px;

@productAskQuestionsProductNameFontSize: @fontSizeInPxS;
@productAskQuestionsProductNameLineHeight: @lineHeightInPxS;
@productAskQuestionsProductNameColor: @globalFontColorSecondary;

@productAskQuestionsLegalNoticeFontSize: 10;
@productAskQuestionsLegalNoticeLineHeight: @lineHeightInPxXS;
@productAskQuestionsLegalNoticeColor: @globalFontColorSecondary;
@productAskQuestionsLegalNoticeMarginBottom: @globalSpacing * 2.5;
@productAskQuestionsLegalNoticeMobileMarginBottom: @globalSpacing;

If you want to change product ask questions modal styles, you can just change the variables. To change a default font-size of the product name inside the modal just modify the @productAskQuestionsProductNameFontSize variable.

@productAskQuestionsProductNameFontSize: 40;

Product Ask Questions Modal styles

Here are standard product ask questions modal styles.

.product-ask-questions-modal {
    &__product {
        display: flex;
        gap: @globalSpacing;
        align-items: center;

        &_with-image {
            @media (max-width: (@breakPointXs - 1)) {
                flex-direction: column;
            }
        }

        &-image-wrapper {
            max-width: @productAskQuestionsModalProductImageWrapperMaxWidth;
        }

        &-name {
            .pixel-to-rem(font-size, @productAskQuestionsProductNameFontSize);
            .pixel-to-rem(line-height, @productAskQuestionsProductNameLineHeight);

            color: @productAskQuestionsProductNameColor;
        }
    }

    &__legal-notice {
        .font-size(@productAskQuestionsLegalNoticeFontSize);
        .line-height(@productAskQuestionsLegalNoticeLineHeight);
        color: @productAskQuestionsLegalNoticeColor;
        margin-bottom: @productAskQuestionsLegalNoticeMarginBottom;

        @media (max-width: (@breakPointXs - 1)) {
            margin-bottom: @productAskQuestionsLegalNoticeMobileMarginBottom;
        }
    }
}

Macros reference