<div class="SliderBlock Block swiper mySwiper swiper-fade swiper-initialized swiper-horizontal swiper-watch-progress swiper-backface-hidden">
    <div class="swiper-wrapper" style="transition-duration: 0ms; transition-delay: 0ms;">
        <div class="SliderBlock__slide swiper-slide swiper-slide-next" style="background-image: url(&quot;https://ascendmaterials-files.sfo2.digitaloceanspaces.com/transforms/Homepage/Slider/_2200xAUTO_fit_center-center_none_ns/1397/Starflam-500-Homepage-Banner.webp&quot;); width: 1737px; opacity: 0; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;" data-swiper-slide-index="1">
            <div class="container">
                <div class="Block__contents">
                    <div class="Block__copy">
                        <figure class="image image-original">
                            <img src="https://ascendmaterials-files.sfo2.digitaloceanspaces.com/transforms/Homepage/Slider/_article/1447/Starflam-logo.webp" width="200" alt="">
                        </figure>
                        <p>
                            Ascend’s new<strong> Starflam®&nbsp;500</strong> grades offer best-in-class relative temperature index (RTI), high comparative tracking index (CTI) and a UL94 V-0 rating at 0.2 mm, while also bringing the reliable specific strength and processability of polyamide 66.
                        </p>
                    </div>
                    <a href="https://new-ascend-dev.5thring.co.uk/products-brands/our-brands/starflam/starflam-500-series" class="Button Button--gray Block__action">
                        Learn More
                    </a>
                </div>
            </div>
        </div>
        <div class="SliderBlock__slide swiper-slide" style="background-image: url(&quot;https://ascendmaterials-files.sfo2.digitaloceanspaces.com/transforms/Homepage/Slider/_2200xAUTO_fit_center-center_none_ns/1407/ActeevHomepage-Banners.webp&quot;); width: 1737px; opacity: 0; transform: translate3d(-1737px, 0px, 0px); transition-duration: 0ms;" data-swiper-slide-index="2">
            <div class="container">
                <div class="Block__contents">
                    <div class="Block__copy">
                        <figure class="image image-original">
                            <img src="https://ascendmaterials-files.sfo2.digitaloceanspaces.com/transforms/Homepage/Slider/_article/1406/Acteev-HERO-LOGO.webp" alt="Acteev Logo" width="200">
                        </figure>
                        <p>
                            Acteev expands brand with launches of<br> <strong>Acteev TOUGH</strong>, <strong>Acteev FREE</strong> and <strong>Acteev BIOSERVE</strong>
                        </p>
                    </div>
                    <a href="https://www.acteev.com/" class="Button Button--gray Block__action">
                        Learn More
                    </a>
                </div>
            </div>
        </div>
        <div class="SliderBlock__slide swiper-slide swiper-slide-prev" style="background-image: url(&quot;https://ascendmaterials-files.sfo2.digitaloceanspaces.com/transforms/Homepage/Slider/_2200xAUTO_fit_center-center_none_ns/1411/CP-Homepage-Banners-new-20.webp&quot;); width: 1737px; opacity: 0; transform: translate3d(-3474px, 0px, 0px); transition-duration: 0ms;" data-swiper-slide-index="3">
            <div class="container">
                <div class="Block__contents">
                    <div class="Block__copy">
                        <figure class="image image-original">
                            <img src="https://ascendmaterials-files.sfo2.digitaloceanspaces.com/transforms/Homepage/Slider/_article/1410/CP-Ascend-Logo-RGB-Full-Color.webp" alt="" width="300">
                        </figure>
                        <p>
                            High-quality post-consumer nylon you can rely on, even in demanding applications, brought to you by Circular Polymers by Ascend.
                        </p>
                    </div>
                    <a href="https://new-ascend-dev.5thring.co.uk/news/ascend-buys-majority-stake-in-recycler-circular-polymers" class="Button Button--gray Block__action">
                        Learn More
                    </a>
                </div>
            </div>
        </div>
        <div class="SliderBlock__slide swiper-slide swiper-slide-visible swiper-slide-fully-visible swiper-slide-active" style="background-image: url(&quot;https://ascendmaterials-files.sfo2.digitaloceanspaces.com/transforms/Homepage/Slider/_2200xAUTO_fit_center-center_none_ns/1393/Homepage-Banners-SRLP.webp&quot;); width: 1737px; opacity: 1; transform: translate3d(-5211px, 0px, 0px); transition-duration: 0ms;" data-swiper-slide-index="0">
            <div class="container">
                <div class="Block__contents">
                    <h1 class="Block__title" style="color: #4e703a">
                        2023 Sustainability Report
                    </h1>
                    <div class="Block__copy">
                        <p>
                            Our 2023 report, Operating Without Compromise, reflects the accomplishments and milestones of our people that inspire a better tomorrow. Ascend's 2023 sustainability report is available to view now.
                        </p>
                    </div>
                    <a href="https://new-ascend-dev.5thring.co.uk/about/sustainability-at-ascend" class="Button Button--gray Block__action">
                        Learn More
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>
<div class="SliderBlock Block swiper mySwiper swiper-fade swiper-initialized swiper-horizontal swiper-watch-progress swiper-backface-hidden">
	<div class="swiper-wrapper" style="transition-duration: 0ms; transition-delay: 0ms;">
		<div class="SliderBlock__slide swiper-slide swiper-slide-next" style="background-image: url(&quot;https://ascendmaterials-files.sfo2.digitaloceanspaces.com/transforms/Homepage/Slider/_2200xAUTO_fit_center-center_none_ns/1397/Starflam-500-Homepage-Banner.webp&quot;); width: 1737px; opacity: 0; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;" data-swiper-slide-index="1">
			<div class="container">
				<div class="Block__contents">
					<div class="Block__copy">
						<figure class="image image-original">
							<img src="https://ascendmaterials-files.sfo2.digitaloceanspaces.com/transforms/Homepage/Slider/_article/1447/Starflam-logo.webp" width="200" alt="">
						</figure>
						<p>
							Ascend’s new<strong> Starflam®&nbsp;500</strong> grades offer best-in-class relative temperature index (RTI), high comparative tracking index (CTI) and a UL94 V-0 rating at 0.2 mm, while also bringing the reliable specific strength and processability of polyamide 66.
						</p>
					</div>
					<a href="https://new-ascend-dev.5thring.co.uk/products-brands/our-brands/starflam/starflam-500-series" class="Button Button--gray Block__action">
						Learn More
					</a>
				</div>
			</div>
		</div>
		<div class="SliderBlock__slide swiper-slide" style="background-image: url(&quot;https://ascendmaterials-files.sfo2.digitaloceanspaces.com/transforms/Homepage/Slider/_2200xAUTO_fit_center-center_none_ns/1407/ActeevHomepage-Banners.webp&quot;); width: 1737px; opacity: 0; transform: translate3d(-1737px, 0px, 0px); transition-duration: 0ms;" data-swiper-slide-index="2">
			<div class="container">
				<div class="Block__contents">
					<div class="Block__copy">
						<figure class="image image-original">
							<img src="https://ascendmaterials-files.sfo2.digitaloceanspaces.com/transforms/Homepage/Slider/_article/1406/Acteev-HERO-LOGO.webp" alt="Acteev Logo" width="200">
						</figure>
						<p>
							Acteev expands brand with launches of<br> <strong>Acteev TOUGH</strong>, <strong>Acteev FREE</strong> and <strong>Acteev BIOSERVE</strong>
						</p>
					</div>
					<a href="https://www.acteev.com/" class="Button Button--gray Block__action">
						Learn More
					</a>
				</div>
			</div>
		</div>
		<div class="SliderBlock__slide swiper-slide swiper-slide-prev" style="background-image: url(&quot;https://ascendmaterials-files.sfo2.digitaloceanspaces.com/transforms/Homepage/Slider/_2200xAUTO_fit_center-center_none_ns/1411/CP-Homepage-Banners-new-20.webp&quot;); width: 1737px; opacity: 0; transform: translate3d(-3474px, 0px, 0px); transition-duration: 0ms;" data-swiper-slide-index="3">
			<div class="container">
				<div class="Block__contents">
					<div class="Block__copy">
						<figure class="image image-original">
							<img src="https://ascendmaterials-files.sfo2.digitaloceanspaces.com/transforms/Homepage/Slider/_article/1410/CP-Ascend-Logo-RGB-Full-Color.webp" alt="" width="300">
						</figure>
						<p>
							High-quality post-consumer nylon you can rely on, even in demanding applications, brought to you by Circular Polymers by Ascend.
						</p>
					</div>
					<a href="https://new-ascend-dev.5thring.co.uk/news/ascend-buys-majority-stake-in-recycler-circular-polymers" class="Button Button--gray Block__action">
						Learn More
					</a>
				</div>
			</div>
		</div>
		<div class="SliderBlock__slide swiper-slide swiper-slide-visible swiper-slide-fully-visible swiper-slide-active" style="background-image: url(&quot;https://ascendmaterials-files.sfo2.digitaloceanspaces.com/transforms/Homepage/Slider/_2200xAUTO_fit_center-center_none_ns/1393/Homepage-Banners-SRLP.webp&quot;); width: 1737px; opacity: 1; transform: translate3d(-5211px, 0px, 0px); transition-duration: 0ms;" data-swiper-slide-index="0">
			<div class="container">
				<div class="Block__contents">
					<h1 class="Block__title" style="color: #4e703a">
						2023 Sustainability Report
					</h1>
					<div class="Block__copy">
						<p>
							Our 2023 report, Operating Without Compromise, reflects the accomplishments and milestones of our people that inspire a better tomorrow. Ascend's 2023 sustainability report is available to view now.
						</p>
					</div>
					<a href="https://new-ascend-dev.5thring.co.uk/about/sustainability-at-ascend" class="Button Button--gray Block__action">
						Learn More
					</a>
				</div>
			</div>
		</div>
	</div>
	<div class="swiper-button-prev"></div>
	<div class="swiper-button-next"></div>
</div>
{
  "company": "Ascend Performance Materials",
  "url": "https://www.ascendmaterials.com",
  "placeholders": {
    "copy": "Cozy lummox gives smart squid who asks for job pen"
  }
}
  • Content:
    .SliderBlock {
    	@apply relative;
    
    	&__slide {
    		@apply pt-24
    			pb-48
    			2xl:pb-24 
    			bg-no-repeat
    			bg-cover
    			bg-bottom
    			bg-white;
    
    		.container {
    			@apply z-10
    				relative
    				sm:max-xl:px-20;
    		}
    	}
    
    	.Slider__background {
    		@apply z-0
    			absolute
    			top-0
    			bottom-0
    			left-0
    			right-0;
    	}
    
    	.Block__contents {
    		@apply w-full
    			md:w-1/2
    			2xl:ml-4;
    	}
    
    	.Block__title {
    		@apply mb-8;
    	}
    
    	.Block__copy {
    		@apply mb-8
    			text-gray-700
    			md:text-lg 
    			3xl:text-xl
    			3xl:leading-snug;
    
    		img {
    			@apply mb-6;
    		}
    	}
    
    	.swiper-slide {
    		@apply h-auto;
    	}
    
    	.swiper-button-next {
    		@apply right-5;
    	}
    
    	.swiper-button-prev {
    		@apply left-5;
    	}
    
    	.swiper-button-next, .swiper-button-prev {
    		@apply z-50
    			max-sm:top-auto
    			max-sm:bottom-16
    			size-12
    			bg-white/50
    			rounded-[100%];
    			box-shadow: 0 0 3px 2px rgba(44,42,41,.1);
    
    		&::after {
    			@apply text-black
    				text-2xl;
    		}
    	}
    }
  • URL: /components/raw/slider-block/slider-block.scss
  • Filesystem Path: src/components/02-blocks/block/slider-block/slider-block.scss
  • Size: 910 Bytes
  • Handle: @slider-block
  • Preview:
  • Filesystem Path: src/components/02-blocks/block/slider-block/slider-block.twig

No notes defined.