AEM Master Component Library 

Hero components 

1. Hero - Full Width Image and Description Gen2 - V1 - used on almost all product pages
2. Label Masthead Hero - older component, used on non-indexed pages
3. Text Hero - used when we want to feature CTAs above the fold as much as possible
4. Hero Full Width Image and Description Gen3 - V1 - New  
5. Hero Half Width Image Gen3 - V1 - New
6. Hero Full Width Side by Side Gen 3 - V1 - New
7. Text Hero Gen3 - V1 - New

 

Navigational Components 

1. Section Navigation Gen2 - V1 - used on higher-level pages to help with navigating deeper into the site
2. Interior Navigation Gen2 - used on product category and product detail pages to jump to various sections of that individual page
3. Secondary navigation (V1) and Product Login Modal
4. Interior Nav Gen3 - V1 - New
5. Secondary Nav Gen3 - V1 - New

 

Form components

1. Centered CTA Form - used on product pages
2. Two-Column CTA Form - used on resource pages with a 2-column layout
3. Contact Forms Gen2 - only on Payroll Canada referral pages that are not indexed, not on the US version of deluxe.com
4. Contact forms gen2 - 2 form - not production-ready yet 
5. Email Form Core - only used on Check Programs page
6. DOB Form - not on any live pages at the moment, was used for our Payroll product allowing prospects the ability to purchase a product directly from deluxe.com without having to talk to sales, e-commerce-like experience 
7. Form Text - individual area of a form within the DOB form component
8. Form Options (V2) - individual area of a form within the DOB form component
9. Form Button (V2) - individual area of a form within the DOB form component
10. Contact Form Gen3 - V1 - New
11. Contact Form Gen3 - V2 - New
12. Contact Form Gen3 - V3 - New

 

CTA components 

1. Post CTA - full page width CTA button
2. Three Column with CTA 
3. Blog in-article CTA - only used in blog posts at the moment
4. Account Log-In - lives on this page - https://www.deluxe.com/about/sign-in/ 
5. Post CTA Gen3 - V1 - New

 

Text-only components

1. Content Blocks - used on our current product detail template. Example on live page - https://www.deluxe.com/payments/receivables-management/cash-application/ 
2. Expanding Product Details - used on product landing pages.  Example on live page: https://www.deluxe.com/business-operations/bankers-dashboard/
3. Post Body Text - example on live page: https://www.deluxe.com/about/events/forrester-cx-north-america/ 
4. Feature Tiles - used on the very bottom of the homepage 
5. Feature Tiles Gen2 - V1 - not currently used on a live page
6. Featured Comparison Chart - compares different versions of a product. Example on live page: https://www.deluxe.com/payments/remote-deposit/mobile/
7. Product Details Gen3 - V1 - New

 

Components that support text and icons 

1. Features and Benefits with Cards - used on most product detail pages
2. Statistics - not sure if we use this on any live pages at the moment
3. Flash Cards Variation 1 Gen3 - V1 - New
4. Flash Cards Variation 2 Gen3 - V1 - New
5. Statistics Slide Gen3 - V1 - New, used on home page
6. Solutions Slide Gen3 - V1 - New, used on home page
7. Features and Benefits with Text Block Gen3 - V1 - New

 

Components that support images (no video)

1. Product Suite - example used on live page: https://www.deluxe.com/business-operations/hr/pricing/
2. Product Listing - example used on live page: https://www.deluxe.com/business-operations/enterprise-content-management-system/
3. Recommended Products - example used on live page: https://www.deluxe.com/business-operations/enterprise-content-management-system/
4. Business Checklist - example used on live page: https://www.deluxe.com/about/the-new-deluxe/
5. Testimonial Component - example used on live page: https://www.deluxe.com/digital-marketing/data-driven-marketing/triggers/
6. Testimonial Component Gen3 - V1 - New
7. Zoom Cards Gen3 - V1 - New, used on home page
8. Business Checklist Gen3 - V1 - New
9. Media Suite Gen3 - V1 - New

 

Components that support video and images

1. Post Body Media - example used on live page: https://www.deluxe.com/payments/checks/personal/
2. Text Block with Media - used on almost every page on the site. Example used on live page: https://www.deluxe.com/digital-marketing/data-driven-marketing/triggers/
3. Tabbed Resource Center - features multiple types of resource content, serves as a mini-resource center element on an actual page. Example used on live page: https://www.deluxe.com/business-operations/bankers-dashboard/
4. Business Needs Selector - we use this component mostly to identify that we sell a product to more than one type of audience. It helps us outline the value props for each 
5. Two-column multi-CTA text component Gen2 component
6. Video Block V2 - we don't currently use this component on any live pages
7. Title and content columns - used at the top of this page: https://www.deluxe.com/resources/
8. Text Block with Media Gen3 - V1 - New
9. Tabbed Resource Center Gen3 - V1 - New

 

Components that feature blogs and case studies

1. Relevant Resources - holds 3 Blog Post Cards and/or 3 Case Study Post Cards
2. Blog Post Card - an individual card that lives in the Relevant Resources component and can feature a blog post
   
3. Case Study Post Card - an individual card that lives in the Relevant Resources component and can feature a case study
4. Featured Content Post - used at the top of this page: https://www.deluxe.com/case-studies/
5. Resource center landing component - allows users to filter on resource content 
6. Recommendations Carousel Gen3 V1 - New
7. Business Needs Selector Gen3 - V1 - New

 

Home Page Template Specific Components (only used on the current homepage)

1. Text and Media Component Gen2 V1 Component - supports images and video
2. News & Updates Gen2 V1 Component - supports images
3. Home Page Case Study Columns Gen2 - V1 - supports 4 case study teasers on the homepage
4. Home Story Banner - New
5. News and Updates Gen3 - V1 - New

 

Case Study Template Specific Components (only used within current case studies)

1. Case Study Post Hero - hero component only used within the case study template

 

Blog Template Specific Components (only used within current blog templates)

1. Blog Post Hero - hero component only used in the blog template

 

Social media-specific components

1. Social Sharing Floating - used on blog posts, scrolls with a user as they scroll through a page. Example used on a live page: https://www.deluxe.com/blog/using-data-and-technology-to-optimize-your-marketing-strategy/
2. Social Proof - Example used on a live page: https://www.deluxe.com/mkt/components/social-proof/
3. Social Sharing - Example used on a live page: https://www.mpx.com/resources/ease-b2b-payments-digitization/

 

SEO-driven components

1. FAQ Gen2 V1 - Used on current product detail templates. Example used on a live page: https://www.deluxe.com/business-operations/bankers-dashboard/
2. How it Works Gen2 - V1 Container - Used on current product detail templates. example used on a live page: https://www.deluxe.com/payments/receivables-management/lockbox-services/
3. Anchor Link - allows users to jump from one part of a page to another 
4. FAQ Gen3 - V1 - New

 

Specialty components only used on 1 page

1. Basis Point Calculator - used only on the Banker's Dashboard page: https://www.deluxe.com/business-operations/bankers-dashboard/
2. Landing Page Body - used only on the Case Studies landing page: https://www.deluxe.com/case-studies/
3. Research Center Landing - helps users search through various resource content. Example on live page: https://www.deluxe.com/resources/small-business/
4. DyCE Component - not currently live 
5. Home page hero video - V2 - only used on the homepage to feature a hero video
6. Quote with supporting videos component - not used on any live pages on deluxe.com 
7. Site search results - used for global site search 
8. Custom 404 - 404 error messaging component 
9. Countdown timer - will be used on main Exchange page when built
10. Product Suite Gen3 - V1 - Used on Contact and Support page

 

Chart and table components

1. Table
2. Featured Comparison Chart
3. Marketing Package V1

 

Visually Organizing Components

1. Dividing Line - provides separation between components
2. Two-Column Landing - used on resource pages where we want content in two separate columns throughout a page

 

Site-wide 

1. Site-wide banner - not currently live
2. Site-wide ribbon - not currently live
3. Header and footer - on every page
4. Breadcrumb - on every page
5. Breadcrumb with Deluxe Plus - used on Deluxe+ product pages instead of standard breadcrumb

 

Deluxe Exchange Components

1. Countdown timer component (New component - does not live on a page yet)
2. DX Statistics Blocks component (New component - does not live on a page yet)
3. DX Speaker highlight component (New component - does not live on a page yet)