Component Library

 

  • Components are listed in alphabetical order

  • IF an item has more than one component name listed, separated with a comma, the component is built with a wrapper component and/or has dependent sub-component(s)

  • When the item in the list is in italics, it might be a candiate for deprecation or it needs followup as noted

  1. Accordion, Accordion Wrapper

  2. After Hours Chat (not in use - won't render) DEPRECATE? - a Jira ticket is in backlog to review this component usage

  3. Attribution

  4. Banner- a Jira ticket is in backlog to review this component usage

  5. Bottom Section

  6. Branded Template Builder Entry (not used yet - there is a updated page that has not been published yet) there is an older version of this component @ page/url: /landing1/branded-template-builder - a Jira ticket is in backlog to review this component usage

  7. Breadcrumb, Breadcrumb Wrapper - a Jira ticket is in backlog to review this component usage

  8. Buy Flow, Buy Flow Plan - two Jira tickets are in backlog to review this component usage

  9. Buy Flow Progression Steps

  10. Card, Card Wrapper

  11. Carousel Slide, Carousel Wrapper

  12. Centered CTA- a Jira ticket is in backlog to review this component usage

  13. 0 Chat (none of the 3 instances render visually, DEPRECATE?) - a Jira ticket is in backlog to review this component usage. 

  14. Checkbox Text, Checkbox Text Wrapper

  15. Column Wrapper

  16. Conditional Component, Conditional Wrapper  - doesn't seem to work on this component library page, but maybe it's only going to work in production or S1??? - * link to usage documentation ? - what are the logic options if there is more than one (querystring, %, A, B, C?) - a Jira ticket is in backlog to review this component usage. 

  17. Confirmation Message

  18. Contact Information only renders in the Dynamic Feature Block - Dropdown Option component? - a Jira ticket is in backlog to review this component usage. 

  19. CTA Button, CTA Button Wrapper - a Jira ticket is in backlog to review this component usage. 

  20. 0 Dropdown With Image Option, Dropdown With Image Wrapper (not used yet - entries exist, not linked - DEPRECATE?) - a Jira ticket is in backlog to review this component usage

  21. Dynamic Feature Block - Dropdown, Dynamic Feature Block - Dropdown Option

  22. Dynamic Feature Block Tabs, Dynamic Feature Block Wrapper

  23. 0 Features Grid Currency Based Messaging (not used yet - entries exist, not linked) - DEPRECATE ? - a Jira ticket is in backlog to review this component usage

  24. Features Grid Pricing, Features Grid Wrapper

  25. Features Grid Rows, Features Grid Header, Features Grid Wrapper

  26. Features Grid Rows, Features Grid Header, Features Grid Wrapper

  27. Features Grid Selection

  28. Footer Wrapper - a Jira ticket is in backlog to review this component usage

  29. Form: Form Input, Form Input - Radio or Checkbox, Form Input - Single Radio or Checkbox, Form reCaptcha, Form Select, Form Text Content, Form Textarea, Password, Password Strength Meter

  30. Full Image Card with Overlay, Full Image Card Wrapper

  31. Full Image With Content

  32. Hero

  33. Hero (Short with rotating text) - a Jira ticket is in backlog to review this component usage

  34. Home Hero (international homepage - not in use - several test versions exist but none will render on a page - DEPRECATE?) - a Jira ticket is in backlog to review this component usage

  35. Home Hero Test (several test versions, one linked to home_old page - DEPRECATE?) - a Jira ticket is in backlog to review this component usage

  36. HTML

  37. Icon

  38. Image

  39. Link- a Jira ticket is in backlog to review this component usage, but it may not be a valid use case

  40. Link List - a Jira ticket is in backlog to review this component usage

  41. Logo, Logo Wrapper

  42. Media Block, Media Block Wrapper - a Jira ticket is in backlog to review this component usage with the CTA Button component

  43. Merch Tile (This component is a sub-component of Site Header Menu Wrapper. An example can be seen from any Site Header Menu Wrapper menu item that has a dropdown menu that has the Merch Tile option applied)

  44. Modal- a Jira ticket is in backlog to review this component usage

  45. MP4 (not fully implemented yet?) - no instances found in Contentful - a Jira ticket is in backlog to review this component usage

  46. One Column Text Block - With Image / One Column Text Block - No Image With CTA

  47. Page - this page is a Page component

  48. Partner Name, Partner Name Wrapper - (no visible example, not designed to be visible)  Usage Documentation: Dynamic Partner Landing Page

  49. Pill- a Jira ticket is in backlog to review this component usage

  50. Pose Provision Tags (no visible example, not designed to be visible) Provisioning Documentation: Account Provisioning

  51. Promotion Code and Discounts, Promotion Code and Discounts Wrapper (no visible example, not designed to be visible) Partner Documentation: Dynamic Partner Landing Page

  52. Redirects (no visible examples, not designed to be visible) Redirects Documentation: Creating Redirects (vanity) urls

  53. ROI Calculator

  54. Rotating Headline - a Jira ticket is in backlog to review this components' Parent component "Hero (Short with rotating text)"

  55. Section - two Jiras tickets are in backlog to review this component usage with Background Image option and Link Component

  56. SEO - (no visible example, not designed to be visible) - write brief description of it's function, add link here to usage documentation  - a Jira ticket is in backlog to review this component usage

  57. Site Header - multiple versions, click on top nav 'Site Header' menu for link to demo page of Site Header(s)

  58. Site Header Menu Wrapper (this component example is in the 2nd top nav menu item with dropdown icon named "Site Header Menu Wrapper". To view an example of this component: click on top nav 'Site Header Menu Wrapper' menu item to drop open the "menu") - a Jira ticket is in backlog to review this component usage

  59. Small Card Carousel Item, Small Card Carousel Wrapper - a Jira ticket is in backlog to review this component usage

  60. Social Demo - 4 parts: Interstitial, Platform Selection, Post Creation, Signup

  61. Standard Form, Standard Form Input

  62. Stat Card, Stat Card Wrapper

  63. Sub Feature, Sub Features Block

  64. Tab (generic), Tabs Wrapper (generic)

  65. TinyMCE Rich Text Block - two Jira tickets are in backlog to review this component usage

  66. Two-Step Signup Form- a Jira ticket is in backlog to review this component usage

  67. Video - a Jira ticket is in backlog to review this component for a play icon overlay render issue but it may not be a valid use case, however there is a bug with this component on this component-library page related to 'anchor link' that jumps to the Video section

 

Accordion, Accordion Wrapper

Accordion 1 - Content tiny mce

A check mark

component-library - Checkbox Text, no image selected, default is green checkmark

plus icon

component-library - Buy Flow - Plus - checkbox text

A check mark

component-library Buy Flow - Email - checkbox text

black dot image

component-library - Buy Flow - Core - checkbox text

pink checkmark

component-library - Buy Flow - Select - checkbox text

Accordion 2 Content tiny mce

Accordion 3 Content tiny mce

After Hours Chat

After Hours Chat doesn't render anything currently. This component needs to be deprecated

Attribution

Attribution - Content text with default background color. Text Highlight

Branded Template Builder Entry

Intro Text: Branded Template Builder

Headline: Meet your match.

Sub-Headline: Enter your website or Facebook URL below and we’ll make an email template to match your brand.

Hero - Breadcrumb - Intro Text. required

Hero - Breadcrumb - Headline, required

Breadcrumb component is a sub-component of the Hero component.

component-library-hero-image

Buy Flow, Buy Flow Plan

Buy Flow Progression Steps

Buy Flow Progression Steps are a sub component that are 'embedded' via the Contentful Rich Text Block

Buy Flow Progression Step 1:

  1. Create your account.
  2. Confirm your selection.
  3. Review and complete your order.

Buy Flow Progression Step 2:

  1. Create your account.
  2. Confirm your selection.
  3. Review and complete your order.

Buy Flow Progression Step 3:

  1. Create your account.
  2. Confirm your selection.
  3. Review and complete your order.

Card, Card Wrapper

Centered CTA

Centered CTA: Section Intro

Centered CTA: Headline

Chat

(this component not available to render)

 

Chat is implemented as a sub-component of the Page component

Checkbox Text, Checkbox Wrapper

A check mark

component-library - Checkbox Text, no image selected, default is green checkmark

plus icon

component-library - Buy Flow - Plus - checkbox text

A check mark

component-library Buy Flow - Email - checkbox text

black dot image

component-library - Buy Flow - Core - checkbox text

pink checkmark

component-library - Buy Flow - Select - checkbox text

Column Wrapper

Column Wrapper: Intro Text

Online marketing simplified - what you need to know.

Online marketing presents opportunities to build your brand, get more leads, and ultimately close more deals, but with so many tools it can be hard to know what's worth your time and how to use the tools.

That’s why we’ve created The Download for Real Estate, a free guide to help you have a growing and connected client base.

Outline w/Download Icon

Prefer videos? Watch our free on-demand webinar.

Guidance -  real estate - we've got your back

Conditional Component, Conditional Wrapper

(Condition = Hide success stories on mobile (this might mean that this component should only render for Desktop and Tablet)? And the option for the conditional is set to be based on "Cookie")

Not sure what type of "Detection" is availble to set the Cookie to meet and render the  Conditional based on "Desktop" or "Tablet". It seems like the capability to "Detect" a Desktop or Tablet is not working or maybe it's not available yet?

Confirmation Message

Form Inputs: Form Text Content

Form: Text After CTA: * All Form components must have at least one field to be valid or the build will break. The Form Inputs: Form Text Content above meets this requirement.

Contact Information

One Column Text Block: Contact Information - Intro Text, centered

One Column Text Block: Contact Information - Headline

CTA Button, CTA Button Wrapper

blue w white strokewhite w blue strokebluewhiteorangeoutlinetransparent

 

 

CTA Buttons with Icons

 

 

Outline w/Download IconOutline w/Right CaretOutline w/Play IconOutline w/Cart IconCTA Button

no risk. no credit cards required

 

 

CTA Button Wrapper with CTA Button as Image

(CTA Button Wrapper used with CTA Button adds padding around the buttons)

 

 

blue w white strokewhite w blue strokebluewhiteorangeoutlinetransparent

 

 

CTA Buttons with Icons

 

 

Outline w/Download IconOutline w/Right CaretOutline w/Play IconOutline w/Cart IconCTA Button

no risk. no credit cards required

 

 

CTA Button Wrapper with CTA Button as Image

(CTA Button Wrapper used with CTA Button adds padding around the buttons)

 

 

blue w white strokewhite w blue strokebluewhiteorangeoutlinetransparent

 

 

CTA Buttons with Icons

 

 

Outline w/Download IconOutline w/Right CaretOutline w/Play IconOutline w/Cart IconCTA Button

no risk. no credit cards required

 

 

CTA Button Wrapper with CTA Button as Image

(CTA Button Wrapper used with CTA Button adds padding around the buttons)

 

 

This component will not render. It's either incomplete or is no longer in use and needs to be DEPRECATED

 

Dynamic Feature Block - Dropdown/Dropdown Option

Dynamic Feature Block Tabs, Dynamic Feature Block Wrapper

tab1-image
woman looking at computer
Teenager paints with paintbrush at Artists for Humanity.
man and child
Get the best online marketing product with Constant Contact.
yard work

This is the FIRST tab content.

Click me!

Features Grid Header, Features Grid Rows, Features Grid Wrapper

Customer List Growth tools
 
 

Google ads integrated

Our streamlined experience automates ad setup and management so you get the most clicks for the lowest cost.

Gift card incentives integrated

Get more signups by offering a $30 gift card, which can be used at over 9,000 businesses, at no cost to you, and can be automatically accessed via a landing page or by email.

Text message sign-up

Make it easy for people to join your email list by sending a text message from their mobile device.

Facebook ads integrated

Drive new business fast with our streamlined experience that displays ads in your target customer’s Facebook feeds.

Website Sign-Up Forms

Turn your website visitors into leads by displaying a customizable form that offers an incentive to sign up like email promotions, a checklist, or a free consultation.

Lead generation landing pages

Create a custom webpage dedicated to capturing new leads and share it via social, ads, and more.

Email Marketing Features
 
 

Professionally designed, mobile-friendly templates

Choose from hundreds of customizable templates or create your own.

+300
+40

Drag and drop email editor

Create beautifully branded emails fast with drag-and-drop editing.

Check for errors

Send with confidence using a built-in email review for common mistakes like template placeholder text or missing links.

Subject line recommendations

Gain ideas and increase your open rate by using our built-in recommendations based on your email content, industry and our expertise of what works.

Automated Email Marketing
 
 

Automated Resend to Non-Openers

Increase open rates by choosing a timeframe to automatically resend an email to contacts who didn’t yet open. 

Abandoned Cart Reminder

Boost sales by re-engaging customers who didn't complete a purchase.

Welcome new contacts

Nurture new contacts instantly with automated welcome emails.

Birthday & Anniversary greetings

Strengthen your relationships by automatically wishing your subscribers a happy birthday and/or anniversary.

Contact Management
 
 

Add, store, and organize contacts

Easily add, search and organize contacts;  duplicates and unsubscribes are automatically managed.

Reporting
 
 

Track results in real-time & optimize

Easily know what’s working - see everything from email views, clicks, engagement with your social posts, surveys and more in every plan.

Customer Support
 
 

Live phone support

An award-winning live customer support team is readily available to help all customers in all plans.

Only available starting at $65/mo

Live chat support

Chat with a real person and quickly get the expert advice you need.

Personalized new customer kickoff call

Guidance from a marketing expert to help you get results faster.

Additional Features
 
 

Create and post to Facebook, Instagram, and/or LinkedIn at once

Our easy-to-use dashboard will automatically optimize the content and images for each platform.

Marketing calendar

Stay organized and efficient with all your marketing activities mapped in one view.

Polls

Get instant feedback from your contacts so you know more about who they are and what they want and increase engagement.

Event management

Promote your event, collect registrations 24/7, sell items, and track details—quickly and easily.

Event RSVP

Get a headcount for an event with an RSVP block.

Features Grid Pricing, Features Grid Wrapper

Plan

Core

Best for people getting started with marketing to their customer base.

$12/month

Price based on number of contacts*

View tiered pricing Core Includes:

Blue Checkmark

Basic email marketing

Blue Checkmark

Social marketing

black dot image

Post to Facebook, Instagram and Twitter all at once

black dot image

Integrations with popular tools like Shopify, WooCommerce, Canva and Etsy

black dot image

Engagement reporting (i.e. views, clicks, etc)

black dot image

Award-winning live chat and phone support

Recommended

Plus

Best for marketers who need enhanced features to fuel more growth.

Starting at

$35/month

Price based on number of contacts*

View tiered pricing Everything in Core, plus:

pink checkmark

List-growth tools including Google ads

Blue Checkmark

Contact segmentation

pink checkmark

Automated communications (e.g. resend to non-openers)

pink checkmark

In-depth reporting including conversion and sales

pink checkmark

Drag and drop products from your online store

pink checkmark

Auto-generated customer segments for targeting

pink checkmark

Personalized consultation to maximize your capabilities

*Plan price is based on number of contacts and email sends. Overage fees may apply. Note that you agree to the Terms & Conditions, and Mail Terms of Service and acknowledge receipt of our Privacy Notice.

*Plan price is based on number of contacts and email sends. Overage fees may apply. Note that you agree to the Terms & Conditions, and Mail Terms of Service and acknowledge receipt of our Privacy Notice.

Features Grid Selection

Features Grid Selection -> This component can be activated/added to the "Available Selections" field in the Features Grid Rows component.

Example use case: this component is used to indicate whether a feature is "Included" (renders a check) or "Not included" (renders a dash) when comparing Constant Contact to Sendinblue

Form

Full Image Card with Overlay, Full Image Card Wrapper

Headline

man and a woman tending to an outside garden

Card Small Text

Card Large Text

CTA Button

no risk. no credit cards required

Accountant working on laptop

Accounting & Payroll

No CTA

Full Image With Content

Let’s get to work.

And if you’re looking to step up your game, check out our all-in-one digital marketing platform.

Hero

Intro Text: Text above Headline

Headline: Turn visitors into customers with targeted landing pages.

Reach new audiences and grow your online sales all in one place.

GO HERE

And I want to have a link right here. And then this one should be to open a PDF in a new window and go here in a new window.

happy CTCT customer with donuts Alt Text (required)

Hero (Short with rotating text)

HTML

Icon

Headline: The Icon component is a sub-component of Media Blocks, Media Block Wrapper component

Icon location-waltham FF5BA0 Pink 48x48

Waltham

Headquarters 890 Winter Street, Suite 300 Waltham, MA 02451 United States

Icon location-boston 1856ED Blue 48x48

Boston

40 Water Street Boston, MA 02109 United States

Icon location-loveland 00A1FF Cyan 48x48

Loveland

3675 Precision Drive Loveland, CO 80538 United States

Icon location-gainesville 00ADA4 Green 48x48

Gainesville

5001 Celebration Pointe Avenue Suite 410 Gainesville, FL 32608 United States

Icon location-losangeles FF502C Orange 48x48

Los Angeles

11845 W Olympic Blvd Suite 1100 W  Los Angeles, CA 90064 United States

Icon location-waterloo FF5BA0 Pink 48x48

Waterloo

151 Charles Street West Suite 100 Kitchener, Ontario N2G 1H6 Canada

Icon location-brisbane 1856ED Blue 48x48

Brisbane

Level 6, 230 Brunswick Street Fortitude Valley, Queensland Australia

Image

image

Click on Site Header Menu Wrapper in the Site Header to see the Link List component example.

The Link List is a sub-component used with the Site Header Menu Wrapper component.

Logo Intro Text

Logo Headline: Add more impact to your email marketing.

Logo Paragraph Text: Unleash the power of your business—and drive more revenue—by integrating Constant Contact with the tools you’re already using.

Media Block, Media Block Wrapper

Media Block Wrapper - Intro Text

Media Block Wrapper - Headline

Media Block Wrapper - Paragraph Text: Lorem ipsum dolor sit amet?

Media Block: Headline

Media Block - Content: rich text *

Media Block - CTA Button

One Column Text Block - With Image

One Column Text Block With Image: Intro Text

One Column Text Block With Image: Headline

One Column Text Block - No Image With CTA

One Column Text Block No Image With CTA: Intro Text

One Column Text Block No Image With CTA: Headline - Heading Size 1

Pill

Link text with pill

Pill doesn't seem to work when it's added to Link component that is added to a Section component. If I can add a Link to a Section and add a Pill to a Link, shouldn't it render?

However, pill is working if it's inside a Site Header Menu Wrapper or Card Component.

ROI Calculator

Section Intro: Customer Success Team

Headline: You’ve got this. You’ve got us.

Sub Content: Whether you’re an emerging brand just starting to sell online or you’re an ecommerce expert, we can set you up with Ecommerce Pro quickly to start selling more in less time.

Or call 1-877-540-1758

Rotating Headline

The Rotating Headline component is a sub-component of the Hero (short with rotating text) component.

Section with Background Color

 

Section component is one type of general purpose component that is used to add almost all components to a page.

This text is rendered by adding a TinyMCE Rich Text Block component to a Section component.

Standard Form, Standard Form Input

Stat Card, Stat Card Wrapper

300%

Targeting your pages correctly can increase conversion rates up to 300%.*

48%

48% of marketers build a different landing page for each new campaign.*

100%

100% of the time it's best to use a total of 4 stat cards for even distribution on the page

47%

47% of something results reported here

Note: *designadvisor.net

Sub Feature, Sub Features Block

Tab (generic), Tabs Wrapper (generic)

image

TinyMCE Rich Text Block







Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Preformatted

 

Paragraph text ... Italic text ...  Link text ...  lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Faucibus scelerisque eleifend donec pretium vulputate sapien. Adipiscing elit pellentesque habitant morbi tristique senectus et. Convallis a cras semper auctor neque vitae tempus quam. Adipiscing tristique risus nec feugiat in fermentum.


Bold paragraph text ... mauris sit amet massa vitae tortor condimentum lacinia quis vel. Ipsum suspendisse ultrices gravida dictum fusce ut. Nisl pretium fusce id velit ut. Tempus iaculis urna id volutpat lacus laoreet. 

Bold Link 1 ... Commodo elit
Bold Link 2 ... Habitant morbi tristique
Bold Link 3 ... Pellentesque diam volutpat


Vitae auctor eu augue ut lectus arcu. Dictum non consectetur a erat nam at lectus urna. Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque:

  1. Ordered list item example ...
  2. Ordered list item example ...
  3. Ordered list item example ...
  4. Ordered list item example ...
  5. Ordered list item example ...
  6. Ordered list item example ...
  7. Ordered list item example ...

Semper eget duis at tellus at urna. In hac habitasse platea dictumst quisque sagittis. Sit amet consectetur adipiscing elit pellentesque habitant morbi tristique:

  • Unordered list item example ...
  • Unordered list item example ...
  • Unordered list item example ...
  • Unordered list item example ...
  • Unordered list item example ...
  • Unordered list item example ...
  • Unordered list item example ...

 

Back to Top of TinyMCE Rich Text Block

Section Intro

Headline: Get digital marketing results.

Video

Email automation made easy.
Welcome

US Version

Switch location to see it in action

hero Iframe

Hero with Video

Hero Video SubHeading

earth-webm

2 column block with video text

earth-webm
a template

There’s more...

Blue Checkmark

Earn Constant Contact Certification

010 Icon collect-online-payments 1856ED Blue 48x48

Email Marketing: Drive traffic and sales by creating, sending, and tracking campaigns.