Newsletter

Styles for a newsletter used in newsletter module.

Structurally there is one main element .newsletter which contains following elements:

• .newsletter__title
• .newsletter__description
• .newsletter__controls-wrapper
• .newsletter__submit-button
• .newsletter__legal-notice

Example

Here is an example of newsletter element usage. We also used form control styles for presentation purposes.

HTML

<div class="newsletter">
    <h2 class="title module__header newsletter__title">
        <span class="module__header_highlight">Newsletter</span>
    </h2>

    <div class="description newsletter__description mb-xs-2">Example description</div>

    <flash-messenger class="flash-messenger control" name="newsletter-form-1"></flash-messenger>

    <newsletter-form module-instance-id="1">
        <div slot="form">
            <div class="newsletter__controls-wrapper">
                <control-connector class="control" email>
                    <h-control>
                        <h-control-label class="control__label label_required">
                            <label class="label" for="newsletter-email">
                                Your e-mail address
                            </label>
                        </h-control-label>

                        <h-control-content class="control">
                            <h-control-element class="control__element">
                                <h-input controlId="newsletter-email" controlName="email">
                                    <h-input-control></h-input-control>
                                </h-input>
                            </h-control-element>

                            <control-errors></control-errors>
                        </h-control-content>
                    </h-control>
                </control-connector>

                <button type="submit" class="btn btn_primary newsletter__submit-button mb-xs-2">Join the newsletter</button>
            </div>
        </div>
    </newsletter-form>

    <p class="newsletter__legal-notice">Example notice</p>
</div>

Newsletter tags

The .newsletter 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 newsletter less variable in your User Less section to change newsletter styles.

Newsletter variables

Variables used to style a newsletter.

@newsletterMaxWidth: 640;

@newsletterDescriptionFontSize: @fontSizeInPxS;
@newsletterDescriptionLineHeight: @lineHeightInPxS;

@newsletterControlsWrapperGap: @globalSpacing;
@newsletterControlsWrapperMarginBottom: @globalSpacing;

@newsletterSubmitButtonMarginTop: @globalSpacing;

@newsletterLegalNoticeFontSize: @fontSizeInPxXS;
@newsletterLegalNoticeLineHeight: @lineHeightInPxXS;

If you want to change newsletter styles, you can just change the variables. To change a default max-width just modify @newsletterMaxWidth variable.

@newsletterMaxWidth: 200;

Newsletter styles

Here are standard newsletter styles.

.newsletter {
    &__container {
        .pixel-to-rem(max-width, @newsletterMaxWidth);
    }

    &__description {
        .font-size(@newsletterDescriptionFontSize);
        .line-height(@newsletterDescriptionLineHeight);
    }

    &__controls-wrapper {
        display: block;
        gap: @newsletterControlsWrapperGap;
        align-items: flex-end;
        margin-bottom: @newsletterControlsWrapperMarginBottom;
    }

    &__submit-button {
        min-width: max-content;
        width: 100%;
        margin-top: @newsletterSubmitButtonMarginTop;
    }

    &__legal-notice {
        .font-size(@newsletterLegalNoticeFontSize);
        .line-height(@newsletterLegalNoticeLineHeight);
    }
}

@media screen and (max-width: (@breakPointXs - 1)) {
    .newsletter {
        &__control-errors_block {
            display: none;
        }

        .control__element_flex {
            display: block;
        }

        .newsletter__control-errors_inline {
            display: block;
        }

        .newsletter__submit-button {
            width: 100%;
            margin-top: @newsletterSubmitButtonMarginTop;
        }
    }
}

Modules reference

• newsletter

Styles reference

• control