Use for section slugs

Use for header of
‍any page you could need

This text is commonly used around the site. If you use this class and need to change a style add a combination class to prevent a headache. *tip make the width of your text auto and based on the width of your container

Gradient Btn
Blue/Black Hover btn

This section typically has an image I recommend positioning the image relative to the text.

Most text needs to be aligned left of whatever the width of that container should be. i.e. @1279 should have a width of 940px. This makes it easier to get an acurate margin to match mockups

All around the site there are assets and commonly used styling rules. In the following sections we will go through a few and how to build them easily in css.

$(".company-pic-1").click(function(){ count = 1; console.log(count); // Reset all images $('.company-1').attr('src', 'https://cdn.prod.website-files.com/602c29edc35660e6c913f956/6619a7d06ab4be8efe695cfe_Group%2011538.png'); $('.company-2').attr('src', 'https://cdn.prod.website-files.com/602c29edc35660e6c913f956/6619a84db62391b1fdf2565c_Group%2011567.png'); $('.company-3').attr('src', 'https://cdn.prod.website-files.com/602c29edc35660e6c913f956/6619a85b966427c6ee1b03f7_Group%2011570%20(2).png'); $(".cs-par").html("Clearbit has taken a product-centric approach to win-loss analysis, with a primary focus on increasing both product adoption and customer retention. The result? Clearbit attributes a 10% increase in gross retention to win-loss analysis by Clozd."); $(".cs-text").html("We were able to get to the core of some issues that customers were having, and we’ve seen a massive improvement in retention—greater than 10 percent GRR improvement quarter over quarter.”"); $(".titlechange").html("Rebecca Yang | VP of Engineering at Clearbit"); $('.cs-link').attr('href', 'https://www.clozd.com/blog/clearbit-relies-on-win-loss-analysis-to-increase-buyer-empathy-guide-its-product-roadmap'); // Add and remove active class $('.company-pic-1').addClass('active'); $('.company-pic-2').removeClass('active'); $('.company-pic-3').removeClass('active'); }); $(".company-pic-2").click(function(){ count = 2; console.log(count); // Reset all images $('.company-2').attr('src', 'https://cdn.prod.website-files.com/602c29edc35660e6c913f956/6619b5a0d90cc01e443bf7b8_Group%2011532.png'); $('.company-3').attr('src', 'https://cdn.prod.website-files.com/602c29edc35660e6c913f956/6619a85b966427c6ee1b03f7_Group%2011570%20(2).png'); $('.company-1').attr('src', 'https://cdn.prod.website-files.com/602c29edc35660e6c913f956/6619b3dbfc96f90502897591_Group%2011568.png'); $(".cs-par").html("After Headspace's mid-pandemic merger with Ginger, they leaned on win-loss insights to guide their ensuing rebrand. Today, they continue to partner with Clozd to add depth to their research and understand what truly resonates with their clients."); $(".cs-text").html("We’re well-situated between a lot of different teams, and one of the things that really helps us gain credibility is having customer insights to support our recommendations.”"); $(".titlechange").html("Zahra Chithiwala | Group Product Marketing Manager at Headspace"); $('.cs-link').attr('href', 'https://www.clozd.com/blog/headspace'); // Add and remove active class $('.company-pic-1').removeClass('active'); $('.company-pic-2').addClass('active'); $('.company-pic-3').removeClass('active'); }); $(".company-pic-3").click(function(){ count = 3; console.log(count); // Reset all images $('.company-3').attr('src', 'https://cdn.prod.website-files.com/602c29edc35660e6c913f956/662c1b37369947b422e81a1e_Group%2011570%20(3).png'); $('.company-2').attr('src', 'https://cdn.prod.website-files.com/602c29edc35660e6c913f956/6619a84db62391b1fdf2565c_Group%2011567.png'); $('.company-1').attr('src', 'https://cdn.prod.website-files.com/602c29edc35660e6c913f956/6619b3dbfc96f90502897591_Group%2011568.png'); $(".cs-par").html("Calendly worked with Clozd to meticulously build out their win-loss program, and over the last few years—and hundreds of interviews—that program has reliably delivered valuable insights to teams throughout their organization."); $(".cs-text").html("We're able to be extremely targeted in our approach, so we can focus on the buyers who can provide the insights that will drive the greatest impact at Calendly.”"); $(".titlechange").html("Heather Pepe | Senior Manager of Solutions Marketing at Calendly"); $('.cs-link').attr('href', 'https://www.clozd.com/blog/calendly'); // Add and remove active class $('.company-pic-1').removeClass('active'); $('.company-pic-2').removeClass('active'); $('.company-pic-3').addClass('active'); });