No notes defined.
<div class="slab slab--bg-dark-blue align-full margin-bottom-md">
<div class="wrap">
<div class="grid grid-3-cols">
<div>
<div class="card card--ksp card--light card--neon">
<div class="card__content">
<div class="card--ksp__icon-container">
<i class="icon h3 card--ksp__icon">
<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 399.56 399.56">
<defs>
<style>
.cls-cogs1 {
fill: #170d38;
stroke-width: 0px;
}
</style>
</defs>
<g id="icons">
<g>
<path class="cls-cogs1" d="m135.29,322.01c31.84,0,57.74-25.9,57.74-57.74s-25.9-57.74-57.74-57.74-57.74,25.9-57.74,57.74,25.9,57.74,57.74,57.74Zm0-90.47c18.05,0,32.74,14.69,32.74,32.74s-14.69,32.74-32.74,32.74-32.74-14.69-32.74-32.74,14.69-32.74,32.74-32.74Z"></path>
<path class="cls-cogs1" d="m251.61,232.38h-11.62c-2.06-6.76-4.79-13.31-8.14-19.58l8.24-8.24c7.39-7.39,7.39-19.42,0-26.82l-18.28-18.28c-7.39-7.39-19.42-7.39-26.82,0l-8.24,8.24c-6.27-3.35-12.82-6.08-19.58-8.14v-11.62c0-10.46-8.51-18.96-18.96-18.96h-25.85c-10.46,0-18.96,8.51-18.96,18.96v11.62c-6.76,2.06-13.32,4.79-19.58,8.14l-8.24-8.24c-7.39-7.39-19.42-7.39-26.82,0l-18.28,18.28c-3.58,3.58-5.55,8.34-5.55,13.41s1.97,9.83,5.55,13.41l8.24,8.24c-3.35,6.27-6.08,12.82-8.14,19.58h-11.62c-9.92,0-18.08,7.67-18.88,17.38.28.55,6.05,11.48,24.92,18.97v-11.35h10.19c8.62,0,16.17-5.9,18.36-14.34,1.95-7.52,4.96-14.76,8.95-21.52,4.43-7.52,3.27-17.04-2.83-23.14l-7.23-7.23,9.74-9.74,7.23,7.23c6.1,6.1,15.62,7.27,23.14,2.83,6.76-3.99,14-7,21.52-8.95,8.44-2.19,14.34-9.74,14.34-18.36v-10.19h13.77v10.19c0,8.62,5.9,16.17,14.34,18.36,7.52,1.95,14.76,4.96,21.52,8.95,7.52,4.43,17.04,3.27,23.14-2.83l7.23-7.23,9.74,9.74-7.23,7.23c-6.1,6.1-7.27,15.62-2.83,23.14,3.99,6.76,7,14,8.95,21.52,2.19,8.44,9.74,14.34,18.36,14.34h10.19v13.77h-10.19c-8.62,0-16.17,5.9-18.36,14.34-1.95,7.52-4.96,14.76-8.95,21.52-4.44,7.52-3.27,17.04,2.83,23.14l7.23,7.23-9.74,9.74-7.23-7.23c-6.1-6.1-15.62-7.27-23.14-2.83-6.76,3.99-14,7-21.52,8.95-8.44,2.19-14.34,9.74-14.34,18.36v10.19h-13.77v-10.19c0-8.62-5.9-16.17-14.34-18.36-7.52-1.95-14.76-4.96-21.52-8.95-7.52-4.43-17.04-3.27-23.14,2.83l-7.23,7.23-9.74-9.74,7.23-7.23c6.1-6.1,7.27-15.62,2.83-23.14-3.99-6.76-7-14-8.95-21.52-1.16-4.47-3.83-8.22-7.37-10.77H0v2.46c0,10.46,8.51,18.96,18.96,18.96h11.62c2.06,6.76,4.79,13.32,8.14,19.58l-8.24,8.24c-3.58,3.58-5.56,8.34-5.56,13.41s1.97,9.83,5.55,13.41l18.28,18.28c3.58,3.58,8.34,5.56,13.41,5.56s9.83-1.97,13.41-5.55l8.24-8.24c6.26,3.35,12.82,6.08,19.58,8.14v11.62c0,10.46,8.51,18.96,18.96,18.96h25.85c10.46,0,18.96-8.51,18.96-18.96v-11.62c6.76-2.06,13.32-4.79,19.58-8.14l8.24,8.24c3.58,3.58,8.34,5.56,13.41,5.56s9.83-1.97,13.41-5.55l18.28-18.28c7.39-7.39,7.39-19.42,0-26.82l-8.24-8.24c3.35-6.26,6.08-12.82,8.14-19.58h11.62c10.46,0,18.96-8.51,18.96-18.96v-25.85c0-10.46-8.51-18.96-18.96-18.96Z"></path>
<path class="cls-cogs1" d="m265.45,162.18c-1.88,0-3.75-.15-5.58-.46l-3.99,24.14c3.14.52,6.36.78,9.57.78,31.5,0,57.13-25.08,57.13-55.9s-25.63-55.9-57.13-55.9c-28.91,0-52.85,21.12-56.61,48.41,5.12,4.13,12.89,8.71,24.29,11.92-.21-1.46-.34-2.94-.34-4.44,0-17.33,14.65-31.43,32.66-31.43s32.67,14.1,32.67,31.43-14.65,31.43-32.67,31.43Z"></path>
<path class="cls-cogs1" d="m375.09,129.35v7.88h-10.29c-8.44,0-15.85,5.71-18.03,13.89-1.93,7.22-4.9,14.18-8.84,20.68-4.5,7.42-3.34,16.79,2.83,22.79l6.93,6.74-9.66,9.4-7.42-7.21c-5.95-5.79-15.21-6.91-22.51-2.72l-1.78,1.02c-6.31,3.63-10.48,6.04-16.87,7.65-8.35,2.11-14.18,9.47-14.18,17.9v15.66h24.47v-11.07c6.62-2.13,11.76-4.91,16.94-7.87l8.29,8.06c7.2,7.01,18.93,7.01,26.13,0l18.14-17.64c3.6-3.5,5.58-8.18,5.58-13.18,0-5-1.98-9.68-5.58-13.18l-8-7.78c3.26-5.97,5.92-12.22,7.95-18.66h11.74c10,0,18.16-7.84,18.61-17.64-4.12-4.37-11.66-10.38-24.43-14.71Z"></path>
<path class="cls-cogs1" d="m380.91,99.8h-11.74c-2.02-6.44-4.68-12.68-7.95-18.66l8-7.78c3.6-3.5,5.58-8.18,5.58-13.18,0-5-1.98-9.68-5.58-13.18l-18.14-17.64c-7.2-7.01-18.93-7.01-26.13,0l-8.35,8.12c-6.29-3.3-12.88-5.97-19.67-7.98v-11.02c0-10.19-8.37-18.47-18.65-18.47h-25.66c-10.28,0-18.65,8.29-18.65,18.47v11.02c-6.79,2.01-13.38,4.69-19.67,7.98l-8.35-8.12c-7.2-7.01-18.93-7.01-26.13,0l-18.14,17.64c-3.6,3.5-5.58,8.18-5.58,13.18,0,5,1.98,9.68,5.58,13.18l8,7.78c-3.26,5.97-5.92,12.22-7.95,18.66h-11.74v24.47h16.11c8.44,0,15.85-5.71,18.03-13.89,1.93-7.22,4.9-14.18,8.84-20.67,4.5-7.42,3.34-16.79-2.83-22.79l-6.93-6.74,9.66-9.4,7.42,7.21c5.95,5.79,15.21,6.91,22.51,2.72,6.74-3.86,13.95-6.78,21.45-8.67,8.35-2.11,14.18-9.47,14.18-17.9v-9.67h14.02v9.67c0,8.43,5.83,15.8,14.18,17.9,7.5,1.89,14.71,4.81,21.45,8.67,7.3,4.19,16.56,3.07,22.51-2.72l7.42-7.21,9.66,9.4-6.93,6.74c-6.17,6-7.33,15.37-2.83,22.79,3.94,6.5,6.92,13.46,8.84,20.67,2.18,8.18,9.6,13.89,18.03,13.89h34.75v-6c0-10.19-8.37-18.47-18.65-18.47Z"></path>
</g>
</g>
</svg>
</i>
</div>
<h2 class="h4 card__title">£11 million funding secured for business</h2>
<p>Text describing the USP here which could if necessary have an arrow to denote link</p>
</div>
</div>
</div>
<div>
<div class="card card--ksp card--light card--lavender">
<div class="card__content">
<div class="card--ksp__icon-container">
<i class="icon h3 card--ksp__icon">
<!--?xml version="1.0" encoding="UTF-8"?-->
<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500.24 500.95">
<defs>
<style>
.cls-bike {
fill: none;
stroke-width: 25.11px;
}
.cls-bike,
.cls-bike2 {
stroke: #170f39;
stroke-miterlimit: 10;
}
.cls-bike2 {
stroke-width: 11.34px;
}
.cls-bike2,
.cls-bike3 {
fill: #170f39;
}
.cls-bike3 {
stroke-width: 0px;
}
</style>
</defs>
<g id="Layer_15" data-name="Layer 15">
<g id="lMpsVO">
<path class="cls-bike2" d="m162.84,315.28c-2.23-1.68-10.24-7.03-12.43-8.65-47.79-31.3-37.51-24.11-59.51-38.92-16.18-10.86-23.52-11.21-40.66-10.64-15.08.5-27.96,6.62-39.07,16.3-7.61,6.63-7.23,17.89.51,25.15,22.14,19.87,31.32,27.43,50.28,44.24,37.24,33.25,62.3,55.42,98.78,86,6.47,6.03,14.02,8.6,22.87,8.59,51.96-.1,103.92.12,155.88-.15,14.93-.08,23.12,2.25,36.93,14.1,12.6,13.89,7.44,7.59,20.38,21.17,3.16,3.31,4.73,5.2,7.86,3.46,4.39-2.45,4.81-7.67.83-11.88-9.85-10.41-.78,1.34-10.66-9.04-3.68-3.87-9.1-11.64-12.71-15.57-11.53-12.53-23.01-16.3-40.08-16.3-52.49.02-104.97-.06-157.45.1-6.23.02-11-1.92-15.48-6.1-48.63-45.35-97.8-82.54-146.5-127.81-3.4-3.16-3.32-4.56.36-7.35,17.44-13.26,38.29-14.87,56.96-3.07,12.89,8.15,29.59,19.21,45.49,29.67,16.86,10.75,14.34,9.37,30,18.81,2.58-4.2,4.93-8.03,7.43-12.1Zm26.5,14.89c6.09-6.23,13.79-8.83,22.38-8.87,20.08-.08,40.16.05,60.23-.13,2.56-.02,5.7-.73,7.56-2.29,39.12-32.61,98.44-30.6,136.75,6.8,22.95,22.4,18.41,17.85,41.68,39.93,17.37,17.79,17.95,2.06,12.93-2.7-23.84-22.6-22.54-26.45-46.48-48.95-42.25-39.71-104.42-44.07-150.93-9.39-1.31.98-3.29,1.53-4.97,1.54-17.71.11-35.43.1-53.15.06-28.39-.05-47.32,17.22-51.19,45.08-.32,2.31-.68,4.62-.76,6.94-.32,8.46,5.33,14.33,13.92,14.39,12.07.08,24.15.02,36.22.02,27.69,0,55.38,0,83.07,0,.92,0,1.84.05,2.75-.03,3.74-.35,6.35-2.99,6.53-6.56.19-3.71-2.34-6.83-6.11-7.37-1.29-.18-2.62-.09-3.93-.09-37.66,0-75.32,0-112.98,0h-5.18c1.25-10.94,4.09-20.63,11.66-28.38Z"></path>
</g>
<path class="cls-bike3" d="m494.49,414.82l-68.04-71.41,16.14-18.68,56.91,59.73c.32,1.16,3.19,12.74-5,30.36Z"></path>
<path class="cls-bike3" d="m414.01,500.95l-68.04-71.41,33.9-.03,39.15,41.09c.32,1.16,3.19,12.74-5,30.36Z"></path>
<path class="cls-bike3" d="m327.4,377.86h-98.86s-2.5-24.51-2.5-24.51h82.69c1.07.57,11.48,6.46,18.68,24.51Z"></path>
<polygon class="cls-bike3" points="218.59 195.92 190.91 261.68 218.86 261.68 218.86 294.19 240.61 294.19 240.61 239.93 221.57 239.93 240.33 195.92 218.59 195.92"></polygon>
<path class="cls-bike3" d="m315.8,189.03v-50.82c0-13.66-6.39-26.63-17.98-36.53-10.66-9.09-24.48-14.31-37.92-14.31h-18.63c-13.44,0-27.26,5.22-37.92,14.31-11.59,9.9-17.98,22.87-17.98,36.53v57.31c.55,1.02,5.79,10.12,21.66,16.42v-73.72c0-13.49,14.96-29.18,34.24-29.18h18.63c19.28,0,34.24,15.69,34.24,29.18v50.82"></path>
<path class="cls-bike3" d="m250.69,87.37c18.02,0,32.67-14.66,32.67-32.67s-14.66-32.67-32.67-32.67-32.67,14.66-32.67,32.67,14.66,32.67,32.67,32.67Zm0-47.45c8.15,0,14.77,6.63,14.77,14.77s-6.63,14.77-14.77,14.77-14.77-6.63-14.77-14.77,6.63-14.77,14.77-14.77Z"></path>
<path class="cls-bike3" d="m294.14,212.4v-60.14s21.66,0,21.66,0v43.7c-.5.94-5.71,10.1-21.66,16.43Z"></path>
<polygon class="cls-bike3" points="284.1 195.66 311.77 261.42 283.82 261.42 283.82 294.19 262.08 294.19 262.07 239.67 281.11 239.67 262.07 195.92 284.1 195.66"></polygon>
<path class="cls-bike3" d="m193.99,104.06c4.09-4.45,8.53-7.27,8.48-7.36-3.05-6.22-7.55-11.96-13.37-16.93-10.66-9.09-24.48-14.31-37.92-14.31h-18.63c-13.44,0-27.26,5.22-37.92,14.31-11.59,9.9-17.98,22.87-17.98,36.53v57.48c.55,1.02,5.79,10.12,21.66,16.42v-73.89c0-13.49,14.96-29.18,34.24-29.18h18.63c19.28,0,34.24,15.69,34.24,29.18,0,0,2.39-5.26,8.32-11.96"></path>
<path class="cls-bike3" d="m140.74,65.5c18.02,0,32.67-14.66,32.67-32.67S158.76.15,140.74.15s-32.67,14.66-32.67,32.67,14.66,32.67,32.67,32.67Zm0-47.45c8.15,0,14.77,6.63,14.77,14.77s-6.63,14.77-14.77,14.77-14.77-6.63-14.77-14.77,6.63-14.77,14.77-14.77Z"></path>
<line class="cls-bike" x1="120.12" y1="175.95" x2="120.12" y2="288.45"></line>
<line class="cls-bike" x1="163.61" y1="175.95" x2="163.61" y2="288.45"></line>
<path class="cls-bike3" d="m307.21,103.91c-4.09-4.45-8.53-7.27-8.48-7.36,3.05-6.22,7.55-11.96,13.37-16.93,10.66-9.09,24.48-14.31,37.92-14.31h18.63c13.44,0,27.26,5.22,37.92,14.31,11.59,9.9,17.98,22.87,17.98,36.53v57.48c-.55,1.02-5.79,10.12-21.66,16.42v-73.89c0-13.49-14.96-29.18-34.24-29.18h-18.63c-19.28,0-34.24,15.69-34.24,29.18,0,0-2.39-5.26-8.32-11.96"></path>
<path class="cls-bike3" d="m393.13,32.67c0-18.02-14.66-32.67-32.67-32.67-18.02,0-32.67,14.66-32.67,32.67,0,18.02,14.66,32.67,32.67,32.67,18.02,0,32.67-14.66,32.67-32.67Zm-17.9,0c0,8.15-6.63,14.77-14.77,14.77-8.15,0-14.77-6.63-14.77-14.77,0-8.15,6.63-14.77,14.77-14.77s14.77,6.63,14.77,14.77Z"></path>
<line class="cls-bike" x1="381.08" y1="175.95" x2="381.08" y2="288.32"></line>
<line class="cls-bike" x1="337.59" y1="175.95" x2="337.59" y2="288.32"></line>
</g>
</svg>
</i>
</div>
<h2 class="h4 card__title">Over 400 regional vacancies filled</h2>
<p>Text describing the USP here which could if necessary have an arrow to denote link</p>
</div>
</div>
</div>
<div>
<div class="card card--ksp card--light card--pale-blue">
<div class="card__content">
<div class="card--ksp__icon-container">
<i class="icon h3 card--ksp__icon">
<!--?xml version="1.0" encoding="UTF-8"?-->
<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500.24 450.94">
<defs>
<style>
.cls-funding1 {
fill: none;
stroke-width: 24.18px;
}
.cls-funding1,
.cls-funding2 {
stroke: #170f39;
stroke-miterlimit: 10;
}
.cls-funding2 {
stroke-width: 11.34px;
}
.cls-funding2,
.cls-funding3 {
fill: #170f39;
}
.cls-funding3 {
stroke-width: 0px;
}
</style>
</defs>
<g id="Layer_13" data-name="Layer 13">
<ellipse class="cls-funding1" cx="186.23" cy="108.45" rx="73.34" ry="32.12"></ellipse>
<path class="cls-funding1" d="m259.57,108.45c0,17.74-32.84,32.12-73.34,32.12-40.51,0-73.34-14.38-73.34-32.12"></path>
<path class="cls-funding1" d="m259.57,145.15c0,17.74-32.84,32.12-73.34,32.12-40.51,0-73.34-14.38-73.34-32.12"></path>
<path class="cls-funding1" d="m112.89,110.59v71.27c0,17.74,32.84,32.12,73.34,32.12,40.51,0,73.34-14.38,73.34-32.12v-71.27"></path>
<ellipse class="cls-funding1" cx="314.58" cy="44.21" rx="73.34" ry="32.12"></ellipse>
<path class="cls-funding1" d="m387.92,44.21c0,17.74-32.84,32.12-73.34,32.12-40.51,0-73.34-14.38-73.34-32.12"></path>
<path class="cls-funding1" d="m387.92,80.92c0,17.74-32.84,32.12-73.34,32.12-11.51,0-22.39-1.16-32.09-3.23"></path>
<path class="cls-funding1" d="m387.92,117.62c0,17.74-32.84,32.12-73.34,32.12-11.51,0-22.39-1.16-32.09-3.23"></path>
<path class="cls-funding1" d="m282.49,183.22c9.69,2.07,20.58,3.23,32.09,3.23,40.51,0,73.34-14.38,73.34-32.12V44.21"></path>
<g id="lMpsVO">
<path class="cls-funding2" d="m162.84,265.27c-2.23-1.68-10.24-7.03-12.43-8.65-47.79-31.3-37.51-24.11-59.51-38.92-16.18-10.86-23.52-11.21-40.66-10.64-15.08.5-27.96,6.62-39.07,16.3-7.61,6.63-7.23,17.89.51,25.15,22.14,19.87,31.32,27.43,50.28,44.24,37.24,33.25,62.3,55.42,98.78,86,6.47,6.03,14.02,8.6,22.87,8.59,51.96-.1,103.92.12,155.88-.15,14.93-.08,23.12,2.25,36.93,14.1,12.6,13.89,7.44,7.59,20.38,21.17,3.16,3.31,4.73,5.2,7.86,3.46,4.39-2.45,4.81-7.67.83-11.88-9.85-10.41-.78,1.34-10.66-9.04-3.68-3.87-9.1-11.64-12.71-15.57-11.53-12.53-23.01-16.3-40.08-16.3-52.49.02-104.97-.06-157.45.1-6.23.02-11-1.92-15.48-6.1-48.63-45.35-97.8-82.54-146.5-127.81-3.4-3.16-3.32-4.56.36-7.35,17.44-13.26,38.29-14.87,56.96-3.07,12.89,8.15,29.59,19.21,45.49,29.67,16.86,10.75,14.34,9.37,30,18.81,2.58-4.2,4.93-8.03,7.43-12.1Zm26.5,14.89c6.09-6.23,13.79-8.83,22.38-8.87,20.08-.08,40.16.05,60.23-.13,2.56-.02,5.7-.73,7.56-2.29,39.12-32.61,98.44-30.6,136.75,6.8,22.95,22.4,18.41,17.85,41.68,39.93,17.37,17.79,17.95,2.06,12.93-2.7-23.84-22.6-22.54-26.45-46.48-48.95-42.25-39.71-104.42-43.07-150.93-8.39-1.31.98-3.29,1.53-4.97,1.54-17.71.11-35.43.1-53.15.06-28.39-.05-47.32,16.22-51.19,44.08-.32,2.31-.68,4.62-.76,6.94-.32,8.46,5.33,14.33,13.92,14.39,12.07.08,24.15.02,36.22.02,27.69,0,55.38,0,83.07,0,.92,0,1.84.05,2.75-.03,3.74-.35,6.35-2.99,6.53-6.56.19-3.71-2.34-6.83-6.11-7.37-1.29-.18-2.62-.09-3.93-.09-37.66,0-75.32,0-112.98,0h-5.18c1.25-10.94,4.09-20.63,11.66-28.38Z"></path>
</g>
<path class="cls-funding3" d="m494.49,364.81l-68.04-71.41,16.14-18.68,56.91,59.73c.32,1.16,3.19,12.74-5,30.36Z"></path>
<path class="cls-funding3" d="m414.01,450.94l-68.04-71.41,33.9-.03,39.15,41.09c.32,1.16,3.19,12.74-5,30.36Z"></path>
<path class="cls-funding3" d="m327.4,327.85h-98.86s-2.5-24.51-2.5-24.51h82.69c1.07.57,11.48,6.46,18.68,24.51Z"></path>
</g>
</svg>
</i>
</div>
<h2 class="h4 card__title">71% of our apprentices secure a permanent position</h2>
<p>Text describing the USP here which could if necessary have an arrow to denote link</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="slab slab--bg-digital-blue align-full margin-bottom-md">
<div class="wrap">
<div class="grid grid-3-cols">
<div>
<div class="card card--ksp card--light">
<div class="card__content">
<h2 class="h4 card__title">£11 million funding secured for business</h2>
<p>Text describing the USP here which could if necessary have an arrow to denote link</p>
</div>
</div>
</div>
<div>
<div class="card card--ksp card--light">
<div class="card__content">
<h2 class="h4 card__title">Over 400 regional vacancies filled</h2>
<p>Text describing the USP here which could if necessary have an arrow to denote link</p>
</div>
</div>
</div>
<div>
<div class="card card--ksp card--light">
<div class="card__content">
<h2 class="h4 card__title">71% of our apprentices secure a permanent position</h2>
<p>Text describing the USP here which could if necessary have an arrow to denote link</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="slab slab--bg-dark-blue align-full margin-bottom-md">
<div class="wrap">
<div class="grid grid-3-cols">
<div>
<div class="card card--ksp card--light card--neon">
<div class="card__content">
<div class="card--ksp__icon-container">
<i class="icon h3 card--ksp__icon">
{{ source("src/assets/images/icons/icon-cogs.svg", true) }}
</i>
</div>
<h2 class="h4 card__title">£11 million funding secured for business</h2>
<p>Text describing the USP here which could if necessary have an arrow to denote link</p>
</div>
</div>
</div>
<div>
<div class="card card--ksp card--light card--lavender">
<div class="card__content">
<div class="card--ksp__icon-container">
<i class="icon h3 card--ksp__icon">
<!--?xml version="1.0" encoding="UTF-8"?-->
<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500.24 500.95">
<defs>
<style>
.cls-bike {
fill: none;
stroke-width: 25.11px;
}
.cls-bike, .cls-bike2 {
stroke: #170f39;
stroke-miterlimit: 10;
}
.cls-bike2 {
stroke-width: 11.34px;
}
.cls-bike2, .cls-bike3 {
fill: #170f39;
}
.cls-bike3 {
stroke-width: 0px;
}
</style>
</defs>
<g id="Layer_15" data-name="Layer 15">
<g id="lMpsVO">
<path class="cls-bike2" d="m162.84,315.28c-2.23-1.68-10.24-7.03-12.43-8.65-47.79-31.3-37.51-24.11-59.51-38.92-16.18-10.86-23.52-11.21-40.66-10.64-15.08.5-27.96,6.62-39.07,16.3-7.61,6.63-7.23,17.89.51,25.15,22.14,19.87,31.32,27.43,50.28,44.24,37.24,33.25,62.3,55.42,98.78,86,6.47,6.03,14.02,8.6,22.87,8.59,51.96-.1,103.92.12,155.88-.15,14.93-.08,23.12,2.25,36.93,14.1,12.6,13.89,7.44,7.59,20.38,21.17,3.16,3.31,4.73,5.2,7.86,3.46,4.39-2.45,4.81-7.67.83-11.88-9.85-10.41-.78,1.34-10.66-9.04-3.68-3.87-9.1-11.64-12.71-15.57-11.53-12.53-23.01-16.3-40.08-16.3-52.49.02-104.97-.06-157.45.1-6.23.02-11-1.92-15.48-6.1-48.63-45.35-97.8-82.54-146.5-127.81-3.4-3.16-3.32-4.56.36-7.35,17.44-13.26,38.29-14.87,56.96-3.07,12.89,8.15,29.59,19.21,45.49,29.67,16.86,10.75,14.34,9.37,30,18.81,2.58-4.2,4.93-8.03,7.43-12.1Zm26.5,14.89c6.09-6.23,13.79-8.83,22.38-8.87,20.08-.08,40.16.05,60.23-.13,2.56-.02,5.7-.73,7.56-2.29,39.12-32.61,98.44-30.6,136.75,6.8,22.95,22.4,18.41,17.85,41.68,39.93,17.37,17.79,17.95,2.06,12.93-2.7-23.84-22.6-22.54-26.45-46.48-48.95-42.25-39.71-104.42-44.07-150.93-9.39-1.31.98-3.29,1.53-4.97,1.54-17.71.11-35.43.1-53.15.06-28.39-.05-47.32,17.22-51.19,45.08-.32,2.31-.68,4.62-.76,6.94-.32,8.46,5.33,14.33,13.92,14.39,12.07.08,24.15.02,36.22.02,27.69,0,55.38,0,83.07,0,.92,0,1.84.05,2.75-.03,3.74-.35,6.35-2.99,6.53-6.56.19-3.71-2.34-6.83-6.11-7.37-1.29-.18-2.62-.09-3.93-.09-37.66,0-75.32,0-112.98,0h-5.18c1.25-10.94,4.09-20.63,11.66-28.38Z"></path>
</g>
<path class="cls-bike3" d="m494.49,414.82l-68.04-71.41,16.14-18.68,56.91,59.73c.32,1.16,3.19,12.74-5,30.36Z"></path>
<path class="cls-bike3" d="m414.01,500.95l-68.04-71.41,33.9-.03,39.15,41.09c.32,1.16,3.19,12.74-5,30.36Z"></path>
<path class="cls-bike3" d="m327.4,377.86h-98.86s-2.5-24.51-2.5-24.51h82.69c1.07.57,11.48,6.46,18.68,24.51Z"></path>
<polygon class="cls-bike3" points="218.59 195.92 190.91 261.68 218.86 261.68 218.86 294.19 240.61 294.19 240.61 239.93 221.57 239.93 240.33 195.92 218.59 195.92"></polygon>
<path class="cls-bike3" d="m315.8,189.03v-50.82c0-13.66-6.39-26.63-17.98-36.53-10.66-9.09-24.48-14.31-37.92-14.31h-18.63c-13.44,0-27.26,5.22-37.92,14.31-11.59,9.9-17.98,22.87-17.98,36.53v57.31c.55,1.02,5.79,10.12,21.66,16.42v-73.72c0-13.49,14.96-29.18,34.24-29.18h18.63c19.28,0,34.24,15.69,34.24,29.18v50.82"></path>
<path class="cls-bike3" d="m250.69,87.37c18.02,0,32.67-14.66,32.67-32.67s-14.66-32.67-32.67-32.67-32.67,14.66-32.67,32.67,14.66,32.67,32.67,32.67Zm0-47.45c8.15,0,14.77,6.63,14.77,14.77s-6.63,14.77-14.77,14.77-14.77-6.63-14.77-14.77,6.63-14.77,14.77-14.77Z"></path>
<path class="cls-bike3" d="m294.14,212.4v-60.14s21.66,0,21.66,0v43.7c-.5.94-5.71,10.1-21.66,16.43Z"></path>
<polygon class="cls-bike3" points="284.1 195.66 311.77 261.42 283.82 261.42 283.82 294.19 262.08 294.19 262.07 239.67 281.11 239.67 262.07 195.92 284.1 195.66"></polygon>
<path class="cls-bike3" d="m193.99,104.06c4.09-4.45,8.53-7.27,8.48-7.36-3.05-6.22-7.55-11.96-13.37-16.93-10.66-9.09-24.48-14.31-37.92-14.31h-18.63c-13.44,0-27.26,5.22-37.92,14.31-11.59,9.9-17.98,22.87-17.98,36.53v57.48c.55,1.02,5.79,10.12,21.66,16.42v-73.89c0-13.49,14.96-29.18,34.24-29.18h18.63c19.28,0,34.24,15.69,34.24,29.18,0,0,2.39-5.26,8.32-11.96"></path>
<path class="cls-bike3" d="m140.74,65.5c18.02,0,32.67-14.66,32.67-32.67S158.76.15,140.74.15s-32.67,14.66-32.67,32.67,14.66,32.67,32.67,32.67Zm0-47.45c8.15,0,14.77,6.63,14.77,14.77s-6.63,14.77-14.77,14.77-14.77-6.63-14.77-14.77,6.63-14.77,14.77-14.77Z"></path>
<line class="cls-bike" x1="120.12" y1="175.95" x2="120.12" y2="288.45"></line>
<line class="cls-bike" x1="163.61" y1="175.95" x2="163.61" y2="288.45"></line>
<path class="cls-bike3" d="m307.21,103.91c-4.09-4.45-8.53-7.27-8.48-7.36,3.05-6.22,7.55-11.96,13.37-16.93,10.66-9.09,24.48-14.31,37.92-14.31h18.63c13.44,0,27.26,5.22,37.92,14.31,11.59,9.9,17.98,22.87,17.98,36.53v57.48c-.55,1.02-5.79,10.12-21.66,16.42v-73.89c0-13.49-14.96-29.18-34.24-29.18h-18.63c-19.28,0-34.24,15.69-34.24,29.18,0,0-2.39-5.26-8.32-11.96"></path>
<path class="cls-bike3" d="m393.13,32.67c0-18.02-14.66-32.67-32.67-32.67-18.02,0-32.67,14.66-32.67,32.67,0,18.02,14.66,32.67,32.67,32.67,18.02,0,32.67-14.66,32.67-32.67Zm-17.9,0c0,8.15-6.63,14.77-14.77,14.77-8.15,0-14.77-6.63-14.77-14.77,0-8.15,6.63-14.77,14.77-14.77s14.77,6.63,14.77,14.77Z"></path>
<line class="cls-bike" x1="381.08" y1="175.95" x2="381.08" y2="288.32"></line>
<line class="cls-bike" x1="337.59" y1="175.95" x2="337.59" y2="288.32"></line>
</g>
</svg>
</i>
</div>
<h2 class="h4 card__title">Over 400 regional vacancies filled</h2>
<p>Text describing the USP here which could if necessary have an arrow to denote link</p>
</div>
</div>
</div>
<div>
<div class="card card--ksp card--light card--pale-blue">
<div class="card__content">
<div class="card--ksp__icon-container">
<i class="icon h3 card--ksp__icon">
<!--?xml version="1.0" encoding="UTF-8"?-->
<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500.24 450.94">
<defs>
<style>
.cls-funding1 {
fill: none;
stroke-width: 24.18px;
}
.cls-funding1, .cls-funding2 {
stroke: #170f39;
stroke-miterlimit: 10;
}
.cls-funding2 {
stroke-width: 11.34px;
}
.cls-funding2, .cls-funding3 {
fill: #170f39;
}
.cls-funding3 {
stroke-width: 0px;
}
</style>
</defs>
<g id="Layer_13" data-name="Layer 13">
<ellipse class="cls-funding1" cx="186.23" cy="108.45" rx="73.34" ry="32.12"></ellipse>
<path class="cls-funding1" d="m259.57,108.45c0,17.74-32.84,32.12-73.34,32.12-40.51,0-73.34-14.38-73.34-32.12"></path>
<path class="cls-funding1" d="m259.57,145.15c0,17.74-32.84,32.12-73.34,32.12-40.51,0-73.34-14.38-73.34-32.12"></path>
<path class="cls-funding1" d="m112.89,110.59v71.27c0,17.74,32.84,32.12,73.34,32.12,40.51,0,73.34-14.38,73.34-32.12v-71.27"></path>
<ellipse class="cls-funding1" cx="314.58" cy="44.21" rx="73.34" ry="32.12"></ellipse>
<path class="cls-funding1" d="m387.92,44.21c0,17.74-32.84,32.12-73.34,32.12-40.51,0-73.34-14.38-73.34-32.12"></path>
<path class="cls-funding1" d="m387.92,80.92c0,17.74-32.84,32.12-73.34,32.12-11.51,0-22.39-1.16-32.09-3.23"></path>
<path class="cls-funding1" d="m387.92,117.62c0,17.74-32.84,32.12-73.34,32.12-11.51,0-22.39-1.16-32.09-3.23"></path>
<path class="cls-funding1" d="m282.49,183.22c9.69,2.07,20.58,3.23,32.09,3.23,40.51,0,73.34-14.38,73.34-32.12V44.21"></path>
<g id="lMpsVO">
<path class="cls-funding2" d="m162.84,265.27c-2.23-1.68-10.24-7.03-12.43-8.65-47.79-31.3-37.51-24.11-59.51-38.92-16.18-10.86-23.52-11.21-40.66-10.64-15.08.5-27.96,6.62-39.07,16.3-7.61,6.63-7.23,17.89.51,25.15,22.14,19.87,31.32,27.43,50.28,44.24,37.24,33.25,62.3,55.42,98.78,86,6.47,6.03,14.02,8.6,22.87,8.59,51.96-.1,103.92.12,155.88-.15,14.93-.08,23.12,2.25,36.93,14.1,12.6,13.89,7.44,7.59,20.38,21.17,3.16,3.31,4.73,5.2,7.86,3.46,4.39-2.45,4.81-7.67.83-11.88-9.85-10.41-.78,1.34-10.66-9.04-3.68-3.87-9.1-11.64-12.71-15.57-11.53-12.53-23.01-16.3-40.08-16.3-52.49.02-104.97-.06-157.45.1-6.23.02-11-1.92-15.48-6.1-48.63-45.35-97.8-82.54-146.5-127.81-3.4-3.16-3.32-4.56.36-7.35,17.44-13.26,38.29-14.87,56.96-3.07,12.89,8.15,29.59,19.21,45.49,29.67,16.86,10.75,14.34,9.37,30,18.81,2.58-4.2,4.93-8.03,7.43-12.1Zm26.5,14.89c6.09-6.23,13.79-8.83,22.38-8.87,20.08-.08,40.16.05,60.23-.13,2.56-.02,5.7-.73,7.56-2.29,39.12-32.61,98.44-30.6,136.75,6.8,22.95,22.4,18.41,17.85,41.68,39.93,17.37,17.79,17.95,2.06,12.93-2.7-23.84-22.6-22.54-26.45-46.48-48.95-42.25-39.71-104.42-43.07-150.93-8.39-1.31.98-3.29,1.53-4.97,1.54-17.71.11-35.43.1-53.15.06-28.39-.05-47.32,16.22-51.19,44.08-.32,2.31-.68,4.62-.76,6.94-.32,8.46,5.33,14.33,13.92,14.39,12.07.08,24.15.02,36.22.02,27.69,0,55.38,0,83.07,0,.92,0,1.84.05,2.75-.03,3.74-.35,6.35-2.99,6.53-6.56.19-3.71-2.34-6.83-6.11-7.37-1.29-.18-2.62-.09-3.93-.09-37.66,0-75.32,0-112.98,0h-5.18c1.25-10.94,4.09-20.63,11.66-28.38Z"></path>
</g>
<path class="cls-funding3" d="m494.49,364.81l-68.04-71.41,16.14-18.68,56.91,59.73c.32,1.16,3.19,12.74-5,30.36Z"></path>
<path class="cls-funding3" d="m414.01,450.94l-68.04-71.41,33.9-.03,39.15,41.09c.32,1.16,3.19,12.74-5,30.36Z"></path>
<path class="cls-funding3" d="m327.4,327.85h-98.86s-2.5-24.51-2.5-24.51h82.69c1.07.57,11.48,6.46,18.68,24.51Z"></path>
</g>
</svg>
</i>
</div>
<h2 class="h4 card__title">71% of our apprentices secure a permanent position</h2>
<p>Text describing the USP here which could if necessary have an arrow to denote link</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="slab slab--bg-digital-blue align-full margin-bottom-md">
<div class="wrap">
<div class="grid grid-3-cols">
<div>
<div class="card card--ksp card--light">
<div class="card__content">
<h2 class="h4 card__title">£11 million funding secured for business</h2>
<p>Text describing the USP here which could if necessary have an arrow to denote link</p>
</div>
</div>
</div>
<div>
<div class="card card--ksp card--light">
<div class="card__content">
<h2 class="h4 card__title">Over 400 regional vacancies filled</h2>
<p>Text describing the USP here which could if necessary have an arrow to denote link</p>
</div>
</div>
</div>
<div>
<div class="card card--ksp card--light">
<div class="card__content">
<h2 class="h4 card__title">71% of our apprentices secure a permanent position</h2>
<p>Text describing the USP here which could if necessary have an arrow to denote link</p>
</div>
</div>
</div>
</div>
</div>
</div>
$card__internal-spacing: $spacing-sm;
.card {
// $theme-colours: see __vars/colours
display: block;
position: relative;
--accent-color: #{$primary};
margin-bottom: $spacing-xl;
@include clearfix;
a:not(.button) {
text-decoration: none;
border-bottom: none;
&:hover {
text-decoration: underline;
}
}
p {
margin-bottom: $card__internal-spacing;
}
&__content {
padding: 0 calc(#{$card__internal-spacing} + 2.5%);
> :first-child {
margin-top: 0;
}
> :last-child {
margin-bottom: 0;
}
}
&__title {
margin-top: 0;
margin-bottom: $spacing-md;
a {
color: #{$primary};
color: var(--accent-color);
}
}
&__figure {
&--video {
position: relative;
background-color: #CCC;
&:hover {
cursor: pointer;
}
&:after {
content: '';
position: absolute;
width: $spacing-4xl;
height: $spacing-4xl;
max-width: 50%;
max-height: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: url('#{$image-theme-directory-icon}/icon-play-circle-neutral-light.svg') no-repeat center center;
background-size: contain;
z-index: 1;
pointer-events: none;
}
& img {
color: #CCC;
}
}
}
&__clearing-flag {
background-color: $red;
color: #FFF;
padding: 0.25rem 0.5rem;
font-weight: 400;
}
// CG: A card across multiple days will clash with the one below if there is no image, so add a minimum height if necessary
&--multiple-days {
min-height: 210px;
}
//-- Child elements affected by accent colour
.blockquote__title {
color: var(--accent-color);
}
.meta--inline-dd,
.meta--inline {
dd:before {
color: var(--accent-color);
}
}
//-- ACCENT THEMES
@each $name, $value in $card-accent-colors {
&--#{$name} {
--accent-color: #{$value};
&.card--ksp .card--ksp__icon-container > .icon svg * {
@if (choose-contrast-color($value) == white) {
stroke: white!important;
fill: white!important;
color: white;
}
@else {
stroke: black!important;
fill: black!important;
color: black;
}
}
}
}
@each $name, $value in $theme-colours {
&--#{$name} {
--accent-color: #{$value};
svg {
fill: #{$value};
}
}
}
&--bg-offwhite {
background-color: $grey-50-pc;
& .card__content {
padding: $card__internal-spacing * 2;
}
& .card__figure {
margin-bottom: 0;
}
}
}
a.card {
text-decoration: none;
.card__title {
color: #{$primary};
color: var(--accent-color);
}
&:hover {
color: $text-color;
.card__title {
text-decoration: underline;
}
}
}
//-- VARIANTS
.card--flex {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
flex-direction: row-reverse;
.card__figure {
flex: 1 1 33%;
}
.card__content {
flex: 99 1 17.5em;
}
}
.card--flex-overlap {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
flex-direction: row-reverse;
padding-bottom: $spacing-sm;
.card__figure {
flex: 1 1 33%;
}
.card__content {
flex: 99 1 17.5em;
}
.card__figure {
margin-bottom: -#{$spacing-sm};
}
}
// In Razor, attach background colours only if there are more than one
.card--testimonial {
padding-bottom: $card__internal-spacing;
& .cite {
margin-bottom: $spacing-2xs;
color: var(--accent-color);
}
@each $name, $value in $testimonial-card-colors {
&.card--bg-#{$name} {
background-color: map_get($value, "background");
color: map_get($value, "color");
padding: $spacing-2xs $spacing-lg $spacing-lg $spacing-lg;
@media (min-width: map_get($breakpoint-stages, 'mobile-wide')) {
& .card__content {
padding-left: 0;
margin-left: -$spacing-4xl;
}
}
& .blockquote__prose {
margin-top: 0;
}
& q {
color: map_get($value, "color");
}
& strong, & .cite {
color: map_get($value, "contrast-color");
}
& .blockquote__figure img {
border-bottom: 0;
}
}
}
.blockquote__figure img {
border-bottom: $spacing-2xs solid var(--accent-color);
}
}
.card--pullquote {
padding-bottom: $card__internal-spacing;
margin-left: 5%;
&:before {
content: '';
display: block;
float: left;
width: 5%;
margin-right: 1%;
height: 0;
padding-bottom: 5%;
margin-left: -5%;
background: url('#{$image-theme-directory-icon}/icon-quote-primary.svg') no-repeat center center;
background-size: contain;
}
// These themes need to be updated 'manually' for now, as we're using an svg,
// and I can't think of a clever way to update dynamically based on the accent var
// something using inline SVG use/fill, or a mask?
// Don't forget to add the SVG to the filesystem!
@each $name, $value in $card-accent-colors {
&.card--#{$name} {
&:before {
background: transparent url('#{$image-theme-directory-icon}/icon-quote-#{$name}.svg') no-repeat center center;
background-size: contain;
}
}
}
}
.card--contact {
ul.list--inline {
padding-left: 1.5em;
li a {
text-decoration: none!important;
}
.icon {
font-size: 1.5rem;
}
}
ul.list--icon-bullets {
li a {
text-decoration: none!important;
border-bottom: 1px solid $grey--light
}
}
}
.card--course {
border-left: $border-accent-width solid $primary;
border-color: var(--accent-color);
}
.card--result {
// this exists, but doesn't need anything specific (yet)
}
.card--profile {
padding: $spacing-md;
/* Needs:
grey and teal
grey and burgundy
teal and neon
burgundy and neon
*/
@each $name, $value in $profile-card-themes {
&.card--#{$name} {
background: map_get($value, "background");
border-bottom: $spacing-2xs solid map_get($value, "accent-color");
margin-left: $spacing-2xl;
@if (choose-contrast-color(map_get($value, "background")) == white) {
color: white;
& .button {
color: white;
}
}
& .button--outline {
color: map_get($value, "accent-color");
border-color: map_get($value, "accent-color");
&:hover {
color: black;
}
}
& .title, & .strong {
color: map_get($value, "accent-color");
}
}
}
&.card--flex {
flex-direction: row;
}
& .card__figure {
margin-left: auto;
margin-right: auto;
max-width: 15rem;
/*@media (max-width: (map_get($breakpoint-stages, 'tablet-wide'))) {
flex: 1 1 25%;
}*/
}
& .title {
margin-bottom: 0;
}
}
.card--ksp {
color: $neutral--primary;
border-left: none;
&__icon-container {
display: table;
border-radius: 50%;
background-color: var(--accent-color);
}
& .icon {
display: table-cell;
vertical-align: middle;
width: 2em;
height: 2em;
img, svg {
width: 60%;
height: 60%;
vertical-align: unset;
}
svg {
fill: var(--accent-color);
}
}
& .card__title {
color: inherit;
margin-top: $card__internal-spacing * 2;
}
&.card--light {
& .card__title, & p {
color: white;
}
}
}
.card--event {
margin-left: $spacing-4xl;
.card__figure {
margin-bottom: #{$spacing-xs};
}
.card__date {
position: absolute;
top: 0;
left: -$spacing-4xl;
width: $spacing-4xl;
@include typescale('xs');
padding: $spacing-sm 0;
color: white;
background: $primary;
background: var(--accent-color);
line-height: 1;
text-align: center;
box-sizing: border-box;
}
.link--stretched h2 {
color: $teal;
}
a.link--stretched:hover h2 {
color: $red;
}
.card__day {
display: block;
font-weight: 500;
@include typescale('xl');
@media (min-width: map_get($breakpoint-stages, 'mobile-wide')) {
@include typescale('3xl');
}
}
.card__date-separator {
display: block;
font-weight: 500;
@include typescale('xl');
padding: $spacing-xs 0;
}
@media (min-width: (map_get($breakpoint-stages, 'tablet-wide') + 5rem)) {
margin-left: $spacing-5xl;
.card__date {
left: -$spacing-5xl;
width: $spacing-5xl;
}
.card__day {
@include typescale('5xl');
}
}
}
.card--with-logo {
border: 0;
& .card__content {
max-width: 80%;
background-color: $grey-50-pc;
padding: $spacing-xl $spacing-xl $spacing-2xl $spacing-xl;
}
& a:hover,& a:hover .card__content p {
text-decoration: none;
}
& img {
float: right;
margin-top: -$spacing-xl;
max-height: 100px;
box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
background: #FFF;
}
}
.card__video.card__figure {
@media (max-width: map_get($breakpoint-stages, 'mobile-wide')) {
padding-bottom: 50%;
position: relative;
height: 0;
}
& iframe {
width: 100%;
height: 100%;
@media (max-width: map_get($breakpoint-stages, 'mobile-wide')) {
padding-bottom: 50%;
position: absolute;
}
}
}
.card--virtual-tour {
min-height: 20rem;
position: relative;
overflow: hidden;
flex-direction: row;
background-color: $grey-50-pc;
background-size: cover!important;
background-position: center center;
background-repeat: no-repeat;
border-left: none;
border: $spacing-4xs solid $teal;
@media (max-width: map_get($breakpoint-stages, 'mobile-wide')) {
background-image: none!important;
background-color: $grey-50-pc!important;
}
.card__content {
max-width: 25rem;
z-index: 1;
background: rgba(255,255,255,0.9);
padding: $spacing-xl $spacing-xl $spacing-xs $spacing-xl;
@media (min-width: map_get($breakpoint-stages, 'mobile-wide')) {
margin-top: $spacing-2xl;
margin-left: $spacing-2xl;
}
> .title {
color: $teal;
}
> :last-child {
margin-top: $spacing-md;
}
}
}
.grid-2-cols\@tablet {
& .card__video {
&.card__figure {
padding-bottom: 50%;
position: relative;
height: 0;
& iframe {
position: absolute;
}
}
}
}