Design System

Call To Action Block 

<div class="CallToActionBlock Block">
    <div class="container">
        <div class="Block__content">
            <div class="Block__text">
                <h3 class="Block__title">
                    NTA "greener option" compared to EDTA, says Chemical Week
                </h3>
            </div>
            <div class="Block__action">
                <!--HubSpot Call-to-Action Code --><span class="hs-cta-wrapper" id="hs-cta-wrapper-00f7c1b8-7da4-4d43-bce4-7d723def5835"><span class="hs-cta-node hs-cta-00f7c1b8-7da4-4d43-bce4-7d723def5835" id="hs-cta-00f7c1b8-7da4-4d43-bce4-7d723def5835" style="visibility: visible;" data-hs-drop="true"><a id="cta_button_2946922_cfe08953-7209-4f48-9f1b-63b24843eac3" class="cta_button " href="https://offers.ascendmaterials.com/cs/c/?cta_guid=cfe08953-7209-4f48-9f1b-63b24843eac3&amp;signature=AAH58kFHY9wt6GnJ0k7vtZx1Id4M7zhjsw&amp;portal_id=2946922&amp;placement_guid=00f7c1b8-7da4-4d43-bce4-7d723def5835&amp;click=fde99087-201f-433d-aec0-23a1a0d59858&amp;redirect_url=APefjpF9_iApenrURvO45L_KwoE-Hy7jUjZTkfRk8lacC3wf-ymJxo2_O0zINLdHSM3RvB9XINy5a845npRNWFpZkft3L1HUjbFS0Hbf5N7evk1OSVLZm5Jft_F_Ya-pv39KUIIuT6w-OPWdMaodQBtGhh4jOxyPLbcWAd7e0IMCTmHCn_A3GCqmuw-Y5-rtsWY5sHpRqoN5&amp;hsutk=&amp;canon=https%3A%2F%2Fascendmaterials-new.ddev.site%2Fproducts-brands%2Fspecialty-chemicals%2Fflexatram-amines%2Fflexatram-hmt&amp;ts=1721830071026" style="" cta_dest_link="https://blog.ascendmaterials.com/nta-greener-option-compared-to-edta-says-chemical-week" title="Read the story">Read the story</a></span>
                    <script charset="utf-8" src="https://js.hscta.net/cta/current.js"></script>
                    <script type="text/javascript">
                        hbspt.cta.load(2946922, '00f7c1b8-7da4-4d43-bce4-7d723def5835', {});
                    </script>
                </span><!-- end HubSpot Call-to-Action Code -->
            </div>
        </div>
    </div>
</div>
 
<div class="CallToActionBlock Block">
	<div class="container">
		<div class="Block__content">
			<div class="Block__text">
				<h3 class="Block__title">
                    NTA "greener option" compared to EDTA, says Chemical Week
                </h3>
			</div>
			<div class="Block__action">
				<!--HubSpot Call-to-Action Code --><span class="hs-cta-wrapper" id="hs-cta-wrapper-00f7c1b8-7da4-4d43-bce4-7d723def5835"><span class="hs-cta-node hs-cta-00f7c1b8-7da4-4d43-bce4-7d723def5835" id="hs-cta-00f7c1b8-7da4-4d43-bce4-7d723def5835" style="visibility: visible;" data-hs-drop="true"><a id="cta_button_2946922_cfe08953-7209-4f48-9f1b-63b24843eac3" class="cta_button " href="https://offers.ascendmaterials.com/cs/c/?cta_guid=cfe08953-7209-4f48-9f1b-63b24843eac3&amp;signature=AAH58kFHY9wt6GnJ0k7vtZx1Id4M7zhjsw&amp;portal_id=2946922&amp;placement_guid=00f7c1b8-7da4-4d43-bce4-7d723def5835&amp;click=fde99087-201f-433d-aec0-23a1a0d59858&amp;redirect_url=APefjpF9_iApenrURvO45L_KwoE-Hy7jUjZTkfRk8lacC3wf-ymJxo2_O0zINLdHSM3RvB9XINy5a845npRNWFpZkft3L1HUjbFS0Hbf5N7evk1OSVLZm5Jft_F_Ya-pv39KUIIuT6w-OPWdMaodQBtGhh4jOxyPLbcWAd7e0IMCTmHCn_A3GCqmuw-Y5-rtsWY5sHpRqoN5&amp;hsutk=&amp;canon=https%3A%2F%2Fascendmaterials-new.ddev.site%2Fproducts-brands%2Fspecialty-chemicals%2Fflexatram-amines%2Fflexatram-hmt&amp;ts=1721830071026" style="" cta_dest_link="https://blog.ascendmaterials.com/nta-greener-option-compared-to-edta-says-chemical-week" title="Read the story">Read the story</a></span><script charset="utf-8" src="https://js.hscta.net/cta/current.js"></script><script type="text/javascript"> hbspt.cta.load(2946922, '00f7c1b8-7da4-4d43-bce4-7d723def5835', {}); </script></span><!-- end HubSpot Call-to-Action Code -->
			</div>
		</div>
	</div>
</div>
 
{
  "company": "Ascend Performance Materials",
  "url": "https://www.ascendmaterials.com",
  "placeholders": {
    "copy": "Cozy lummox gives smart squid who asks for job pen"
  }
}
  • Content: 
    .CallToActionBlock {
	.container {
		@apply max-md:py-12;
	}

	.Block__content {
		@apply flex
			flex-col
			lg:flex-row
			items-start
			lg:items-center
			justify-between
			gap-7
			lg:gap-14;
	}

	.Block__title {
		@apply text-3xl;
	}

	.Block__text {
		@apply flex-[1_0];
	}

	.Block__copy {
		&, p {
			@apply text-2xl
				font-normal
				leading-snug;
		}
	}

	&:not(:has(.Block__copy)) {
		.Block__title {
			@apply mb-0;
		}
	}

	&.Block--compact {
		.container {
			@apply py-0 #{!important};
		}
	}

	.Layout__foot & {
		.container {
			@apply pt-4;
		}
	}
}
  • URL: /components/raw/call-to-action-block/call-to-action-block.scss
  • Filesystem Path: src/components/02-blocks/block/call-to-action-block/call-to-action-block.scss
  • Size: 571 Bytes
  • Handle: @call-to-action-block
  • Preview:
  • Filesystem Path: src/components/02-blocks/block/call-to-action-block/call-to-action-block.twig

No notes defined.