Design System

Footer 

<footer class="Footer">
    <div class="container">
        <div class="Footer__contents">
            <!-- Navigation -->
            <nav class="Navigation">
                <ul>
                    <li>
                        <span class="Navigation__list__link Navigation--level-1 ">
                            Feature Brands
                        </span>
                        <ul>
                            <li>
                                <a href="https://applications.acteev.com/applications/engineering-materials" class="Navigation__list__link Navigation--level-2 " target="_blank" rel="noopener">
                                    Acteev®
                                </a>
                            </li>
                            <li>
                                <a href="https://new-ascend-dev.5thring.co.uk/products-brands/our-brands/hidura-specialty-polyamides" class="Navigation__list__link Navigation--level-2 ">
                                    HiDura®
                                </a>
                            </li>
                            <li>
                                <a href="https://new-ascend-dev.5thring.co.uk/products-brands/our-brands/redefyne" class="Navigation__list__link Navigation--level-2 ">
                                    ReDefyne™
                                </a>
                            </li>
                            <li>
                                <a href="https://new-ascend-dev.5thring.co.uk/products-brands/our-brands/starflam" class="Navigation__list__link Navigation--level-2 ">
                                    Starflam®
                                </a>
                            </li>
                            <li>
                                <a href="https://new-ascend-dev.5thring.co.uk/products-brands/our-brands/vydyne" class="Navigation__list__link Navigation--level-2 ">
                                    Vydyne®
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="https://new-ascend-dev.5thring.co.uk/markets" class="Navigation__list__link Navigation--level-1 ">
                            Markets
                        </a>
                        <ul>
                            <li>
                                <a href="https://new-ascend-dev.5thring.co.uk/markets/automotive" class="Navigation__list__link Navigation--level-2 ">
                                    Automotive
                                </a>
                            </li>
                            <li>
                                <a href="https://new-ascend-dev.5thring.co.uk/markets/automotive/e-mobility" class="Navigation__list__link Navigation--level-2 ">
                                    E-mobility
                                </a>
                            </li>
                            <li>
                                <a href="https://new-ascend-dev.5thring.co.uk/markets/electrical-electronic" class="Navigation__list__link Navigation--level-2 ">
                                    Electrical &amp; Electronic
                                </a>
                            </li>
                            <li>
                                <a href="https://new-ascend-dev.5thring.co.uk/markets/consumer-industrial" class="Navigation__list__link Navigation--level-2 ">
                                    Consumer &amp; Industrial
                                </a>
                            </li>
                            <li>
                                <a href="https://new-ascend-dev.5thring.co.uk/markets/consumer-industrial/flexible-films" class="Navigation__list__link Navigation--level-2 ">
                                    Flexible Films
                                </a>
                            </li>
                            <li>
                                <a href="https://new-ascend-dev.5thring.co.uk/markets/consumer-industrial/cable-management" class="Navigation__list__link Navigation--level-2 ">
                                    Cable Management
                                </a>
                            </li>
                            <li>
                                <a href="https://new-ascend-dev.5thring.co.uk/markets/healthcare" class="Navigation__list__link Navigation--level-2 ">
                                    Healthcare
                                </a>
                            </li>
                            <li>
                                <a href="https://new-ascend-dev.5thring.co.uk/markets/textile" class="Navigation__list__link Navigation--level-2 ">
                                    Textile
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="https://new-ascend-dev.5thring.co.uk/about" class="Navigation__list__link Navigation--level-1 ">
                            About Us
                        </a>
                        <ul>
                            <li>
                                <a href="https://new-ascend-dev.5thring.co.uk/about/our-values" class="Navigation__list__link Navigation--level-2 ">
                                    Our Values
                                </a>
                            </li>
                            <li>
                                <a href="https://new-ascend-dev.5thring.co.uk/about/our-history" class="Navigation__list__link Navigation--level-2 ">
                                    Our History
                                </a>
                            </li>
                            <li>
                                <a href="https://new-ascend-dev.5thring.co.uk/about/our-leadership-team" class="Navigation__list__link Navigation--level-2 ">
                                    Our Leadership Team
                                </a>
                            </li>
                            <li>
                                <a href="https://offers.ascendmaterials.com/ascend-cares-foundation" class="Navigation__list__link Navigation--level-2 ">
                                    Ascend Cares Foundation
                                </a>
                            </li>
                            <li>
                                <a href="https://new-ascend-dev.5thring.co.uk/about/newsroom" class="Navigation__list__link Navigation--level-2 ">
                                    Newsroom
                                </a>
                            </li>
                            <li>
                                <a href="https://new-ascend-dev.5thring.co.uk/contact/locations" class="Navigation__list__link Navigation--level-2 ">
                                    Locations
                                </a>
                            </li>
                            <li>
                                <a href="https://new-ascend-dev.5thring.co.uk/contact" class="Navigation__list__link Navigation--level-2 ">
                                    Contact Us
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="https://new-ascend-dev.5thring.co.uk/downloads" class="Navigation__list__link Navigation--level-1 ">
                            Media
                        </a>
                        <ul>
                            <li>
                                <a href="https://new-ascend-dev.5thring.co.uk/innovation-and-technology/case-studies" class="Navigation__list__link Navigation--level-2 ">
                                    Case Studies
                                </a>
                            </li>
                            <li>
                                <a href="https://new-ascend-dev.5thring.co.uk/innovation-and-technology/tech-tips" class="Navigation__list__link Navigation--level-2 ">
                                    Tech Tips
                                </a>
                            </li>
                            <li>
                                <a href="https://new-ascend-dev.5thring.co.uk/brochures" class="Navigation__list__link Navigation--level-2 ">
                                    Brochures
                                </a>
                            </li>
                            <li>
                                <a href="https://new-ascend-dev.5thring.co.uk/downloads" class="Navigation__list__link Navigation--level-2 ">
                                    Downloads
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="https://new-ascend-dev.5thring.co.uk/careers" class="Navigation__list__link Navigation--level-1 ">
                            Careers
                        </a>
                        <ul>
                            <li>
                                <a href="https://new-ascend-dev.5thring.co.uk/careers/life-at-ascend" class="Navigation__list__link Navigation--level-2 ">
                                    Life at Ascend
                                </a>
                            </li>
                            <li>
                                <a href="https://new-ascend-dev.5thring.co.uk/careers/university-hires" class="Navigation__list__link Navigation--level-2 ">
                                    University Hires
                                </a>
                            </li>
                            <li>
                                <a href="https://ascendperformancematerials.wd1.myworkdayjobs.com/Ascend" class="Navigation__list__link Navigation--level-2 ">
                                    Open Positions
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </nav>
            <!-- Social Media -->
            <div class="SocialMedia">
                <h4 class="Footer__title">Social Media</h4>
                <img class="Image SocialMedia__image " src="https://ascendmaterials-files.sfo2.digitaloceanspaces.com/transforms/Globals/Social/_300xAUTO_fit_center-center_none_ns/901/qrcode.webp" width="258" height="258">
                <ul class="SocialMedia__list">
                    <li class="SocialMedia__handle">
                        <a href="https://www.facebook.com/AscendPerformanceMaterials" class="Link" target="_blank" rel="noreferrer">
                            <svg class="Icon">
                                <use xlink:href="/assets/img/icons.svg#facebook"></use>
                            </svg>
                        </a>
                    </li>
                    <li class="SocialMedia__handle">
                        <a href="https://x.com/AscendMaterials" class="Link" target="_blank" rel="noreferrer">
                            <svg class="Icon">
                                <use xlink:href="/assets/img/icons.svg#x"></use>
                            </svg>
                        </a>
                    </li>
                    <li class="SocialMedia__handle">
                        <a href="https://www.youtube.com/user/AscendMaterials" class="Link" target="_blank" rel="noreferrer">
                            <svg class="Icon">
                                <use xlink:href="/assets/img/icons.svg#youtube"></use>
                            </svg>
                        </a>
                    </li>
                    <li class="SocialMedia__handle">
                        <a href="http://www.linkedin.com/company/ascend-performance-materials" class="Link" target="_blank" rel="noreferrer">
                            <svg class="Icon">
                                <use xlink:href="/assets/img/icons.svg#linkedin"></use>
                            </svg>
                        </a>
                    </li>
                </ul>
            </div>
            <!-- Footer image -->
            <a href="https://www.americanchemistry.com/driving-safety-sustainability/responsible-care-driving-safety-sustainability" target="_blank">
                <img class="Image Footer__image " src="https://ascendmaterials-files.sfo2.digitaloceanspaces.com/transforms/Globals/Certifications/_300xAUTO_fit_center-center_none_ns/749/responsible_care.webp" width="198" height="148">
            </a>
        </div>
    </div>
    <!-- Credits -->
    <div class="Credits">
        <div class="container">
            <p class="Credits__text">
                © 2024
                <a href="/">
                    Ascend Performance Materials
                </a>
            </p>
            <div class="Navigation">
                <ul class="Navigation__list">
                    <li>
                        <a href="https://new-ascend-dev.5thring.co.uk/downloads#.certifications" class="Link ">
                            Certifications
                        </a>
                    </li>
                    <span>·</span>
                    <li>
                        <a href="https://new-ascend-dev.5thring.co.uk/sitemap" class="Link ">
                            Sitemap
                        </a>
                    </li>
                    <span>·</span>
                    <li>
                        <a href="https://new-ascend-dev.5thring.co.uk/policies/legal-privacy-statement" class="Link ">
                            Legal / Privacy Statement
                        </a>
                    </li>
                    <span>·</span>
                    <li>
                        <a href="https://new-ascend-dev.5thring.co.uk/policies/cookie-policy" class="Link ">
                            Cookie Policy
                        </a>
                    </li>
                    <span>·</span>
                    <li>
                        <a href="https://www.acteev.com/" class="Link " target="_blank" rel="noopener">
                            Acteev Consumer Website
                        </a>
                    </li>
                    <span>·</span>
                </ul>
            </div>
        </div>
    </div>
</footer>
 
<footer class="Footer">
	<div class="container">	
		<div class="Footer__contents">
			<!-- Navigation -->
			<nav class="Navigation">
				<ul>
					<li>
						<span class="Navigation__list__link Navigation--level-1 ">
							Feature Brands
						</span>
						<ul>
							<li>
								<a href="https://applications.acteev.com/applications/engineering-materials" class="Navigation__list__link Navigation--level-2 " target="_blank" rel="noopener">
									Acteev®
								</a>
							</li>
							<li>
								<a href="https://new-ascend-dev.5thring.co.uk/products-brands/our-brands/hidura-specialty-polyamides" class="Navigation__list__link Navigation--level-2 ">
									HiDura®
								</a>
							</li>
							<li>
								<a href="https://new-ascend-dev.5thring.co.uk/products-brands/our-brands/redefyne" class="Navigation__list__link Navigation--level-2 ">
									ReDefyne™
								</a>
							</li>
							<li>
								<a href="https://new-ascend-dev.5thring.co.uk/products-brands/our-brands/starflam" class="Navigation__list__link Navigation--level-2 ">
									Starflam®
								</a>
							</li>
							<li>
								<a href="https://new-ascend-dev.5thring.co.uk/products-brands/our-brands/vydyne" class="Navigation__list__link Navigation--level-2 ">
									Vydyne®
								</a>
							</li>
						</ul>
					</li>
					<li>
						<a href="https://new-ascend-dev.5thring.co.uk/markets" class="Navigation__list__link Navigation--level-1 ">
							Markets
						</a>
						<ul>
							<li>
								<a href="https://new-ascend-dev.5thring.co.uk/markets/automotive" class="Navigation__list__link Navigation--level-2 ">
									Automotive
								</a>
							</li>
							<li>
								<a href="https://new-ascend-dev.5thring.co.uk/markets/automotive/e-mobility" class="Navigation__list__link Navigation--level-2 ">
									E-mobility
								</a>
							</li>
							<li>
								<a href="https://new-ascend-dev.5thring.co.uk/markets/electrical-electronic" class="Navigation__list__link Navigation--level-2 ">
									Electrical &amp; Electronic
								</a>
							</li>
							<li>
								<a href="https://new-ascend-dev.5thring.co.uk/markets/consumer-industrial" class="Navigation__list__link Navigation--level-2 ">
									Consumer &amp; Industrial
								</a>
							</li>
							<li>
								<a href="https://new-ascend-dev.5thring.co.uk/markets/consumer-industrial/flexible-films" class="Navigation__list__link Navigation--level-2 ">
									Flexible Films
								</a>
							</li>
							<li>
								<a href="https://new-ascend-dev.5thring.co.uk/markets/consumer-industrial/cable-management" class="Navigation__list__link Navigation--level-2 ">
									Cable Management
								</a>
							</li>
							<li>
								<a href="https://new-ascend-dev.5thring.co.uk/markets/healthcare" class="Navigation__list__link Navigation--level-2 ">
									Healthcare
								</a>
							</li>
							<li>
								<a href="https://new-ascend-dev.5thring.co.uk/markets/textile" class="Navigation__list__link Navigation--level-2 ">
									Textile
								</a>
							</li>
						</ul>
					</li>
					<li>
						<a href="https://new-ascend-dev.5thring.co.uk/about" class="Navigation__list__link Navigation--level-1 ">
							About Us
						</a>
						<ul>
							<li>
								<a href="https://new-ascend-dev.5thring.co.uk/about/our-values" class="Navigation__list__link Navigation--level-2 ">
									Our Values
								</a>
							</li>
							<li>
								<a href="https://new-ascend-dev.5thring.co.uk/about/our-history" class="Navigation__list__link Navigation--level-2 ">
									Our History
								</a>
							</li>
							<li>
								<a href="https://new-ascend-dev.5thring.co.uk/about/our-leadership-team" class="Navigation__list__link Navigation--level-2 ">
									Our Leadership Team
								</a>
							</li>
							<li>
								<a href="https://offers.ascendmaterials.com/ascend-cares-foundation" class="Navigation__list__link Navigation--level-2 ">
									Ascend Cares Foundation
								</a>
							</li>
							<li>
								<a href="https://new-ascend-dev.5thring.co.uk/about/newsroom" class="Navigation__list__link Navigation--level-2 ">
									Newsroom
								</a>
							</li>
							<li>
								<a href="https://new-ascend-dev.5thring.co.uk/contact/locations" class="Navigation__list__link Navigation--level-2 ">
									Locations
								</a>
							</li>
							<li>
								<a href="https://new-ascend-dev.5thring.co.uk/contact" class="Navigation__list__link Navigation--level-2 ">
									Contact Us
								</a>
							</li>
						</ul>
					</li>
					<li>
						<a href="https://new-ascend-dev.5thring.co.uk/downloads" class="Navigation__list__link Navigation--level-1 ">
							Media
						</a>
						<ul>
							<li>
								<a href="https://new-ascend-dev.5thring.co.uk/innovation-and-technology/case-studies" class="Navigation__list__link Navigation--level-2 ">
									Case Studies
								</a>
								</li>
							<li>
								<a href="https://new-ascend-dev.5thring.co.uk/innovation-and-technology/tech-tips" class="Navigation__list__link Navigation--level-2 ">
									Tech Tips
								</a>
							</li>
							<li>
								<a href="https://new-ascend-dev.5thring.co.uk/brochures" class="Navigation__list__link Navigation--level-2 ">
									Brochures
								</a>
							</li>
							<li>
								<a href="https://new-ascend-dev.5thring.co.uk/downloads" class="Navigation__list__link Navigation--level-2 ">
									Downloads
								</a>
							</li>
						</ul>
					</li>
					<li>
						<a href="https://new-ascend-dev.5thring.co.uk/careers" class="Navigation__list__link Navigation--level-1 ">
							Careers
						</a>
						<ul>
							<li>
								<a href="https://new-ascend-dev.5thring.co.uk/careers/life-at-ascend" class="Navigation__list__link Navigation--level-2 ">
									Life at Ascend
								</a>
							</li>
							<li>
								<a href="https://new-ascend-dev.5thring.co.uk/careers/university-hires" class="Navigation__list__link Navigation--level-2 ">
									University Hires
								</a>
							</li>
							<li>
								<a href="https://ascendperformancematerials.wd1.myworkdayjobs.com/Ascend" class="Navigation__list__link Navigation--level-2 ">
									Open Positions
								</a>
							</li>
						</ul>
					</li>
				</ul>
			</nav>
			<!-- Social Media -->
			<div class="SocialMedia">
				<h4 class="Footer__title">Social Media</h4>
				<img class="Image SocialMedia__image " src="https://ascendmaterials-files.sfo2.digitaloceanspaces.com/transforms/Globals/Social/_300xAUTO_fit_center-center_none_ns/901/qrcode.webp" width="258" height="258">
				<ul class="SocialMedia__list">
					<li class="SocialMedia__handle">
						<a href="https://www.facebook.com/AscendPerformanceMaterials" class="Link" target="_blank" rel="noreferrer">
							<svg class="Icon">
								<use xlink:href="/assets/img/icons.svg#facebook"></use>
							</svg>
						</a>
					</li>
					<li class="SocialMedia__handle">
						<a href="https://x.com/AscendMaterials" class="Link" target="_blank" rel="noreferrer">
							<svg class="Icon">
								<use xlink:href="/assets/img/icons.svg#x"></use>
							</svg>
						</a>
					</li>
					<li class="SocialMedia__handle">
						<a href="https://www.youtube.com/user/AscendMaterials" class="Link" target="_blank" rel="noreferrer">
							<svg class="Icon">
								<use xlink:href="/assets/img/icons.svg#youtube"></use>
							</svg>
						</a>
					</li>
					<li class="SocialMedia__handle">
						<a href="http://www.linkedin.com/company/ascend-performance-materials" class="Link" target="_blank" rel="noreferrer">
							<svg class="Icon">
								<use xlink:href="/assets/img/icons.svg#linkedin"></use>
							</svg>
						</a>
					</li>
				</ul>	
			</div>
			<!-- Footer image -->
			<a href="https://www.americanchemistry.com/driving-safety-sustainability/responsible-care-driving-safety-sustainability" target="_blank">
				<img class="Image Footer__image " src="https://ascendmaterials-files.sfo2.digitaloceanspaces.com/transforms/Globals/Certifications/_300xAUTO_fit_center-center_none_ns/749/responsible_care.webp" width="198" height="148">
			</a>
		</div>
	</div>
	<!-- Credits -->
	<div class="Credits">
		<div class="container">
			<p class="Credits__text">
				© 2024
				<a href="/">
					Ascend Performance Materials
				</a>
			</p>
			<div class="Navigation">
				<ul class="Navigation__list">
					<li>
						<a href="https://new-ascend-dev.5thring.co.uk/downloads#.certifications" class="Link ">
							Certifications
						</a>
					</li>
					<span>·</span>
					<li>
						<a href="https://new-ascend-dev.5thring.co.uk/sitemap" class="Link ">
							Sitemap
						</a>
					</li>
					<span>·</span>
					<li>
						<a href="https://new-ascend-dev.5thring.co.uk/policies/legal-privacy-statement" class="Link ">
							Legal / Privacy Statement
						</a>
					</li>
					<span>·</span>
					<li>
						<a href="https://new-ascend-dev.5thring.co.uk/policies/cookie-policy" class="Link ">
							Cookie Policy
						</a>
					</li>
					<span>·</span>
					<li>
						<a href="https://www.acteev.com/" class="Link " target="_blank" rel="noopener">
							Acteev Consumer Website
						</a>
					</li>
					<span>·</span>
				</ul>
			</div>
		</div>
	</div>
</footer>
 
{
  "company": "Ascend Performance Materials",
  "url": "https://www.ascendmaterials.com",
  "placeholders": {
    "copy": "Cozy lummox gives smart squid who asks for job pen"
  }
}
  • Content: 
    .Footer {
	@apply bg-gray-200;

	&__contents {
		@apply flex
			flex-col
			items-center
			sm:items-start
			sm:flex-row
			sm:flex-wrap;

		.Navigation {
			@apply grow
				w-full
				xl:w-4/5
				mb-8;

			> ul {
				@apply grid
					grid-flow-row
					sm:grid-cols-2
					md:grid-cols-3
					lg:grid-cols-5
					justify-center
					sm:justify-normal
					gap-12
					lg:gap-3
					text-center
					sm:text-left;

				ul {
					li {
						@apply mb-0.5 
							2xl:mb-1.5;
					}
				}
			}

			&--level-1 {
				@apply block
					mb-4
					md:mb-6
					lg:mb-8
					uppercase
					text-blue
					font-bold;
			}

			&--level-2 {
				@apply text-base
					lg:text-lg
					text-black
					duration-300;
					
				&:hover {
					@apply text-gray-900;
				}
			}
		}

		.SocialMedia {
			@apply flex
				flex-col
				items-center
				sm:items-start
				mb-4;
			
				&__image {
				@apply md:mt-4
					border
					border-white
					rounded-t-sm
					p-1;
			}
			
			&__list {
				@apply flex
					mt-4;
			
					a {
					@apply relative
						flex
						mr-2
						p-1
						text-white
						bg-black
						border-2
						border-black
						rounded-[100%];
			
					&:hover {
						@apply text-black
							bg-transparent;
					}
			
					svg {
						@apply size-5;
					}
				}
			}
		}
	}

	&__title {
		@apply mb-4
			md:mb-8
			text-base
			uppercase;
	}

	&__image {
		@apply w-[200px];
	}

	.Credits {
		@apply text-white
			bg-black;
	
		.container {
			@apply flex
				flex-col
				md:flex-row
				items-center
				justify-between
				gap-3
				py-5;
		}
	
		a {
			@apply text-white
				duration-300;
	
			&:hover {
				@apply text-gray-300;
			}
		}
	
		&__text {
			@apply opacity-50
				sm:opacity-100
				mb-0
				lg:text-lg;
		}

		.Navigation__list {
			@apply flex
				flex-col
				gap-y-3
				md:gap-y-0
				md:flex-row
				text-center
				md:text-left;

			span {
				@apply hidden
					md:block
					mx-3;

				&:last-of-type {
					@apply hidden;
				}
			}
		}
	}
}
  • URL: /components/raw/footer/footer.scss
  • Filesystem Path: src/components/02-blocks/footer/footer.scss
  • Size: 2 KB

No notes defined.