Content blocks

Description

Content blocks are the general-purpose page body sections used across Q Card and Q Mastercard pages. They cover customer value propositions (CVPs), callout bands, legal copy, image + text rows, and standalone text blocks.

How to edit

1. Go to Elementor → Editor → Templates.
2. Search for Content (or a word from the specific template name below).
3. Open the template and edit the content and widgets directly.
4. Save, then check a page that uses the template.

Variants

Value propositions

Callout and legal

Image + text rows

Text blocks

CVPs

• Displays 2–4 customer value propositions as carousel slides.
• The number of visible slides is set by the script below, based on screen size and how many slides there are: 1.4 on mobile, 2 on tablet, and up to 4 on desktop (or fewer if there are fewer than four slides).
• CK – Content – CVPs Dark is the maroon background version, which switches the text and bullets to white. It is the same carousel with the dark class added to ck-content__cvps.

Callout

• A single row with an image, a heading, and a call-to-action button.
• On desktop the button sits to the right of the content. On mobile it stretches full width underneath.
• Supports Q Card and Q Mastercard switching. Add the content for each product to ck-content__qcard and ck-content__qmastercard, and whichever version does not match the page's product type is hidden automatically.

Legal copy

• Used for fine print, terms, and disclosure text.
• Text always displays at 14px in grey, regardless of the size set in the editor, so legal copy stays consistent across the site.
• Bulleted and numbered lists are supported.

Image + text

• A two-column row with text on one side and an image on the other.
• On desktop the text column is capped at 558px wide. On mobile it uses the full width.
• Supports a small eyebrow label above the heading, body text, a pill-style icon list, a plain icon list, and a button.
• Pills display as rounded chips with a 24px icon. The plain list uses 20px icons and no chip background.
• On mobile, pills stack vertically and the button stretches full width.

Text block

• A centred text block, constrained to 886px wide.
• There is a separate template for each combination of heading, subcopy, subtitles, image, and video, so pick the one that matches the layout you need rather than adding or removing widgets.
• Images and video have rounded corners and display at 310 × 204px on desktop.
• CK – Content – Text block – Title + copy centred is the centred version. It centres the text, displays lists as centred bullet rows, and increases body copy to 18px on desktop (back to 16px on mobile), using the ck-content__centred class.

Classes

Primary classes used by the content components:

No IDs are used by the content components.

Styling is done through a combination of the built-in page builder options as well as custom CSS where needed.

Scripts

Both scripts below are added using the HTML editor template.

CVPs carousel

Sets how many slides are visible based on screen size and slide count.

<script>
    (() => {
        document.addEventListener("DOMContentLoaded", function () {
            let hasAppliedScroll = false;
            function handleContentCVPScroll() {
                const cvpsSlider = document.querySelectorAll(
                    ".ck-content__cvps .swiper",
                );

                cvpsSlider.forEach((slider) => {
                    const totalSlides =
                        slider.querySelectorAll(".swiper-slide").length;

                    if (slider && slider.swiper) {
                        if (window.innerWidth <= 767) {
                            slider.swiper.params.slidesPerView = 1.4;
                        } else if (window.innerWidth <= 1023) {
                            slider.swiper.params.slidesPerView = 2;
                        } else {
                            slider.swiper.params.slidesPerView =
                                totalSlides <= 4 ? totalSlides : 4;
                        }
                        slider.swiper.update();

                        if (!hasAppliedScroll) {
                            window.removeEventListener(
                                "scroll",
                                handleContentCVPScroll,
                            );
                            hasAppliedScroll = true;
                        }
                    }
                });
            }

            window.addEventListener("scroll", handleContentCVPScroll);
            window.addEventListener("resize", handleContentCVPScroll);
        });
    })();
</script>

Callout product toggle

Switches the page between Q Card and Q Mastercard when a callout button is clicked.

<script>
    (() => {
        document.addEventListener("DOMContentLoaded", () => {
            const qmastercardToggles = document.querySelectorAll(
                ".ck-content__qmastercard .elementor-button",
            );
            const qcardToggles = document.querySelectorAll(
                ".ck-content__qcard .elementor-button",
            );

            qmastercardToggles.forEach((toggle) => {
                toggle.addEventListener("click", (e) => {
                    e.preventDefault();
                    document.body.setAttribute("data-page-type", "qcard");
                });
            });

            qcardToggles.forEach((toggle) => {
                toggle.addEventListener("click", (e) => {
                    e.preventDefault();
                    document.body.setAttribute("data-page-type", "qmastercard");
                });
            });
        });
    })();
</script>