Q Card Docs
Modules

Terms & important info

Legal and important information tables with product-specific visibility.

Terms & important info

Description

Terms & important info holds the legal and important information content, including the older table layouts that list each update and its details. Separate content is held for Q Card and Q Mastercard, and the page's product type controls which one is shown.

How to edit

Unlike the other modules, this content does not have its own CK template. It is edited directly on the pages that use it.

  1. Open the page that contains the important information section in Elementor.
  2. Find the important information or terms section.
  3. Edit the legal copy directly, keeping the table rows and product wrappers in place.
  4. Save, then check the page for both products if it supports both.

Have legal changes checked by whoever is responsible for compliance before publishing.

Variants

Content setClasses and IDs used
Q Card informationqc-info, qcard-only
Q Mastercard informationqmc-info, qmastercard-only

Product switching

Both sets of content can sit on the same page, and the one that does not match the page's product type is hidden automatically:

  • On Q Mastercard pages, anything inside qc-info or marked qcard-only is hidden.
  • On Q Card pages, anything inside qmc-info or marked qmastercard-only is hidden.

Keep these IDs and classes in place or the wrong product's terms may appear.

Information tables

The important information tables use an older layout that is kept for these pages:

  • important-info-head is the table heading row, with the first column holding the update date.
  • Each row inside important-info is a separate entry, with alternating row shading.
  • information-container holds the detail for an entry and is hidden until it is made active, which is how the expand behaviour works.

Because this layout is not built from standard page builder widgets, add new entries by copying an existing row rather than building one from scratch.

Classes

Primary classes and IDs used by the terms & important info component:

Class or IDWhat it's for
important-infoTable wrapper
important-info-headTable heading row
important-info-updateUpdate date column
information-containerExpandable detail for an entry, shown when active is applied
qcard-only / qmastercard-onlyShow content for one product only
qc-info / qmc-infoProduct-specific information sections

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

On this page