Styling

Embed Elements is styled with CSS custom properties (CSS variables). Set them on the host element in your page and they cascade into every component, including across the web components' shadow DOM.

Some values (colours, fonts) can also be set centrally in Spaaza Console. See Content Management.

How it works

Every visual size, spacing, and layout value is read as var(--content-…, default). Set the variable on the element that wraps the embed (or directly on spaaza-content-page) and the new value flows down to all cards, titles, buttons, and vouchers.

#spaaza-elements {
  --content-card-title-font-size: 1.75rem;
  --content-card-border-radius: 12px;
  --content-card-padding: 1.25rem;
}

Colours and brand fonts are configured in Spaaza Console, not host CSS — see Colours and fonts.

Start here: variables that might be useful

What it changes	Variable	Default
Zone title size	--content-zone-title-font-size	1.5625rem
Zone title colour	--content-zone-title-color	(inherits text colour)
Card corner radius	--content-card-border-radius	15px
Card drop shadow	--content-card-shadow	none
Card title size	--content-card-title-font-size	1.5625rem
Body text size	--content-card-description-font-size	1.0625rem
Voucher code / expiry size	--content-voucher-meta-font-size	1rem
Scale all primary-font text	--content-font-primary-scale	1
Scale all secondary-font text	--content-font-secondary-scale	1
Title width (card)	--content-card-title-max-width	100%
Description width (card)	--content-card-description-max-width	100%
Card inner padding	--content-card-padding	0.875rem
Gap between stacked cards	--content-card-vertical-gap	1rem
Page background	--content-page-background-color	white

--content-card-shadow takes a full box-shadow value, e.g. 0 2px 8px rgba(0,0,0,.1). It applies to card, banner, card-small and voucher cards. When cards sit in a horizontal slider, also set --content-card-shadow-gutter (e.g. 10px) so the shadow isn't clipped top/bottom by the slider track.

--content-card-title-max-width / --content-card-description-max-width narrow the text columns (e.g. 60%) so the text does not overlap the part of the background image that might contain a product.

--content-card-vertical-gap controls the spacing between card, banner and card-small items stacked vertically in a zone (tiles keep their fixed spacing).

Fonts

Set your brand fonts in three steps:

1. Host the font files at an HTTPS URL. .woff2 is recommended (smallest, universally supported); a variable font is ideal: one .woff2 covers every weight.
2. Get the domain where you host your fonts whitelisted. The embed only loads fonts from domains Spaaza has approved, so send us the host to whitelist first (otherwise the browser will refuse to fetch them).
3. Add the URLs in Console → Settings → Default campaign content settings → Fonts (Primary + Secondary). Save the loyalty setting to apply.

• Primary font renders titles / headlines (card titles, zone titles, member-card name).
• Secondary font renders body text, descriptions, buttons, and labels.

Full reference

All --content-* variables, grouped. The "Start here" set above is the recommended subset; everything below is available for fine-grained control.

Variable scopes

The word right after --content- tells you what the variable is part of:

Scope	Applies to
card	the card layout (also used by banners)
card-small	the compact card layout
tile	the tile layout (also the base for tile-detailed)
tile-detailed	the linear layout (image beside text)
tile-full	the full-width detail-page layout (currently reserved for basket-type campaigns)
page	the whole embed (background, max-width, responsive anchor)
zone	a zone (section) heading
font	global font-role settings: primary (titles) / secondary (body)
button, wallet, progress, voucher, membercard, referral, markdown, item	that specific element/component

Font sizes

Variable	Default
--content-card-title-font-size	1.5625rem
--content-zone-title-font-size	1.5625rem
--content-card-description-font-size	1.0625rem
--content-tile-title-font-size	1.0625rem
--content-tile-description-font-size	1rem
--content-tile-detailed-title-font-size	1.0625rem
--content-tile-detailed-description-font-size	1rem
--content-tile-full-title-font-size	1.25rem
--content-tile-full-description-font-size	1.0625rem
--content-tile-label-font-size	0.75rem
--content-tile-detailed-label-font-size	0.75rem
--content-tile-full-label-font-size	0.75rem
--content-markdown-heading-font-size	1.25rem
--content-markdown-body-font-size	1.0625rem
--content-button-font-size	1rem
--content-button-small-font-size	0.875rem
--content-button-large-font-size	1.3rem
--content-membercard-code-font-size	0.9rem
--content-voucher-meta-font-size	1rem
--content-progress-text-font-size	0.875rem
--content-item-count-font-size	0.8rem
--content-wallet-balance-font-size	1.5rem
--content-wallet-text-small-font-size	1rem
--content-referral-code-font-size	1.1rem
--content-card-rewards-left-font-size	0.875rem
--content-tile-detailed-rewards-left-font-size	0.75rem
--content-tile-full-rewards-left-font-size	0.875rem

Button/label padding and the loading spinner scale with the font size — changing --content-button-font-size (labels share the button variables) resizes the whole control proportionally.

Voucher text clamping

Maximum lines before the text is cut off with an ellipsis, on voucher cards:

Variable	Default
--content-voucher-title-line-clamp	2
--content-voucher-description-line-clamp	2

Font scale & style

Variable	Default
--content-font-primary-scale	1
--content-font-secondary-scale	1
--content-font-primary-weight	normal
--content-font-primary-text-transform	uppercase

Spacing & layout

Variable	Default
--content-card-padding	0.875rem
--content-card-border-radius	15px
--content-card-shadow	none
--content-card-shadow-gutter	0px
--content-card-title-max-width	100%
--content-card-description-max-width	100%
--content-card-vertical-gap	1rem
--content-card-campaign-margin-top	0px
--content-tile-campaign-elements-margin-top	0.5em
--content-tile-detailed-campaign-elements-margin-top	0.5em
--content-tile-full-campaign-margin-top	10px
--content-button-text-offset	0.0375em
--content-label-text-offset	0.1em

--content-card-shadow is a full box-shadow value (multiple shadows and inset work too). Pair it with --content-card-shadow-gutter when cards render in horizontal sliders, so the shadow has vertical room and isn't clipped.

The text offsets nudge button/label text up (negative) or down (positive) and apply at their full value. In modern browsers (Chrome 133+, Safari 18.2+) button and label text self-centres for any font and the offsets are only needed as a manual override.

Image sizing

Variable	Default
--content-tile-image-size	100%
--content-tile-detailed-image-size	40%
--content-tile-full-image-size	100%
--content-tile-image-aspect-ratio	1 / 1
--content-tile-image-padding	8px

Page & dimensions

Variable	Default
--content-page-average-mobile-width	386px
--content-page-max-width	(unset)
--content-card-max-width	(unset — falls back to the responsive anchor)
--content-page-background-color	white
--content-zone-title-color	(unset)

Colours and fonts (set in Console)

All of these follow the same fallback chain throughout the system: the item's own campaign styling → the project default (Console) → a built-in fallback. Configure them in Spaaza Console; they are not overridable from host CSS.

Colours

Variable	Affects
--backgroundColor	Card / banner / card-small background (when no image)
--textColor	Card / banner / card-small text (titles, descriptions, meta text)
--primaryActionBackgroundColor	Primary action background (labels and buttons)
--primaryActionTextColor	Primary action text (labels and buttons)
--secondaryActionBackgroundColor	Secondary action background (labels and buttons)
--secondaryActionTextColor	Secondary action text (labels and buttons)

Font faces

Variable	Affects
--primaryFontFace	Card / banner / card-small titles, and zone titles
--secondaryFontFace	All other text (descriptions, buttons, labels, voucher meta)

Set fonts in Console (see Fonts above) so the files are loaded and whitelisted; the host-CSS variables are for advanced overrides only.

The responsive anchor

--content-page-average-mobile-width (default 386px) controls card size. The default is the average phone width, so cards look right out of the box. Setting it does two things:

• Card height (all screens): the card's minimum height is half this value (386px gives a 193px minimum height), making a 2:1 card at the default width. That matches the recommended 2:1 background image, so the image fills the card cleanly at the most common phone width. A larger value makes cards taller.
• Card width (tablet and desktop): above phone widths, cards stop filling the screen and settle at this width, so they don't stretch oversized. A larger value makes them wider there.

On phones the card fills the screen width: it is 2:1 at this value, stretches a little wider on bigger phones up to a cap, then snaps back to this width on tablet and desktop. So on phones the value changes height, not width, and it never changes how many cards appear per row.

--content-page-max-width is separate: it caps the width of the whole embed, not individual cards.

Default background images & colors

Card and voucher background images are not controlled by CSS variables. They come from the campaign and voucher image fields in Console, with project-level defaults as a fallback:

• Per campaign or voucher: set the image on the item itself. See Campaign fields.
• Default voucher image: one fallback image used for every voucher that has none of its own (a voucher's own image overrides it). See Styling Configuration.
• Default campaign content: fallback background, text, and action colours applied when a campaign sets none. See Styling Configuration.