Component Breakdown

Global

HTML


    <div id="aemModules">

         {Insert components here}

    </div>

LESS - Global needs added to page if any of the below components are added to a page:


    //Variables
    @black: #000000;
    @white: #fff;
    @navyblue: #004165;
    @text: #676767;
    @text2: #666666;
    @bg: #F5F5F5;
    @border: #979797;
    @orange: #FF6600;

    //Font-family variables
    @font-black:'SimpleSansBlack', 'SimpleSans', Arial, Helvetica, sans-serif; 
    @bold:'SimpleSansBold', 'SimpleSans', Arial, Helvetica, sans-serif; 
    @med:'SimpleSansMedium', 'SimpleSans', Arial, Helvetica, sans-serif; 
    @reg: 'SimpleSans', Arial, Helvetica, sans-serif;
    @reg-oblique: 'SimpleSansOblique', Arial, Helvetica, sans-serif;
    @light:'SimpleSansLight', 'SimpleSans', Arial, Helvetica, sans-serif; 

    #aemModules { color: @text; font-family: @light; position: relative; 
        .container { max-width:1024px; width: 100%; }
        .orange { color: @orange; }
        .grey-bg { background: @bg; }
        .img-fluid.vertical { height: 100%; width: auto; }
        
        //Global Text + Links
        p { font-size: 16px; color: @text; margin-bottom: 0; 
            @media(min-width:768px) { font-size: 18px; }
        }
        h2 { font-size: 38px; }
        .btn { background: @orange; font-size: 18px; color: @white; font-family: @med; display: flex; align-items: center; justify-content: center; width: 300px; height: 58px; border-radius: 0; transition: .2s ease all; 
            &:hover { opacity: .8 !important; color: @white; }
        }
        a { color: @navyblue; }
        .am-arrow { width: 15px; margin-left: 4px; margin-top: -3px; }
    
        //Animation
        h1, h2, h3, h4, p, a { opacity: 0; transform: translate3d(0, 6rem, 0); transition-property: transform, opacity; transition-duration: 0.6s; transition-timing-function: ease-out; }
        .t-left, .t-right, .t-up { opacity: 0; transition-property: transform, opacity; transition-duration: 0.6s; transition-timing-function: ease-out; }
        .t-left { transform: translate3d(-2rem, 0, 0); }
        .t-right { transform: translate3d(2rem, 0, 0); }
        .t-up { transform: translate3d(0, 6rem, 0); }
        .js-active { 
            h1, h2, h3, h4, p, a, .t-right, .t-left, .t-up { transform: translate3d(0, 0, 0); opacity: 1; }
        }
        .da-delay1 { transition-delay: 0; }
        .da-delay2 { transition-delay: .5s; }
        .da-delay3 { transition-delay: 1s; }
        .da-delay4 { transition-delay: 1.5s; }
        .da-delay5 { transition-delay: 2s; }
        .da-delay6 { transition-delay: 2.5s; }
    
        .w-100 { width: 100%; }
        .w-60 { width: 60%; }
        .w-40 { width: 40%; }
        @media(max-width:767px) {
            .w-60 { width: 100%; }
            .w-40 { width: 100%; }
        }
        .mb-60 { margin-bottom: 60px; }
        .my-60 { margin-top: 60px; margin-bottom: 60px; }
        .py-60 { padding-top: 60px; padding-bottom: 60px; }
        .py-d-60 { padding-top: 60px; padding-bottom: 60px; }
        @media(max-width:767px) {
            .mb-60 { margin-bottom: 30px; }
            .my-60 { margin-top: 30px; margin-bottom: 30px; }
            .py-60 { padding-top: 30px; padding-bottom: 30px; }
            .py-d-60 { padding-top: 30px; padding-bottom: 0; }
        } 
    }

    

JQuery


    // Set up scroll magic scene for animation
    var scrollMagicController = new ScrollMagic.Controller({
        globalSceneOptions: {
            duration: 0,
            reverse: true,
            offset: 100,
            triggerHook: 'onEnter'
        }
    });

    // Adding data-animation to component will become the animation trigger when the user scrolls to that point
    $('[data-animation]').each(function() {
        var $this = $(this);
        new ScrollMagic.Scene({ triggerElement: this })
            .on('enter', function() {
            $this.closest('section').addClass('js-active');
            })
            .addTo(scrollMagicController)
    });

    // Lazy load images on scroll - all src use small image 'blank.png' and get switched out on scroll
    $('#aemModules [data-src]').each(function() {
        var $this = $(this);
        var offset = $this.data('offset') || -400; // allow each image to set a custom offset
        new ScrollMagic.Scene({ triggerElement: this })
            .on('enter', function() {
                if (!$this.is('.loaded')) {
                    $this.attr('src', $this.data('src'));
                    $this.addClass('loaded');
                }
            })
            .addTo(scrollMagicController)
            .offset(offset);
    });

    
                

Suppressed Header

HTML


<section class="supressed-header container d-flex align-items-center">
    <div class="row">
        <div class="col-12 d-flex">
            <a href="{{Link}}">
                <img id="fdLogo" src="{{Img}}" alt="{{AltTag}}"/>
            </a>
        </div>
    </div>
</section>  
                    

LESS



//Suppressed Header
#aemModules .supressed-header { height: 120px; 
    &.container { max-width: 1060px; margin: 0 auto; }
    a, #fdLogo { width: 280px; opacity: 1; transform: translate3d(0, 0, 0);
        @media(min-width:768px) { width: 400px;  }
    }
} 
                    

Photo Hero

$9439
$7621
$116845
$7390

Main Street Insights

Subtext lorum ipsum dolor sit amet subtext lorum ipsum dolor sit amet

CTA Link

HTML


    <section data-animation class="photo-hero d-flex align-items-end" style="background-image:url('{{Img}}');">
        <div class="odometer-hero d-flex justify-content-start">
            <div id="js-od1" class="t-up da-delay2"><sup>$</sup><span class="odometer">{{Number}}</span></div>
            <div id="js-od2" class="t-up da-delay3"><sup>$</sup><span class="odometer">{{Number}}</span></div>
            <div id="js-od3" class="t-up da-delay4"><sup>$</sup><span class="odometer">{{Number}}</span></div>
            <div id="js-od4" class="t-up da-delay5"><sup>$</sup><span class="odometer">{{Number}}</span></div>
        </div>
         <div class="photo-hero-copy d-flex flex-column justify-content-around align-items-center">
            <h1 class="da-delay1">{{Text}}</h1>
            <p class="text-center da-delay2">{{Text}}</p>
            <a class="btn da-delay3" href="{{Link}}">{{LinkText}}</a>
        </div>
    </section>            
                    

LESS


    #aemModules .photo-hero { height: 460px; color: @white; position: relative; background-position: center; background-size: cover; 
        .odometer-hero { font-family: @bold; position: absolute; width: 100%; top: 0; left: 0; bottom: 145px;
            sup { font-family: @bold; vertical-align: -webkit-baseline-middle; text-decoration: none; }
            .odometer { font-family: @bold; padding-bottom: 5px; }
            #js-od1 { font-size: 46px; margin-top: 180px; position: absolute; left: 10%;
                .odometer { border-bottom: 8px solid @orange; height: 65px; line-height: 65px; font-size: 46px; }
                @media(max-width:767px) { left: 5%; font-size: 28px;  
                    .odometer { font-size: 28px; }
                }
            }
            #js-od2 { font-size: 24px; margin-top: 130px; position: absolute; left: 25%;
                .odometer { border-bottom: 5px solid @orange; height: 33px; }
                @media(max-width:767px) { left: 20%; font-size: 18px;  
                    .odometer { font-size: 20px; }
                }
            }
            #js-od3 { font-size: 18px; margin-top: 110px; position: absolute; left: 50%;
                .odometer { border-bottom: 4px solid @orange; height: 24px; }
                @media(max-width:767px) { left: 50%; font-size: 14px;  
                    .odometer { font-size: 14px; }
                }
            }
            #js-od4 { font-size: 56px; margin-top: 170px; position: absolute; left: 80%;
                @media(max-width:992px) { left: 70%; font-size: 44px; }
                .odometer { border-bottom: 10px solid @orange; height: 75px; }
                @media(max-width:767px) { left: 70%; font-size: 28px;  
                    .odometer { font-size: 28px; }
                }
            }
        }
        .photo-hero-copy { background: rgba(0,0,0,.6); height: auto; min-height: 145px; width: 100%; padding: 5px 0;
            @media(max-width:767px) { height: auto; min-height: 180px; padding-bottom: 5px; }
            h1 { margin-bottom: 0; font-family: @med; font-size: 38px; text-align: center; 
                @media(min-width:768px) { font-size: 55px; }
            }
            p { color: @white; font-family: @light; margin-bottom: 10px; }
        }
    }
                    

JQuery


    $('.photo-hero').each(function() {
        var $this = $(this);
        new ScrollMagic.Scene({ triggerElement: this })
        .on('enter', function() {
            $this.closest('section').addClass('js-active');
            odometer();
        })
        .addTo(scrollMagicController)
    });

    function odometer(){ 
        $('.odometer').each(function () {
            $(this).prop('Counter',0).animate({
                Counter: $(this).text()
            }, {
                duration: 3000,
                easing: 'swing',
                step: function (now) {
                    $(this).text(Math.ceil(now));
                    var num = $(this).text();
                    var commaNum = numberWithCommas(num);
                    $(this).text(commaNum);
                }
            });
        });
    }

    function numberWithCommas(number) {
        var parts = number.toString().split(".");
        parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        return parts.join(".");
    }
                    

Icon Hero

Storefront icon width orange arrow

Knowledge is power

Main Street Insights (formally Clover Insights) is sales analytics for small business. It harnesses your business’ transaction data to help uncover exciting new opportunities so you can better focus your activities and grow.

Get Started Arrow Icon

Icon Hero - Alt

Storefront icon width orange arrow

Knowledge is power

Main Street Insights (formally Clover Insights) is sales analytics for small business. It harnesses your business’ transaction data to help uncover exciting new opportunities so you can better focus your activities and grow.

Get Started Arrow Icon

HTML


    <section class="icon-hero grey-bg py-60">
        <div class="container">
            <div class="row">
             <!--  Image on right switch .flex-md-row with .flex-md-row-reverse -->
                <div  data-animation class="icon-hero-copy col-12 d-flex flex-column flex-md-row justify-content-center align-items-center">
                    <img class="icon-hero-img mb-5 mb-md-0 mx-md-5 t-left" src="/content/dam/FirstData/images/fd-standalone-pages/mainstreet/img/blank.png" data-src="{{Img}}" alt="{{AltTag}}"/>
                    <div class="px-md-3 text-center text-md-left">
                        <h2 class="orange">{{Text}}</h2>
                        <p>{{Text}}</p>
                        <a class="btn mt-3 t-up da-delay2" href="{{Link}}" target="{{Property}}">
                        {{LinkText}} <img class="am-arrow" src="/content/dam/FirstData/images/fd-standalone-pages/mainstreet/img/arrow.svg" alt="Arrow Icon"/>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>
                    

LESS


    #aemModules .icon-hero {
        .icon-hero-copy { max-width: 1000px; margin: 0 auto; 
            h2 { transition-delay: .15s; }
            p { transition-delay: .3s; }
            @media(max-width:767px) { 
                .btn { margin: 0 auto; }
            }
        }
        .icon-hero-img { min-width: 200px; width: 200px; transition-delay: .45s; }
    }
                    

Centered Header

Benefits for Business

Main Street Insights uncovers the hidden stories behind sales,helping you market better and bring in new customers.Best of all,using Main Street Insights is easy,and it makes running your business fun.

Centered Header - Alt

Get the Mobile App

Check our your neighborhood profile. Any First Data merchant can download our free app and sign up for a Free Trial.

app store

HTML


    <section class="centered-header grey-bg py-60">
        <div class="container">
            <div class="row">
                <div data-animation class="centered-header-copy col-12 d-flex flex-column justify-content-center align-items-center text-center px-md-3">
                    <h2 class="orange">{{Text}}</h2>
                    <p>{{Text}}</p>
                    <a class="mt-3 img-link" href="{{Link}} target="{{Property}}"><img class="t-up" src="/content/dam/FirstData/images/fd-standalone-pages/mainstreet/img/blank.png" data-src="{{Img}}" alt="{{AltTag}}"></a>
                </div>
            </div>
        </div>
    </section>
        

LESS


    #aemModules .centered-header {
        .centered-header-copy { max-width: 1000px; margin: 0 auto; 
            h2 { font-size: 42px;
                @media(min-width:768px) { font-size: 48px; }
            }
            p { font-size: 20px; width: 100%;
                @media(min-width:768px) { font-size: 24px; }
            }
            & > *:nth-child(1) { transition-delay: .15s; }
            & > *:nth-child(2) { transition-delay: .3s; }
            & > *:nth-child(3) { transition-delay: .45s; }
        }
    }
        

Product Hero

Main Street Insights mobile interface

Bring in
new business

Easily see your customers' spending patterns to find more like them.

Product Hero - Alt

Scope
out similar businesses

Compare sales and consumer spending trends at similar businesses to see how you stack up.

Main Street Insights desktop interface

HTML


    <section class="product-hero py-60" data-animation>
        <div class="container">
        <!-- .w-60 first on mobile: Switch .flex-column with .flex-column-reverse -->
            <div class="row flex-column flex-md-nowrap flex-md-row align-items-center">
                <div class="w-40 d-flex flex-column align-items-center align-items-md-end flex-column">
                <!-- Component has choice to add text or image in this area. This is a text example -->
                    <div class="product-hero-copy text-center text-md-left">
                        <h2 class="orange">{{Text}}</h2>
                        <p>{{Text}}</p>
                    </div>
                </div>
                <div class="w-60">
                <!-- Component has choice to add text or image in this area. This is an image example -->
                    <img class="img-fluid t-right" src="/content/dam/FirstData/images/fd-standalone-pages/mainstreet/img/blank.png" data-src="{{Img}}" alt="{{AltTag}}"/>
                </div>
            </div>
        </div>
    </section>
        

LESS


    #aemModules .product-hero {
        .container { max-width: 1000px; margin: 0 auto; }
        .product-hero-copy { padding: 3em; 
            h2, p { max-width: 250px; }
            @media(max-width:767px) { padding: 1em; 
                h2, p { margin: 0 auto; }
            }
            p { font-size: 16px; }
            & > *:nth-child(1) { transition-delay: .15s; }
            & > *:nth-child(2) { transition-delay: .3s; }
        }
        img { max-height: 400px; transition-delay: .45s; }
    }
        

Photo Column

53 percent returning statistic

See how you’re performing

Understand the impact of your marketing efforts and improve future efforts.

Customer reviews on social

See what your customers are saying

Understand customer sentiment and manage social communications.

Business analytics bar graph

Better target your marketing

Find profiles of your customers including where they are coming from and where they are shopping.

HTML


    <section class="photo-column py-60 grey-bg">
        <div class="container">
            <div data-animation class="row justify-content-center">
                {{COMPONENT ITEM}} - Max 5
                <div class="col-12 col-md-4 d-flex flex-column align-items-center">
                    <div class="circle-mask t-up">
                        <img class="t-up" src="/content/dam/FirstData/images/fd-standalone-pages/mainstreet/img/blank.png" data-src="{{Img}}" alt="{{AltTag}}"/> 
                    </div>
                    <div class="photo-column-copy text-center">
                        <h4 class="orange">{{Text}}</h4>
                        <p>{{Text}}</p>
                    </div>
                </div>
                {{END OF COMPONENT ITEM}}
            </div>
        </div>
    </section>

    

LESS


    #aemModules .photo-column { 
        .circle-mask { width: 80vw; max-width: 300px; height: 80vw; max-height: 300px; border-radius: 50%; overflow: hidden; border: 1px solid @text; margin-bottom: 20px;
            img { width: 100%; }
            @media(min-width:768px) { width: 25vw; height: 25vw; }
            @media(min-width:1024px) { width: 200px; height: 200px; }
        }
        .photo-column-copy { margin-bottom: 20px; width: 100%;
            h4 { font-family: @bold; font-size: 18px; }
            p { font-size: 14px; }
        }
        .flex-column {
            &:nth-child(1) { transition-delay: 0; 
                h4 { transition-delay: .15s; }
                p { transition-delay: .3s; }
                .circle-mask { transition-delay: .05s; 
                    img { transition-delay: .5s; }
                }
            }
            &:nth-child(2) { transition-delay: .5s; 
                h4 { transition-delay: .5s; }
                p { transition-delay: .65s; }
                .circle-mask { transition-delay: .55s; 
                    img { transition-delay: .8s; }
                }
            }
            &:nth-child(3) { transition-delay: 1s; 
                h4 { transition-delay: 1s; }
                p { transition-delay: 1.15s; }
                .circle-mask { transition-delay: 1.05s; 
                    img { transition-delay: 1.3s; }
                }
            }
            &:nth-child(4) { transition-delay: 1.5s; 
                h4 { transition-delay: 1.5s; }
                p { transition-delay: 1.65s; }
                .circle-mask { transition-delay: 1.55s; 
                    img { transition-delay: 1.8s; }
                }
            }
            &:nth-child(5) { transition-delay: 2s; 
                h4 { transition-delay: 2s; }
                p { transition-delay: 2.15s; }
                .circle-mask { transition-delay: 2.05s; 
                    img { transition-delay: 2.3s; }
                }
            }
            &:nth-child(6) { transition-delay: 2.5s; 
                h4 { transition-delay: 2.5s; }
                p { transition-delay: 2.65s; }
                .circle-mask { transition-delay: 2.55s; 
                    img { transition-delay: 2.8s; }
                }
            }
        }
    }
    

Video

HTML


    <section class="video py-60 {{grey-bg}}">
        <div class="container">
            <div data-animation class="row justify-content-center">
                <div class="col-12 inline-video">
                    <div class="full-video">
                        <video class="video-js" data-video-id="{{Property}}" data-account="{{Property}}" data-player="{{Property}}" data-embed="default" controls=""{{Property}}></video>
                        <script src="{{Property}}"></script>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    

LESS


    #aemModules .video { 
        .inline-video { display: block; position: relative; max-width: 992px; width: 100%; 
            .full-video { display: block; padding-top: 58%; 
                .video-js { width: 100%; height: 100%; position: absolute; top: 0; left: 0; border: none; }
            }
        }
    }
    

FAQs

Main Street Insights neighborhood interface

FAQs

Can Main Street Insights help me bring in new business?

check icon

Yes, Main Street Insights provides the ability to easily identify your customers’ spending patterns and find more like them.

Can Main Street Insights show me how my Business performs related to competitors?

check icon

Yes, you can compare your sales and consumer spending trends to similar businesses.

Can Main Street Insights help me with my marketing campaigns?

check icon

Yes, Main Street Insights can help you profile your customers and segment them by categories. It can also help you better understand the impact of your marketing efforts.

HTML


    <section class="faqs py-60 grey-bg">
        <div class="container">
            <div data-animation class="row flex-column flex-md-row flex-md-nowrap align-items-center">
                <div class="col-12 col-md-6 d-flex justify-content-center align-items-center mb-5">
                    <img class="da-delay3 t-left" src="/content/dam/FirstData/images/fd-standalone-pages/mainstreet/img/blank.png" data-src="{{Img}}" alt="{{AltTag}}"/>
                </div>
                <div class="faqs-copy col-12 col-md-6">
                    <h2 class="orange">FAQs</h2>
                    <div class="da-delay1 t-up">
                        <h4>{{Text}}</h4>
                        <div class="bullet">
                            <img class="t-up" src="/content/dam/FirstData/images/fd-standalone-pages/mainstreet/img/tick.svg" alt="check icon"/>
                            <p>{{Text}}</p>
                        </div>
                    </div>
                    <div class="da-delay2 t-up">
                    <h4>{{Text}}</h4>
                        <div class="bullet">
                            <img class="t-up" src="/content/dam/FirstData/images/fd-standalone-pages/mainstreet/img/tick.svg" alt="check icon"/>
                            <p>{{Text}}</p>
                        </div>
                    </div>
                    <div class="da-delay3 t-up">
                        <h4>{{Text}}</h4>
                        <div class="bullet">
                            <img class="t-up" src="/content/dam/FirstData/images/fd-standalone-pages/mainstreet/img/tick.svg" alt="check icon"/>
                            <p>{{Text}}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    

LESS


    #aemModules .faqs {
        img { width: 100%; }
        .faqs-copy {
            .bullet { display: flex; align-items: flex-start; 
                img { min-width: 25px; width: 25px; height: 19px; margin-top: 5px; margin-right: 1em; }
            }
            h4 { font-family: @bold; font-size: 18px; margin-bottom: 20px; }
            p { margin-bottom: 20px; }
        }
    }
    

Product Cluster

Clover POS systems lineup

Explore the complete Clover POS lineup

Learn More

HTML


    <section class="product-cluster py-60 mb-60 grey-bg">
        <div class="container">
            <div data-animation class="row mb-60">
                <div class="col-12">
                    <img class="pc-logo t-up da-delay1" src="/content/dam/FirstData/images/fd-standalone-pages/mainstreet/img/blank.png" data-src="{{Img}}" alt="{{AltTag}}"/>
                </div>
            </div>
            <div class="row mb-60">
                <div class="col-12">
                    <img class="t-up da-delay2" src="/content/dam/FirstData/images/fd-standalone-pages/mainstreet/img/blank.png" data-src="{{Img}}" alt="{{AltTag}}"/>
                    <div class="product-cluster-copy">
                        <h3 class="da-delay3">
                            <span class="text-nowrap">{{Text}}</span> 
                            <span class="text-nowrap">{{Text}}</span>
                        </h3>
                        <a class="btn da-delay3" href="{{Link}}">{{LinkText}}</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
            
            

LESS


    #aemModules .product-cluster { 
        .pc-logo { width: 300px; margin-bottom: 20px; 
            @media(max-width:767px) { width: 180px; }
        }
        img { display: block; width: 100%; margin: 0 auto -10%; 
            @media(min-width:768px) { margin: 0 auto -29%; }
        }
        .product-cluster-copy { max-width: 400px; text-align: center; }
        h3 { font-size: calc(1.1875rem + 1.18055556vw); text-align: center; margin-bottom: 1em; } 
        a { font-family: @reg; font-size: 1.25em; position: relative; margin: 0 auto; padding: 1.2em 2.75em; width: auto; height: auto; display: inline-block;}
    }
            

Sticky CTA

HTML


    <section data-animation class="sticky-cta">
        <a href="{{Link}}" target="{{Property}}">
        {{LinkText}} <img src="/content/dam/FirstData/images/fd-standalone-pages/mainstreet/img/arrow.svg" alt="Arrow Icon"/>
        </a>
        <a href="{{Link}}" target="{{Property}}">
        {{LinkText}} <img src="/content/dam/FirstData/images/fd-standalone-pages/mainstreet/img/arrow.svg" alt="Arrow Icon"/>
        </a>
    </section>
        

LESS


    #aemModules .sticky-cta { position: fixed; right: 0; bottom: 0; left: 0; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; background: @text2;
        a { background: @orange; color: @white; font-size: 14px; line-height: 1.4; padding: 15px; margin: 0 2px; opacity: 1; transform: translate3d(0, 0, 0);
            img { width: 10px; transform: translate3d(0, 0, 0); opacity: 1; }
            &:hover { text-decoration: none; background: rgba(255, 102, 0,.8); }
            @media(min-width:768px) { font-size: calc(1.125rem + .13888889vw); 
                img { width: 20px; }
            }
        }
    }