Hero
Hero templates used across Q Card and Q Mastercard pages.
Hero
Description
Hero modules are the primary header sections at the top of pages. Variants support image or text layouts, feature lists, search, and a shared card product toggle.
How to edit
- Go to Elementor → Editor → Templates.
- Search for
Hero(or a word from the specific template name below). - Edit copy, images, CTAs, and feature items directly in the template, or on the page if the hero was inserted dynamically.
- For toggle heroes, keep the shared card toggle component intact — only change the labels and links that are meant to be content.
Variants
| Template | What it is |
|---|---|
CK – Hero – Homepage | The standard homepage hero |
CK – Hero – Homepage – Carousel Background | The homepage hero with a carousel background |
CK – Hero – Image – Features | Image hero with a feature list |
CK – Hero – Image – Text | Image hero with a heading and body copy |
CK – Hero – Image – Text – Logo | Image hero with a logo alongside the copy. Used on deal pages |
CK – Hero – Image – Toggle | Image hero with the product toggle |
CK – Hero – Text | Text-only hero |
CK – Hero – Text – Toggle | Text hero with the product toggle |
CK – Hero – Text – Search | Text hero with a search field |
CK – Hero – Merchant logo | Template to store the merchant logo used in the logo hero variant |
CK – Hero – Card Toggle Component | The shared toggle used by the toggle heroes |
Homepage hero
For the homepage, both homepage hero templates are added to the page and one is always hidden using the dynamic visibility settings in Elementor. Switch between them in the editor depending on whether you want the carousel background or the static background.
On the carousel background version, update both the background images and the mobile carousel images when the imagery changes.
You may also need to check the colours of the elements in this hero so they stay readable. Those colours are controlled by custom CSS.
Classes
Classes you add yourself
| Class | What it does |
|---|---|
ck-toggle-hero | Add to hero sections with a product toggle. Turns the background grey when Q Card is selected. For Q Mastercard, set the background in the editor. |
ck-hero--dark-text | Makes the hero text dark. Use it if you change the hero background to yellow or cream, so the copy stays readable. |
ck-hero--light | Makes the hero background grey and makes the text dark. |
ck-hero-lifestyle-image | Add this class to the image in hero when using a lifestyle image. It changes the navbar's background and makes sure the image expands to the edge of the screen. |
Structure classes
Primary classes used by the hero component:
| Class | What it's for |
|---|---|
ck-hero | Main wrapper |
ck-homepage | Homepage variant, used alongside ck-hero |
ck-hero__inner | Inner container |
ck-hero__badge | Badge above the heading |
ck-hero__title | Heading |
ck-hero__text | Body copy |
ck-hero__eyebrow | Small label above the heading |
ck-hero__feature | A single feature row |
ck-hero__feature-icon | Icon beside a feature |
ck-hero__cvp | A single value proposition |
ck-hero__cvp-icon | Value proposition icon |
ck-hero__cvp-title | Value proposition title |
ck-hero__cvp-text | Value proposition text |
ck-hero__cvps-slider | Value proposition carousel |
ck-hero__search-form | Search field in the search hero |
ck-hero__toggle | Product toggle |
ck-hero__toggle-container | Container around the toggle |
ck-hero__toggle-btn | A single toggle button |
ck-hero__buttons | Container for the call-to-action buttons |
ck-hero__image-container | Hero image |
ck-hero__breadcrumbs | Breadcrumb row |
ck-hero__breadcrumbs-icon | Icon between breadcrumb items |
IDs
These mark the active state of the toggle:
| ID | Applies on |
|---|---|
ck-qcard-toggle | Q Card pages (body[data-page-type="qcard"]) |
ck-qmastercard-toggle | Q Mastercard pages (body[data-page-type="qmastercard"]) |
Styling is done through a combination of the built-in page builder options as well as custom CSS where needed.