This procedure is intended for Page Designer administrators who want to create a carousel combining image and video cards within a page.

Component Objective

The Card Carousel Wrapper Component is a container used to create a carousel containing media-based cards.

The carousel can combine:

• Images
• Videos from any video source
• Vimeo videos

The carousel uses Instagram-ratio media assets.

The Wrapper can contain an unlimited number of cards, allowing the administrator to build the carousel according to the amount of content required.

Component Structure

The Card Carousel uses a parent-and-child structure.

The Card Carousel Wrapper creates the carousel itself and provides optional introductory content.

Individual media cards are then added inside the Wrapper.

Conceptually:

Card Carousel Wrapper

→ Optional Header
→ Optional Subheader
→ Card Carousel Image
→ Card Carousel Video
→ Card Carousel Vimeo
→ Additional cards as required

The media itself is therefore configured on the individual cards, not directly on the Wrapper.

Wrapper Header and Subheader

The Card Carousel Wrapper provides:

• Header
• Subheader

Both are optional.

They use the legacy rich-text editing approach.

Use these fields when the complete carousel requires introductory context.

The Header and Subheader belong to the carousel as a whole, while the individual cards can contain their own text.

Available Card Types

When adding content inside the Card Carousel Wrapper, three card components are available:

The card type should be selected according to the media being used.

Card Carousel Image

Use Card Carousel Image to create an image-based slide.

The image is selected for the card and acts as the card's media.

The card can additionally include:

• Optional text content
• Optional CTA
• Background overlay

The background overlay can be enabled when the image does not provide sufficient contrast for the text displayed over it.

Card Carousel Video

Use Card Carousel Video for video content from any video source.

The component requires a:

Video URL

Enter the appropriate URL for the video source.

This card can additionally include:

• Optional text content
• Optional CTA
• Background overlay

The Background overlay can be particularly useful when the video does not provide enough contrast for the text displayed over it.

Card Carousel Vimeo

Use Card Carousel Vimeo specifically for videos hosted on Vimeo.

This card requires a:

Vimeo ID

Enter the numeric Vimeo ID rather than the complete Vimeo URL.

For example:

https://vimeo.com/1218263037/...

becomes:

1218263037

The Vimeo card can additionally include:

• Optional text content
• Optional CTA
• Background overlay

Do not use the Vimeo card for another video source.

Choosing Between Video and Vimeo Cards

The distinction is based on the video source and input method.

Video from any source

Use:

Card Carousel Video

and provide the:

Video URL

Vimeo specifically

Use:

Card Carousel Vimeo

and provide the:

Vimeo ID

Do not enter the complete Vimeo URL into the Vimeo ID field.

Vimeo Content Workflow

Teoxane uses a global Vimeo account/library.

When a subsidiary needs to use a new Vimeo video that is not yet available:

1. Liaise with HQ.
2. HQ uploads the video to Teoxane's global Vimeo library.
3. Obtain the resulting Vimeo URL.
4. Extract the numeric Vimeo ID.
5. Enter that ID into the Card Carousel Vimeo Component.

This workflow applies when using the dedicated Vimeo card.

Media Ratio

Media used within the Card Carousel should follow the Instagram ratio.

Prepare the media accordingly before building the carousel so that the different cards work together as one consistent composition.

This applies whether the carousel contains:

• Images
• Videos
• A combination of both

Individual Card Text

Each individual card can contain optional text content.

The text belongs specifically to that card rather than to the complete carousel.

This creates two possible levels of information:

Carousel level

Optional Header / Subheader on the Wrapper.

Card level

Optional Content on each individual card.

This allows the carousel to introduce a general subject and then provide card-specific information where required.

Individual Card CTA

Cards can also contain an optional CTA.

The CTA configuration provides:

• Text
• Link
• Style

The CTA can therefore turn an individual media card into a navigational or promotional element.

A card does not need a CTA when no navigation is required.

Background Overlay

Image and video cards provide a Background overlay option.

Enable the overlay when the underlying media does not provide sufficient contrast for the text displayed over it.

The purpose of the overlay is to improve text readability.

This is useful for:

• Images where the text overlaps visually busy content
• Images where text and background have insufficient contrast
• Videos where the underlying imagery does not provide enough contrast

Do not enable the overlay simply because the option exists. Use it when it improves readability.

Unlimited Number of Cards

The Card Carousel Wrapper can contain an unlimited number of cards.

Administrators can therefore continue adding Image, Video or Vimeo cards according to the content requirements of the carousel.

The carousel can also combine the available card types rather than being restricted to one media format.

Placement

The Card Carousel can technically be used in different areas of Page Designer.

However, the recommended placements are:

1. Boxed Layout
2. Main Region

Use these placements as the standard approach.

The carousel is a media-focused component and benefits from sufficient horizontal space.

Although other placements may technically be possible, they should not be the recommended implementation.

Recommended Use

Use the Card Carousel when multiple media elements belong together and should be presented as a single carousel experience.

For example, the Wrapper can provide the general Header and Subheader while each individual card provides its own:

• Media
• Text
• CTA

The carousel can contain a mix of images and videos according to the story being presented.

The Wrapper Does Not Contain the Media Directly

The Card Carousel Wrapper creates the carousel structure.

Add Card Carousel Image, Card Carousel Video or Card Carousel Vimeo components inside it to create the actual cards.

Use Instagram-Ratio Media

Prepare the carousel's media assets using the Instagram ratio.

Video and Vimeo Are Different Card Types

Do not confuse:

Card Carousel Video → Video URL → any video source

with:

Card Carousel Vimeo → Vimeo ID → Vimeo exclusively

Vimeo Requires the Numeric ID

When using Card Carousel Vimeo, enter the numeric Vimeo ID rather than the full Vimeo URL.

Use the Background Overlay for Readability

If card text does not have sufficient contrast against the image or video, enable Background overlay.

The objective is to keep the text readable.

Header and Subheader Apply to the Carousel

The Wrapper's optional Header and Subheader introduce the overall carousel.

Individual cards have their own optional text content.

Unlimited Does Not Mean Every Carousel Needs Many Cards

The Wrapper technically supports an unlimited number of cards. Add cards according to the actual content requirement rather than treating the absence of a limit as a requirement to create a very large carousel.

Prefer Boxed Layout or Main Region

Although the component can technically be used elsewhere, the recommended placements are Boxed Layout and Main Region.

1. Determine Whether a Carousel Is Appropriate

Identify whether the content consists of multiple related media elements that should be presented together as a carousel.

Determine whether the carousel will contain:

• Images
• Videos
• Vimeo videos
• A combination of these media types

2. Prepare the Media

Prepare the required media using the Instagram ratio.

For image cards, prepare the required images.

For Video cards, obtain the required Video URLs.

For Vimeo cards, ensure the videos are available in the appropriate Vimeo library and obtain their Vimeo IDs.

3. Choose the Placement

Use the Card Carousel Wrapper preferably within:

• Boxed Layout
• Main Region

Give the carousel sufficient space for the media presentation.

4. Add the Card Carousel Wrapper

Locate the Card Carousel Wrapper Component in Page Designer.

Add it to the required location.

The Wrapper will act as the parent container for the individual carousel cards.

5. Configure the Optional Header

If the carousel requires an overall title or introduction, configure the Header.

The Header uses the legacy rich-text editor.

Leave it empty when the carousel does not require a Header.

6. Configure the Optional Subheader

If additional introductory information is required, configure the Subheader.

The Subheader also uses the legacy rich-text editor.

Leave it empty when no Subheader is required.

7. Add the First Card

Inside the Card Carousel Wrapper, add the appropriate card type:

• Card Carousel Image
• Card Carousel Video
• Card Carousel Vimeo

Choose the component according to the media source.

8. Configure an Image Card

When using Card Carousel Image:

1. Select the required Image.
2. Add optional Content if required.
3. Determine whether a Background overlay is required for readability.
4. Add an optional CTA if required.
5. Configure the CTA Text, Link and Style.
6. Click Apply.

9. Configure a Video Card

When using Card Carousel Video:

1. Enter the required Video URL.
2. The Video URL can come from any video source.
3. Add optional Content if required.
4. Enable Background overlay if the video does not provide sufficient contrast for the text.
5. Add an optional CTA if required.
6. Configure the CTA Text, Link and Style.
7. Click Apply.

10. Configure a Vimeo Card

When using Card Carousel Vimeo:

1. Obtain the Vimeo video URL.
2. Identify the numeric Vimeo ID.
3. Enter only the numeric value into Vimeo ID.
4. Add optional Content if required.
5. Enable Background overlay if additional contrast is required.
6. Add an optional CTA if required.
7. Configure the CTA Text, Link and Style.
8. Click Apply.

If a new Vimeo video is required, liaise with HQ so that it can first be uploaded to Teoxane's global Vimeo library.

11. Add Additional Cards

Continue adding cards to the Wrapper as required.

There is no card limit.

The carousel can combine:

Image + Image + Video + Vimeo + additional cards

or any other combination required by the content.

12. Review Text Readability

Review every card containing text.

If the media behind the text does not provide sufficient contrast, enable Background overlay on that card.

Assess readability individually because one card may require the overlay while another may not.

13. Review the CTA Configuration

For cards containing a CTA, confirm that:

• CTA Text is correct.
• Link points to the intended destination.
• Style is appropriate.
• Text remains readable against the underlying media.

Cards that do not require navigation can remain without a CTA.

14. Review the Complete Carousel

Before completing the page, confirm that:

• The Wrapper is preferably placed in Boxed Layout or Main Region.
• Optional Wrapper Header and Subheader are appropriate.
• Media uses the Instagram ratio.
• The appropriate card type has been selected for each media source.
• Video cards use Video URLs.
• Vimeo cards use Vimeo IDs.
• Card-level text is readable.
• Background overlays are enabled where necessary.
• CTAs are configured where required.
• All intended cards have been added.

15. Validate on Staging

Validate the completed carousel on the appropriate staging storefront.

Confirm that:

• The carousel displays correctly.
• Images and videos render correctly.
• The different card types work together as intended.
• Text remains readable.
• Background overlays provide sufficient contrast where enabled.
• CTAs display and point to the correct destinations.
• The carousel remains usable across the required screen sizes.

The key principle is:

Use the Card Carousel Wrapper to group an unlimited number of Instagram-ratio image and video cards into one carousel. Choose Card Carousel Video for a Video URL from any video source and Card Carousel Vimeo specifically for Vimeo IDs, then use optional card text, CTAs and Background overlays to create readable and purposeful individual slides.