Components Library

This library of pre-built reusable components, aka ‘blocks’, is built to be a guide for builders and designers. Our hope is that it can be a source of truth for you as you become familiar with each component and its functionality. We will continue to add any new components to this page, so keep an eye out for updates. You can use this page as a reference library and easily copy and paste components from this page to one of our static templates. 

a. Hero Sections
b. Content
c. Content + Video
d. Icon Cards
e. Image Cards
f. 2 & 3 Column Grids
g. Feature Cards
h. Statistics
i. Logos
j. Call to Actions
k. Contact Us
l. Testimonials
m. Spacers
n. Nav + Footer
a. Hero Sections
Use at the top of a page to introduce a brand, solution, or campaign with strong visuals.
Hero: Full-width background image
Use for simple pages with short titles. For your image, use something with high resolution and avoid busy patterns.

About Us

Hero: Section with Video or Image
Best for Partner, Services and Solution pages to highlight a tagline and/or clear call to action early. Breadcrumbs and button are optional. You can choose between image and video for the graphic feature.  
TTEC Digital
/
partners

CX Cloud Hyperscalers

Unlock the full potential of leading hyperscalers with TTEC Digital.

Contact us
No items found.
b. Content
Flexible blocks for headings, body copy, and supporting text throughout your page.
Headline + Text - 2 Column
Balanced headline + supporting column for detail. Good for side-by-side comparisons, like on Solution pages.

Why work at TTEC Digital?

Two Column Rich Text‍

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Two Column Rich Text‍

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Headline + Text - Center
Center headings, rich text and button. Each piece (header, text, button) can be shown or hidden for greater flexibility.

Header options H1, H2, H3

Heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Button Text
Headline + Text - Left
Left-aligned headings, rich text and button. Each piece (header, text, button) can be shown or hidden for greater flexibility.

Why work at TTEC Digital?

Header 2

With over 40 years of experience as an industry leader and partnerships that span the world’s top technology providers, TTEC Digital is uniquely suited to address your toughest customer experience challenges. Our experts will provide actionable insights and recommendations at every step while our proven methodology will help you optimize your contact center operations, improve customer satisfaction, and drive business success.

Bold text over bullets

  • Bullet 1
  • Bullet 2
  • Bullet 3
    • Sub bullet 1
    • Sub bullet 2
    • Sub bullet

Text under bullets

Button Text
Headline Only / No Padding
If you only need a headline with no button or text, it's best to use this component to reduce unnecessary gaps between this title and what it's introducing below it. Choose from H1, H2, H3 either left or center aligned.

Why work at TTEC Digital?

Single Image - Full and half-width
For showcasing a static image (SVG, PNG, JPG, etc.) at either full- or half-width.  
Text + Image (50% or 33%)
Side-by-side text and image with the option to flip where and how large the image appears. Eyebrow text, headline, paragraph text and button are all optional with use of the visible and hidden toggles.  
A smiling female contact center agent looking at her computer.
Cutting Edge Innnovation

Comprehensive solutions for every CX challenge

Explore our tailored solutions, from omnichannel engagement to AI-powered analytics, designed to meet the unique needs of your business and industry.

Explore our solution library
A smiling female contact center agent looking at her computer.
c. Content + Video
Showcase videos in a variety of ways throughout the page.
Text + Video
Side-by-side text and video with the option to flip which side the video appears on. Eyebrow text, headline, paragraph text and button are all optional with use of the visible and hidden toggles.  
Tagline

Comprehensive solutions for every CX challenge

Explore our tailored solutions, from omnichannel engagement to AI-powered analytics, designed to meet the unique needs of your business and industry.

Leran more
Text + Video (Stacked)
Stacked text and video with the option to flip which side the video appears on. Eyebrow text, headline, paragraph text and button are all optional with use of the visible and hidden toggles.  

Short heading goes here

Morbi sed imperdiet in ipsum, adipiscing elit dui lectus. Tellus id scelerisque est ultricies ultricies. Duis est sit sed leo nisl, blandit elit sagittis. Quisque tristique consequat quam sed. Nisl at scelerisque amet nulla purus habitasse.

Nunc sed faucibus bibendum feugiat sed interdum. Ipsum egestas condimentum mi massa. In tincidunt pharetra consectetur sed duis facilisis metus. Etiam egestas in nec sed et. Quis lobortis at sit dictum eget nibh tortor commodo cursus.

Odio felis sagittis, morbi feugiat tortor vitae feugiat fusce aliquet. Nam elementum urna nisi aliquet erat dolor enim. Ornare id morbi eget ipsum. Aliquam senectus neque ut id eget consectetur dictum. Donec posuere pharetra odio consequat scelerisque et, nunc tortor. Nulla adipiscing erat a erat. Condimentum lorem posuere gravida enim posuere cursus diam.

d. Icon Cards
Ideal for highlighting benefits or capabilities in a scannable way.
Icon Card + Headline + Text
Choose between two or three-across icons, with a slot to add more rows.  Opt in or out of showing the heading, description text, individual paragraph text and links with visible and hidden toggles.

Overview heading

Text description of solution.

Solution benefit 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Optional link

Solution benefit 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Optional link

Solution benefit 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Optional link

Solution benefit

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Optional link

Solution Benefit

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Optional link

Solution Benefit

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Optional link
e. Image Cards
Incorporate larger clickable images to lead users deeper into content.
'Base / Text + Image Cards' with an 'Inner / Text+Image Cards' in the lower slot
Use for collections of resources, case studies, or offerings. Can select from two, three, or four images per row, with a slot to add additional rows. Optional headline, rich text description, and links for each card. Recommended image ratio: 16:9 for consistency.

Header Here

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Learn more

Header Here

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Learn more

Header Here

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Learn more

Header Here

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Learn more

Header Here

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Learn more

Header Here

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Learn more
f. 2 & 3 Column Grids
Section layouts are used when custom 2 and 3-column sections are needed, for example...

When first placed inside a "page slot," this component will be empty with columns highlighted as dotted lines representing individual "slots". Slots are placeholders within a component that allow other components or elements to be inserted.

When using this component, it's important to keep in mind how many columns you want shown in the section. This component has two built-in variants: 2 columns and 3 columns. When using the "2 col" variant, please ensure that the "3rd Card Visibility" is set to "Hidden" in the properties panel.
2 & 3 Column Section Grid with a '2 & 3 Column Section_Inner'
This is an example of a '3 col variant' section grid with a . Components that can be used inside the section grids include:
2 & 3 Column Section Grid with a '2 & 3 Column Section_Inner'
This is an example of a '2 col variant' section grid with a . Components that can be used inside the section grids include:
h. Statistics
Showcase metrics, impact numbers, or milestones. Best for calling attention to credibility, proof points, and summarizing results.
Stat section 1 col
Designed to highlight a single number. Choose between white or gray background. Toggle the visibility of the headline and description subtext depending on your needs.

Over the last 40 years, our global team has helped hundreds of clients deepen their customer relationships.

We bring technology expertise and proven CX strategy together to help companies build deeper connections with their customers.

1,000+

clients served

Stat section 2 col
Feature two numbers side-by-side. Choose between white or gray background. Toggle the visibility of the headline and description subtext depending on your needs.

Our global footprint in numbers

We bring technology expertise and proven CX strategy together to help companies build deeper connections with their customers.

700+

managed services clients operating on the leading contact center platforms

300k

agents supported by our contact center managed services team

Stat section 3 column
Feature three numbers side-by-side. Choose between white or gray background. Toggle the visibility of the headline and description subtext depending on your needs.

Our global footprint in numbers

We bring technology expertise and proven CX strategy together to help companies build deeper connections with their customers.

88

TTEC offices across 21 countries

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

1,500+

global employees

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

32+

languages supported by our CX services

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Stats section 4 col
Feature four numbers side-by-side. Choose between white or gray background. Toggle the visibility of the headline and description subtext depending on your needs.

Our global footprint in numbers

We bring technology expertise and proven CX strategy together to help companies build deeper connections with their customers.

88

TTEC offices across 21 countries

1,500+

TTEC offices across 21 countries

32+

languages supported by our CX services

32+

languages supported by our CX services

i. Logos
Display partner, client, or tech ecosystem logos in a grid. Ideal for social proof or credibility sections.
'Base / Logo Section Grid'
If you want to add logos to a page, you must add this grid first and then fill it in with as many 'Inner / Logo Cards' components as you need (one per each logo). Choose between center and left alignment with this base grid.
'Inner / Logo Cards'
Add this component to the 'Base / Logo Section Grid' and select the logos from the asset library you want to display. Option to link each logo to a page, external website, contact information or asset.
AWS logo with black lowercase letters and an orange curved arrow underneath.
Genesys company logo with bold black text and three orange geometric shapes stacked to the left.
Microsoft logo with four colored squares and text.
NiCE logo
Zendesk logo
j. Call to Actions
Encourage the next step with focused layouts. Always pair with a strong, action-driven headline.
CTA - Newsletter Subscription
Use this pre-built CTA to drive users to sign-up for our CX Express newsletter with just their email address.

Join our mailing list to receive exclusive updates on the latest CX trends, events, and solutions.

CTA - Standard
This CTA is ideal for major conversion points. Strong headline, one short supporting sentence, single primary CTA button. Rounded edges make this CTA ideal for use within content.

Ready to join the ranks of CX leaders in your industry?

TTEC Digital helps deliver frictionless experiences that drive loyalty, retention, and sales for your business, and unforgettable moments for your customers, no matter what industry you’re in.

Get in touch
CTA - Image Left + CTA
This CTA is ideal for bottom-of-page conversions where visual storytelling is required. This component uses a 50/50 split to balance brand imagery with a high-contrast headline and primary button.

Ready to join the ranks of CX leaders in your industry?

TTEC Digital helps deliver frictionless experiences that drive loyalty, retention, and sales for your business, and unforgettable moments for your customers, no matter what industry you’re in.

Get in touch
k. Contact Us
Place near the end of journeys or on dedicated contact pages to drive engagement.
Contact Form
Must use Marketo form CMS collection to populate this component. Optional headline and description text.

Send us a message

Schedule a complimentary 30-minute discovery session to determine how ...

‍

l. Testimonials
Customer or partner quotes to highlight and validate expertise.
Logo Image + Testimonial
Use short quotes (20–40 words) with correct attribution (name, title, org). This component is featured on the home page.

“The TTEC Digital team was amazing! We thoroughly appreciated working with Paul, Peter, and others on a technical level and that gave us the confidence that we would be able to transition to cloud. The transition to Genesys Cloud project has gone extremely smoothly. This is how all projects should be managed.”

Steve Liu, IT Director, SELCO Credit Union
Read the case study
m. Spacers
Use to control vertical rhythm. Don’t stack multiple spacers; pick the closest size needed.
Divider section
Add this divider to create breaks and add clarity between sections.
Spacer (1 REM)
Smallest spacer. 1 REM = our default font size.
Spacer (2 REM)
Second-largest spacer.
Spacer (3 REM)
Third-largest spacer.
Spacer (4 REM)
Fourth-largest spacer.
Spacer (5 REM)
Largest spacer. 5 REM = 5x our default font size.