Links

<div class="grid footer-links__container">
    <div class="container">
        <div class="grid__row">
            <div class="grid__column footer-links__list-container" data-gridspan="12 M6 L3">
                <h3 class="footer-links__heading">sustainability</h3>
                <ul class="footer-links__list">
                    <li class="footer-links__item"><a class="footer-links__anchor" href="#" title="overview">overview</a></li>
                    <li class="footer-links__item"><a class="footer-links__anchor" href="#" title="performance">performance</a></li>
                    <li class="footer-links__item"><a class="footer-links__anchor" href="#" title="governance">governance</a></li>
                    <li class="footer-links__item"><a class="footer-links__anchor" href="#" title="policies">policies</a></li>
                    <li class="footer-links__item"><a class="footer-links__anchor" href="#" title="sustainability reports">sustainability reports</a></li>
                    <li class="footer-links__item"><a class="footer-links__anchor" href="#" title="sustainability contacts">sustainability contacts</a></li>
                </ul>
            </div>
            <div class="grid__column footer-links__list-container" data-gridspan="12 M6 L3">
                <h3 class="footer-links__heading">media</h3>
                <ul class="footer-links__list">
                    <li class="footer-links__item"><a class="footer-links__anchor" href="#" title="press kit">press kit</a></li>
                    <li class="footer-links__item"><a class="footer-links__anchor" href="#" title="media releases">media releases</a></li>
                    <li class="footer-links__item"><a class="footer-links__anchor" href="#" title="publications">publications</a></li>
                    <li class="footer-links__item"><a class="footer-links__anchor" href="#" title="social media">social media</a></li>
                    <li class="footer-links__item"><a class="footer-links__anchor" href="#" title="case studies">case studies</a></li>
                    <li class="footer-links__item"><a class="footer-links__anchor" href="#" title="media contacts">media contacts</a></li>
                </ul>
            </div>
            <div class="grid__column footer-links__list-container" data-gridspan="12 M6 L3">
                <h3 class="footer-links__heading">investors</h3>
                <ul class="footer-links__list">
                    <li class="footer-links__item"><a class="footer-links__anchor" href="#" title="about us">about us</a></li>
                    <li class="footer-links__item"><a class="footer-links__anchor" href="#" title="share performance">share performance</a></li>
                    <li class="footer-links__item"><a class="footer-links__anchor" href="#" title="financial reporting">financial reporting</a></li>
                    <li class="footer-links__item"><a class="footer-links__anchor" href="#" title="events">events</a></li>
                    <li class="footer-links__item"><a class="footer-links__anchor" href="#" title="private investors">private investors</a></li>
                    <li class="footer-links__item"><a class="footer-links__anchor" href="#" title="media releases">media releases</a></li>
                    <li class="footer-links__item"><a class="footer-links__anchor" href="#" title="investor contacts">investor contacts</a></li>
                </ul>
            </div>
            <div class="grid__column footer-links__list-container" data-gridspan="12 M6 L3">
                <h3 class="footer-links__heading">careers</h3>
                <ul class="footer-links__list">
                    <li class="footer-links__item"><a class="footer-links__anchor" href="#" title="who we are">who we are</a></li>
                    <li class="footer-links__item"><a class="footer-links__anchor" href="#" title="working at Smith &amp; Nephew">working at Smith &amp; Nephew</a></li>
                    <li class="footer-links__item"><a class="footer-links__anchor" href="#" title="valueing difference">valueing difference</a></li>
                    <li class="footer-links__item"><a class="footer-links__anchor" href="#" title="vacancies">vacancies</a></li>
                    <li class="footer-links__item"><a class="footer-links__anchor" href="#" title="career contacts">career contacts</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="grid footer-links__container">
	<div class="container">
		<div class="grid__row">
			{{#each columns}}
			<div class="grid__column footer-links__list-container" data-gridspan="12 M6 L3">
				<h3 class="footer-links__heading">{{heading}}</h3>
				<ul class="footer-links__list">
				{{#each listItems}}
					<li class="footer-links__item"><a class="footer-links__anchor" href="{{link}}" title="{{title}}">{{title}}</a></li>
				{{/each}}
				</ul>
			</div>
			{{/each}}
		</div>
	</div>
</div>
{
    "columns": [
        {
            "heading": "sustainability",
            "listItems": [
                {
                    "title": "overview",
                    "link": "#"
                },
                {
                    "title": "performance",
                    "link": "#"
                },
                {
                    "title": "governance",
                    "link": "#"
                },
                {
                    "title": "policies",
                    "link": "#"
                },
                {
                    "title": "sustainability reports",
                    "link": "#"
                },
                {
                    "title": "sustainability contacts",
                    "link": "#"
                }
            ]
        },
        {
            "heading": "media",
            "listItems": [
                {
                    "title": "press kit",
                    "link": "#"
                },
                {
                    "title": "media releases",
                    "link": "#"
                },
                {
                    "title": "publications",
                    "link": "#"
                },
                {
                    "title": "social media",
                    "link": "#"
                },
                {
                    "title": "case studies",
                    "link": "#"
                },
                {
                    "title": "media contacts",
                    "link": "#"
                }
            ]
        },
        {
            "heading": "investors",
            "listItems": [
                {
                    "title": "about us",
                    "link": "#"
                },
                {
                    "title": "share performance",
                    "link": "#"
                },
                {
                    "title": "financial reporting",
                    "link": "#"
                },
                {
                    "title": "events",
                    "link": "#"
                },
                {
                    "title": "private investors",
                    "link": "#"
                },
                {
                    "title": "media releases",
                    "link": "#"
                },
                {
                    "title": "investor contacts",
                    "link": "#"
                }
            ]
        },
        {
            "heading": "careers",
            "listItems": [
                {
                    "title": "who we are",
                    "link": "#"
                },
                {
                    "title": "working at Smith & Nephew",
                    "link": "#"
                },
                {
                    "title": "valueing difference",
                    "link": "#"
                },
                {
                    "title": "vacancies",
                    "link": "#"
                },
                {
                    "title": "career contacts",
                    "link": "#"
                }
            ]
        }
    ]
}
.footer-links__container {
	@include mq($from: small) {
		text-align: center;
	}
}
.footer-links__anchor {
	color: $black--off;
	font-weight: 700;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	display: block;
}
.footer-links__heading {
	color: $grey--dark;
	@include mq($until: small) {
		background: url("/assets/icons/arrow-down-grey.png") no-repeat center right;
	    background-image: url("/assets/icons/arrow-down-grey.svg"), none;
	    background-repeat: no-repeat;
	    background-position: center right;
	    padding-right: 2.5em;
	    background-size: 18px;
	    background-position-x: 99%;
	    cursor: pointer;
	}
	@include mq($from:small) {
		margin-top: 1em;
		margin-bottom: 1em;
	}
}
.footer-links__heading--active {
	@include mq($until: small) {
		background: url("/assets/icons/arrow-up-grey.png") no-repeat center right;
	    background-image: url("/assets/icons/arrow-up-grey.svg"), none;
	    background-size: 18px;
	    background-position-x: 99%;
	}
}
.footer-links__list {
	display: block;
	@include mq($until: small) {
		display: none;
	}
}
.footer-links__list-container {
	@include mq($until: small) {
		margin-bottom: 1em;
	}
}
$(document).ready(function() {
	$('.footer-links__heading').on('click', function() {
		$(this).toggleClass('footer-links__heading--active');
		$(this).next().slideToggle();
		$(this).parent().siblings().children('.footer-links__list').slideUp();
	});
});

There are no notes for this item.