This procedure is intended for Page Designer administrators who need to introduce an important section, message or subject using a visually distinctive text component with optional CTAs and built-in Teoxane branding.

The Intro Component should not be treated as a replacement for a regular Textbox or Textbox Plus.

Its visual treatment gives the content additional importance and should therefore be used deliberately.

Component Objective

The Intro Component is a text-focused component designed to introduce content of particular importance.

It combines:

• An optional Heading
• Required Content
• Up to two optional CTAs
• A built-in vertical line and Teoxane drop logo beneath the text

The branding element is part of the component's design and is not optional.

This gives the Intro Component greater visual weight than a conventional text component.

Think of it as a way of communicating:

"This is a key idea or an important subject."

rather than simply:

"This is another block of text."

Content Type

The Intro Component is primarily a text component with optional navigation and a built-in branded visual treatment.

Its structure contains:

Heading

An optional Heading using the legacy rich-text editing experience.

Content

Required textual content, also using the legacy rich-text editor.

First Button

An optional first CTA containing:

• Text
• Link
• Style

Second Button

An optional second CTA containing:

• Text
• Link
• Style

Built-In Branding

The component automatically includes:

• A vertical line
• A Teoxane drop logo

This branded element always displays as part of the component.

Built-In Teoxane Branding

One of the defining characteristics of the Intro Component is its built-in branding treatment.

Underneath the text, the component displays a vertical line followed by the Teoxane drop logo.

This element cannot be removed or disabled.

Administrators should therefore select the Intro Component knowing that this visual treatment will always be part of the final presentation.

This is also one of the reasons why the component carries more visual importance than a standard text block.

Legacy Text Formatting

Both the Heading and Content use the legacy text-editing approach.

The same general formatting limitations documented for the original Textbox Component therefore apply.

Administrators should not expect the enhanced level of control available in Textbox Plus.

In particular, Intro should not be selected because an administrator simply needs advanced text formatting.

Its value comes from its overall composition, including its CTAs and branded visual treatment.

Optional CTAs

The Intro Component supports up to two CTAs.

It can therefore be configured with:

• No CTA
• One CTA
• Two CTAs

Each CTA follows the standard Page Designer CTA configuration.

The availability of one or two CTAs is one of the capabilities that distinguishes Intro from a simple text component.

Use the CTAs when the important message being introduced should also direct visitors toward one or two relevant destinations.

Placement and Compatibility

The Intro Component is flexible in terms of where it can appear.

Despite its name, Intro does not have to appear at the beginning of a page.

It can be positioned wherever the page needs to introduce a significant subject or important section.

The decision should therefore be based on the importance of the content, rather than simply its position on the page.

For example, a long page may introduce a major new chapter halfway through the experience. An Intro Component can be appropriate at that point even though it is not the introduction to the overall page.

When to Use the Intro Component

Use Intro when the content needs to introduce something significant.

The component should communicate that the visitor is entering an important subject, message or section.

Good candidates are therefore content moments with sufficient importance to justify:

• A dedicated Heading
• Supporting Content
• Optional CTA(s)
• The permanent vertical line and Teoxane drop logo
• Greater visual prominence than standard body copy

When Not to Use the Intro Component

Do not use Intro simply because text needs to be added to the page.

For standard copy, use an appropriate text component.

Do not use Intro repeatedly for minor ideas or routine supporting information.

The component's visual weight should correspond to the importance of the content it introduces.

Frequency of Use

The Intro Component should be used sparingly.

As a general recommendation:

One Intro Component per page is usually sufficient.

A particularly large page may justify additional Intro Components when it contains several genuinely significant sections.

However, repeated use should be approached carefully.

The principle is comparable to the restraint applied to a major heading such as an H1: if a high-impact treatment is repeated continuously, it loses the importance it is intended to communicate.

The Intro Component has gravitas within the page hierarchy.

Preserve that impact by reserving it for important moments.

Versatility

The Intro Component is flexible in terms of placement but intentionally less flexible in terms of its visual identity.

It can introduce different types of important content and can appear at different points on a page.

However, the built-in branded treatment always remains.

This makes Intro more specialized than Textbox or Textbox Plus.

Pairing With Other Components

The Intro Component can work as the introduction to a larger group of components.

For example, it can establish the subject before the page continues with supporting visual, textual or interactive content.

Because Intro already provides:

• Heading
• Content
• Optional CTAs
• Built-in branding

it does not require another component simply to complete its own message.

Its role within a larger composition is to signal the beginning of something important.

Do Not Treat Intro as a Regular Text Component

Intro has greater visual weight than Textbox or Textbox Plus.

Do not use it for routine paragraphs or minor supporting information.

Use the Component Sparingly

As a general recommendation, aim for approximately one Intro Component per page.

Additional Intro Components may be appropriate on very large pages containing multiple significant sections, but they should remain deliberate.

The Teoxane Branding Element Is Mandatory

The vertical line and Teoxane drop logo are built into the component.

They always display and cannot be made optional.

Do not select Intro if this visual treatment is not appropriate for the intended content.

Intro Does Not Have to Be at the Beginning of the Page

Do not interpret the component name as a placement restriction.

Intro can appear later on the page when it introduces a major new subject or section.

Content Is Required

The Content field is mandatory.

The Heading and CTAs do not replace the need for the main Content.

CTAs Are Optional

The component can contain:

• No CTA
• One CTA
• Two CTAs

Only add CTAs when navigation is relevant to the message.

Text Uses Legacy Formatting

The Heading and Content fields follow the legacy text-editing approach.

Do not expect the advanced formatting freedom of Textbox Plus.

If the primary requirement is granular control over text formatting rather than the Intro Component's branded design and CTA capabilities, consider using Textbox Plus instead.

1. Determine Whether the Content Is Important Enough for Intro

Before adding the component, determine whether the content genuinely represents an important introduction or transition.

Ask:

Is this introducing a key idea, major subject or significant section?

If yes, Intro may be appropriate.

If the requirement is simply to add standard text, use a regular text component instead.

2. Consider Existing Intro Components on the Page

Review the page before adding another Intro Component.

As a general recommendation, use approximately one Intro per page.

If the page already contains an Intro, only add another when the page is sufficiently large and the new component introduces another genuinely significant section.

3. Choose the Placement

Determine where the important content should be introduced.

The Intro Component does not need to appear at the beginning of the page.

Place it where its visual importance makes sense within the overall page structure.

4. Add the Intro Component

Locate Intro in the Page Designer component list.

Drag and drop it into the required location.

Open the component configuration.

5. Configure the Heading if Required

Locate the Heading field.

Enter a heading when the section requires one.

The Heading uses the legacy rich-text editor.

Format it using the available legacy controls.

Remember that Textbox Plus provides greater formatting freedom if granular text control is the primary requirement.

6. Configure the Required Content

Locate the required Content field.

Enter the main introductory copy.

The content should support the important subject or section being introduced.

Use the available legacy rich-text formatting controls where required.

7. Remember the Built-In Branding

When preparing the content, remember that the final component automatically includes the vertical line and Teoxane drop logo underneath the text.

This element is part of the component design and cannot be removed.

Take this additional visual weight into consideration when reviewing the page composition.

8. Decide Whether a CTA Is Required

Determine whether the Intro needs to direct visitors toward another destination.

If no navigation is required, the component can be used without a CTA.

If navigation is required, configure the First Button.

9. Configure the First Button if Required

Under First Button, configure:

• Text
• Link
• Style

Use the CTA when it provides a meaningful next action related to the content being introduced.

10. Decide Whether a Second CTA Is Required

If the Intro needs to offer a second relevant destination or action, configure the Second Button.

Otherwise, leave it unused.

11. Configure the Second Button if Required

Under Second Button, configure:

• Text
• Link
• Style

The Intro can therefore contain zero, one or two CTAs according to the content requirement.

12. Review the Complete Intro

Before saving, confirm that:

• The content is important enough to justify the Intro treatment.
• The component is positioned appropriately within the page.
• The required Content has been completed.
• The Heading is appropriate where used.
• Legacy text formatting is sufficient for the requirement.
• The permanent vertical line and Teoxane drop logo are appropriate for the intended presentation.
• The correct number of CTAs has been configured.
• CTA text, links and styles are correct where used.
• The page is not becoming overloaded with repeated Intro Components.

13. Click Apply

Once the configuration is complete, click Apply to save the Intro Component.

14. Validate the Intro on Staging

Validate the completed page on the appropriate staging storefront.

Confirm that:

• The Heading displays correctly where used.
• The required Content displays correctly.
• The legacy text formatting renders as expected.
• The vertical line displays correctly.
• The Teoxane drop logo displays correctly.
• The branded treatment has the intended visual impact.
• The first CTA displays and works correctly where used.
• The second CTA displays and works correctly where used.
• The component fits naturally within the surrounding page composition.
• The Intro retains sufficient prominence and is not diluted by excessive repetition elsewhere on the page.
• The component remains effective across the required responsive views.

The key principle is:

Intro is not simply another text block. Use it to introduce something important, and use it sparingly so that its visual gravitas remains meaningful.