Skip to content

Consents Modal

This webcomponent is responsible for rendering a modal that asks for the consent of saving privacy informations.

Attributes

Attribute name Type Description
basicOpened boolean if set to true a basic consents modal will be opened
advancedOpened boolean if set to true an advanced consents modal will be opened

DOM Events

This webcomponent listens to the following DOM events:

Example

    <consents-modal>
        <header slot="base-header">Header</header>

        <div slot="base-content">
            Content
            <p>
                <a class="link link_secondary" href="/link/to/privacy-policy">Privacy policy link</a>
            </p>
        </div>

        <consents-show-advanced slot="base-buttons" class="btn btn_secondary">Customize consents</consents-show-advanced>
        <consents-accept-all slot="base-buttons" class="btn btn_primary">Go to store</consents-accept-all>

        <header slot="advanced-header">Advanced header</header>

        <consents-show-base slot="advanced-header" class="btn btn_icon">
            <svg class="icon icon_l btn__icon">
                <use xlink:href="/assets/img/icons/symbol-defs.svg#icon-x"></use>
            </svg>
        </consents-show-base>

        <div slot="advanced-content">
            Policy description

            <consents-checkbox label="Select all" name="all"></consents-checkbox>

            <consents-checkbox label="Necessary for the website to function" checked disabled>
                <div slot>Cookie description</div>
            </consents-checkbox>

            <consents-checkbox label="Functional" name="functionalConsent">
                <div slot>Functional consent</div>
            </consents-checkbox>

            <consents-checkbox label="Analytical" name="analyticsConsent">
                <div slot>Analytics consent</div>
            </consents-checkbox>

            <consents-checkbox label="Analytical software provider" name="platformAnalyticsConsent">
                <div slot>Platform analytics consent</div>
            </consents-checkbox>

            <consents-checkbox label="Marketing" name="marketingConsent">
                <div slot>Marketing consent</div>
            </consents-checkbox>
        </div>

        <consents-show-base slot="advanced-buttons" class="btn btn_outline">Cancel</consents-show-base>
        <consents-save slot="advanced-buttons" class="btn btn_primary">Save preferences</consents-save>
    </consents-modal>

    <h-modal class="modal-wrapper_full-bottom consents-modal" hidden>
        <h-modal-header class="consents-modal__header">
            <header>Header</header>
        </h-modal-header>

        <h-modal-body class="consents-modal__body">
            <div>
                Content
                <p>
                    <a class="link link_secondary" href="/link/to/privacy-policy">Privacy policy link</a>
                </p>
            </div>
        </h-modal-body>

        <h-modal-footer class="consents-modal__footer">
            <consents-show-advanced class="btn btn_secondary">Customize consents</consents-show-advanced>
            <consents-accept-all class="btn btn_primary">Go to store</consents-accept-all>
        </h-modal-footer>
    </h-modal>

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

        <h-modal-body>
             <div>
                Policy description

                <consents-checkbox label="Select all" name="all"></consents-checkbox>

                <consents-checkbox label="Necessary for the website to function" checked disabled>
                    <div slot>Cookie description</div>
                </consents-checkbox>

                <consents-checkbox label="Functional" name="functionalConsent">
                    <div slot>Functional consent</div>
                </consents-checkbox>

                <consents-checkbox label="Analytical" name="analyticsConsent">
                    <div slot>Analytics consent</div>
                </consents-checkbox>

                <consents-checkbox label="Analytical software provider" name="platformAnalyticsConsent">
                    <div slot>Platform analytics consent</div>
                </consents-checkbox>

                <consents-checkbox label="Marketing" name="marketingConsent">
                    <div slot>Marketing consent</div>
                </consents-checkbox>
            </div>
        </h-modal-body>

        <h-modal-footer>
            <consents-show-base class="btn btn_outline">Cancel</consents-show-base>
            <consents-save class="btn btn_primary">Save preferences</consents-save>
        </h-modal-footer>
    </h-modal>

Webcomponents reference